IE 8 text size causing display problems

HTML & CSS
1

Anyone got an answer to this? If you use the IE text size option and increase it from medium to larger, it pushes my left floated sidebar into the middle of the page and pushes everything else all over the place. Where am I going wrong?

The CSS is like this:

body{margin:0;padding:0;text-align:center;color:#000000;font-family:“Lucida Grande”, Verdana, sans-serif;font-size:62.5%;background-image:url(…/images/grey.gif)}
h1{font-size:2.0em;font-style:normal;font-weight:bold;text-transform:uppercase;letter-spacing:4px;color:#0000FF;height:auto;text-align:center;}
h2{font-size:2.0em;color:#996600;}
h3{font-size:1.9em;color:#993300;padding-bottom:10px;}
h4{font-size:1.7em;}
h5{font-size:1.3em;font-style:normal;color:#333333;}
h6{font-size:1.0em;color:#FFFF33}
p{font-size:1.3em;text-align:left;font-weight:normal;color:#333333;}
.bluebold{color:#0000FF;font-weight:bold;}
.italic{font-style:italic;color:#CC00FF;}
.linktext{font-size:1.0em;}
.grey{color:#999999;font-size:1.0em;}
#container{width:950px;text-align:left;font-family:“Lucida Grande”, Verdana, sans-serif;margin-right:auto;margin-bottom:0;margin-left:auto;background-color:#FFFFcc;border-top-width:0px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;font-weight:bold;}
#header{background-color:#FFFFcc;text-align:center;padding-right:20px;padding-left:30px;margin-top:10px;margin-right:111px;margin-bottom:10px;margin-left:10px;}
#sidebar1{float:left;width:130px;margin-top:15px;margin-right:10px;margin-bottom:10px;margin-left:10px;padding-top:15px;padding-right:10px;padding-bottom:15px;padding-left:5px;}
#sidebar2{float:right;width:200px;height:800px;border-left-color:#0033FF;border-left-width:thin;border-left-style:dotted;background-color:#e8e8e8;background-repeat:no-repeat;margin-left:5px;padding-left:10px;padding-right:10px;margin-top:15px;text-align:center;}
#mainContent{background-image:url(…/images/Rugby3-2nobg.jpg);background-repeat:no-repeat;margin:0 0 0 150px;padding-top:0;padding-right:20px;padding-bottom:0;padding-left:20px;}
#listings{background-color:#ffffcc;text-align:left;padding-right:10px;padding-left:10px;margin-left:15px;margin-right:15px;height:590px;overflow:auto;}

The #mainContent is only used on my home page. All the other pages use just #sidebar1 and #listings.

I’m probably missing something obvious, but…

2

Can I get a link to the site so I can see what is happening??

3

yip, we need a link, but as far as i can see you are not really using the correct tags for your floats or container. if im understanding what your css is saying, you have your container and two floats (right and left) and your main container. so i assume your container is your wrapper? so for your home page you would have to set a width on your main container and for your other pages on your listings. I’ve done a site where the floats acted all crazy until i added fixed widths to them. that is just from pure observation, so if you can post a link so we can see properly what your problem is, it will be easier to help you…

4

Thank you. The link to my site is in the signature below.

The #container is set to 950px wide.