wondering how to prevent an IE centered div from sliding

ie div slides when browser window is made smaller.

[bo_jehos]

Just wondering if anyone has ideas on how to prevent an IE div from sliding right as browser window is made smaller. Doesn't happen in FF. Div is being centered with text-align for IE, and margin auto for FF.

I have a set of negative-left-margined li's floated left. Their UL is 10% larger than their actual width. UL is left-margin positive. ( I don't remember why I had to do this).

This nav div sits on top of the body container div, which is centered.

CSS:

#nav_container
{width: 805px;
margin: 0 auto 12px;
padding: 0;
}

/* required to adjust margins for ie */
* html body #nav_container
{width: 805px;
margin: 0 auto;
padding: 0;
}
ul#topnav {
width:940px;
padding:0;
margin:0;
margin-left: 0px;
list-style: none;
border: none;
overflow:hidden;

font: normal 11px Arial, sans-serif;
}

/*required to adjust margins for ie */

* html body div ul#topnav {
margin-left: 135px;

}

#topnav li {
display: block;
float:left;
margin:0;
padding:0;
}

#topnav a {
display:block;
color:#FFF;
text-decoration:none;
background: url(images/lia.gif) no-repeat;
padding: 8px 13px 7px 17px;
position: relative;
font: bold 10px Arial sans-serif;

font-style:italic;
line-height:11px;

}
#topnav a#a0 { left: 0px;}
#topnav a#a1 { left: -15px;}
#topnav a#a2 { left: -30px;}
#topnav a#a3 { left: -45px;}
#topnav a#a4 { left: -60px;}
#topnav a#a5 { left: -75px;}
#topnav a#a6 { left: -90px;}
#topnav a#a7 { left: -105px;}
#topnav a#a8 { left: -120px;}
#topnav a#end { left: -135px; background-image: url(images/endtab.gif); padding: 8px 12px 10px 0px;}

[SuzyUK]

bo_jehos

we're a lazy bunch around here ;) it's not a copy/pastable example so it gets ignored huh ;)
anyway from your code and explanation it's not at all easy for us to see what it is you would like, so apologies for late reply.

I think the best advice here is for you to build the nav how you want it in FF then tell us what's happening or not going right in IE. I did paste the code and try to build the nav however it's hard to picture what it is you want and I think you're trying too hard to out think IE's foibles as I landed up deleting half your code as unnecessary :o

for example:

body {text-align: center;}
#nav_container {
width: 805px;
/* margin: 0 auto 12px; */
margin: 0 auto;
padding: 0;
background: #dad;
text-align: left;
}

/* required to adjust margins for ie */
/*
* html body #nav_container {
width: 805px;
margin: 0 auto;
padding: 0;
}
*/

you should not have to put in a seperate rule to "adjust" margins for IE.. if the bottom margin is different then there is a reason (and I'd guess it's due to collapsing margins) and there will be another way to fix it without resorting to a whole seperate rule.

Also I'm guessing you don't need all that negative positioning stuff on the li's which is overcoming the positive margin you've set on the ul for IE. Note that when you position something using relative positioning the space that was originally reserved for the element, in the normal flow, remains intact which is likely why the right side is still extending? i.e. the ul is still reserving space.

Have a go at building the nav in FF and if there's still any IE things you're not happy with post your new CSS and HTML sample

Thanks
Suzy