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}
CSS Layout problem
-
- Rank II - Novice
- Posts: 46
- Joined: Sun Oct 01, 2006 2:18 pm
- Location: CA
Re: CSS Layout problem
This code is shifting it over so the logo's left edge starts at the center of the screen.
Edit: Just realized you said you want the logo to right, not the left. Try this:
Code: Select all
#logo{position:relative;left:50%;}
Code: Select all
#logo{
text-align:right;
}
-
- Rank 0 - Newcomer
- Posts: 2
- Joined: Wed Jun 23, 2010 10:22 am
Re: CSS Layout problem
Cary: Exellent reponse. I made the change to text-aling: and it looks great now.
Thanks for your expertise.
Thanks for your expertise.