Page 1 of 1

CSS Layout problem

Posted: Wed Jun 23, 2010 10:36 am
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}

Re: CSS Layout problem

Posted: Thu Jun 24, 2010 8:44 pm
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;
}

Re: CSS Layout problem

Posted: Fri Jun 25, 2010 2:45 pm
by cma6j
Cary: Exellent reponse. I made the change to text-aling: and it looks great now.
Thanks for your expertise.