CSS Layout problem

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
Post Reply
cma6j
Rank 0 - Newcomer
Posts: 2
Joined: Wed Jun 23, 2010 10:22 am

CSS Layout problem

Post by cma6j »

I have had a website online http://www.vintagetextile.com/1920s_to_1930s.htm for quite a few years.
However, recently I have noticed an odd and disturbing problem with the appearance of my category pages (above URL).
Viewing the page in FF on 19" monitor, the above page should appear with the "Vintage Textile" logo on top right of the screen and no horizontal scroll bar shown at the bottom of the screen. However, the above page is now incorrectly presented with much white space on the right hand of the screen and consequently with a bottom horizontal scroll bar. The result is that centering does not work right.
Thanks in advance for the expert advice.

The style sheet used follows:

body{width:89%;margin:0% 5.5%;padding:0;border:0;color:#000;background-color:#fff;font:medium Verdana,Tahoma,Helvetica,sans-serif;}
#top{padding:.2em .3em .2em 1em;margin-bottom:0.5em;color:#fff;background-color:#000;font:bold 1.4em "Times New Roman",Times,serif;height:1.4em;}
img{border:none;}
td img{border:none;display:block;}
.bi{font-weight:bold;}
#itemtable td.details{padding:0 1.25em;font:1em/1.25 Verdana,Tahoma,Helvetica,sans-serif;vertical-align:middle;}
#cat-top a.herelink:link,#cat-bottom a.herelink:link,#cat-top a.herelink:visited,#cat-bottom a.herelink:visited{color:#000;background-color:#F5EBD6;}
.lgbi{font-size:large;font-style:italic;font-weight:bold;}
.reserved{color:Red;font-weight:bold;}
#itemtable .row1{background-color:#e5e5e5;color:#000;vertical-align:top;height:325px;}
#itemtable .row2{background-color:#fff;color:#000;vertical-align:top;height:325px;}
#at{font-style:italic;font-weight:bold;}
#bronze{margin-top:.5em;background:#fc6;height:1em;}
#bronze-bottom{margin-top:1.3em;margin-bottom:.5em;background:#fc6;height:1em;}
#cat-bottom{padding-top:0.2em;margin-top:.3em;padding-bottom:1em;font:400 1em/1.2 Verdana,Tahoma,Helvetica,sans-serif;text-align:center;}
#cat-top{padding-top:0.2em;margin-top:1.4em;font:400 1em/1.2 Verdana,Tahoma,Helvetica,sans-serif;text-align:center;}
#click{padding-left:2em;color:#000;background-color:#fff;font:bold 1.16em Verdana,Tahoma,Helvetica,sans-serif;position:relative;top:0.2em;}
#itemtable{width:100%;border:0;table-layout:fixed;}
#itemtable #col1,#itemtable #col2{width:209px;}
#itemtable a img{width:209px;height:325px;}
#logo{position:relative;left:50%;}
a:link{color:#000;background-color:#fff;text-decoration:none;}
a:visited{color:#8B0000;background-color:#fff;text-decoration:none;}
a:hover{color:red;background-color:#fff;text-decoration:none;}
tr.row1 p a {color:#00f;background-color:#e5e5e5;text-decoration:underline}
tr.row1 p a:visited {color:#8B0000;background-color:#e5e5e5;text-decoration:underline}
tr.row1 p a:hover {color:red;background-color:#e5e5e5;text-decoration:underline}
tr.row2 p a {color:#00f;background-color:#fff;text-decoration:underline}
tr.row2 p a:visited {color:#8B0000;background-color:#fff;text-decoration:underline}
tr.row2 p a:hover {color:red;background-color:#fff;text-decoration:underline}
User avatar
CaryD
Rank II - Novice
Posts: 46
Joined: Sun Oct 01, 2006 2:18 pm
Location: CA

Re: CSS Layout problem

Post by CaryD »

This code is shifting it over so the logo's left edge starts at the center of the screen.

Code: Select all

#logo{position:relative;left:50%;}
Edit: Just realized you said you want the logo to right, not the left. Try this:

Code: Select all

#logo{
	text-align:right;
}
cma6j
Rank 0 - Newcomer
Posts: 2
Joined: Wed Jun 23, 2010 10:22 am

Re: CSS Layout problem

Post by cma6j »

Cary: Exellent reponse. I made the change to text-aling: and it looks great now.
Thanks for your expertise.
Post Reply