Ie 5.5, Ie 6, Ie 7 Css Layout Problems.

[max.digito]

Hi, I have recently created a website using CSS. It works fine in firefox, safari, IE 8 and most others but does strange things in IE 5.5, IE 6, IE 7.The website is www.spokenspool.com.Can somebody help me out here because i know a lot of people still use these versions of IE. thanks!

[chibineku]

I have opened it in AOL which is MSIE 7 and I can't see anything wrong with it...what specifically does it do?

[max.digito]

Hi, try navigating to one of the pages. for eg. www.spokenspool.com/about.html. On all the pages except the front page the menu doesn't seem to appear and its positioning is all messed up. the position of the menu should be higher to align with the centre of the logo. check it out. thanks.

I have opened it in AOL which is MSIE 7 and I can't see anything wrong with it...what specifically does it do?

[chibineku]

Oh yeah...the navlist is pushed down past the image and isn't displaying for some reason...

[chibineku]

give the navlistwidth: 70%margin-top:-138pxand give #menu height: 0 and a little margin-bottom to push the main content down a little, create some whitespaceThat makes it display in IE7 at least...but you'll need to include those statements via some sort of browser sniffing or way of hiding the code from new browsers

[dsonesuk]

you want to contain the logo and menu in a header div, and the assign the bottom border to the header, also i wouldn't use position: relative., left 50%, margin-left to center the page, use margin: 0 auto instead.see below:<div id="header"><div id="logo"><a href="index.html"><img height="138" border="0" width="140" alt="Spoke + Spool" src="images/weblogo_small.png"/></a></div><div id="menu"><ul id="navlist"> <li><a href="about.html"> ABOUT</a></li> <li><a href="news.html"> NEWS</a></li> <li><a href="stockists.html"> STOCKISTS</a></li> <li><a href="lookbook.html"> LOOKBOOK</a></li> <li><a href="contact.html"> CONTACT</a></li> <li><a href="press.html"> PRESS</a></li> <li><a href="friends.html"> FRIENDS</a></li></ul></div></div>#header {border-bottom: 3px solid #000; width: 100%; float: left;}#about_container {background-color:#FFFFFF;height:700px;margin:0 auto;position:relative;width:800px;}#logo {float:left;margin-left:50px;margin-top:10px;width:140px;}#menu {background-color:#FFFFFF;float:left;font-family:"Gill Sans",Geneva,Arial,Helvetica,sans-serif;font-size:14px;font-weight:100;height:145px;padding-left:10px;padding-top:15px;}ul#navlist {background-color:#FFFFFF;float:left;padding-left:10px;padding-top:40px;white-space:nowrap;}#content {background-color:#FFFFFF;color:#000000;float:left;font-family:Verdana,"Gill Sans",Geneva,Arial,Helvetica,sans-serif;font-weight:lighter;height:auto;letter-spacing:1px;margin-left:70px;padding-left:30px;padding-right:20px;padding-top:10px;width:610px;}

[max.digito]

Hi dsonesuk,I tried adding the changes you suggested to the about.html. The menu is now visible but is in the wrong position. it should be to the right of the logo instead of underneath. check it out in firefox to see what i want it to look like. Thanks for your help. Max.

you want to contain the logo and menu in a header div, and the assign the bottom border to the header, also i wouldn't use position: relative., left 50%, margin-left to center the page, use margin: 0 auto instead.see below:<div id="header"><div id="logo"><a href="index.html"><img height="138" border="0" width="140" alt="Spoke + Spool" src="images/weblogo_small.png"/></a></div><div id="menu"><ul id="navlist"> <li><a href="about.html"> ABOUT</a></li> <li><a href="news.html"> NEWS</a></li> <li><a href="stockists.html"> STOCKISTS</a></li> <li><a href="lookbook.html"> LOOKBOOK</a></li> <li><a href="contact.html"> CONTACT</a></li> <li><a href="press.html"> PRESS</a></li> <li><a href="friends.html"> FRIENDS</a></li></ul></div></div>#header {border-bottom: 3px solid #000; width: 100%; float: left;}#about_container {background-color:#FFFFFF;height:700px;margin:0 auto;position:relative;width:800px;}#logo {float:left;margin-left:50px;margin-top:10px;width:140px;}#menu {background-color:#FFFFFF;float:left;font-family:"Gill Sans",Geneva,Arial,Helvetica,sans-serif;font-size:14px;font-weight:100;height:145px;padding-left:10px;padding-top:15px;}ul#navlist {background-color:#FFFFFF;float:left;padding-left:10px;padding-top:40px;white-space:nowrap;}#content {background-color:#FFFFFF;color:#000000;float:left;font-family:Verdana,"Gill Sans",Geneva,Arial,Helvetica,sans-serif;font-weight:lighter;height:auto;letter-spacing:1px;margin-left:70px;padding-left:30px;padding-right:20px;padding-top:10px;width:610px;}

[dsonesuk]

OK! i don't have access for testing in IE at moment, but try below without padding-left:10px; or reduce this padding width; if no go! try without padding-left:10px; and float:left; (but i think it will give the same result without float in IE).#menu {background-color:#FFFFFF;float:left;font-family:"Gill Sans",Geneva,Arial,Helvetica,sans-serif;font-size:14px;font-weight:100;height:145px;padding-left:10px;padding-top:15px;}