Jump to content

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


max.digito
 Share

Recommended Posts

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

Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Edited by chibineku
Link to comment
Share on other sites

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;}

Edited by dsonesuk
Link to comment
Share on other sites

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;}
Link to comment
Share on other sites

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;}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...