catfish Posted January 4, 2011 Report Share Posted January 4, 2011 For a while there I was checking my websites at browsershots.org then I sort of forgot about it. Now working on a new site I was informed that the menu is wonky. Here is a screenshot with IE 7 on XP. I did test it on IE 8, safari and opera. The problem is when something like this happens I really have no idea how to fix it other than to use a different menu. Code below. <style type="text/css"> #info {padding-bottom:150px;} .images {background:#c00; width:20px; height:20px; padding:1px;} #nav {margin-top:50px;} #nav ul {margin:0 auto 100px auto; padding:0; list-style:none; display:table; white-space:nowrap; font-family: arial, verdana, sans-serif; font-size:11px;} #nav li {display:table-cell; margin:0; padding:0;} #nav a {float:left; color:#fff; background: #040 url(left2.gif) no-repeat left bottom; margin:0 2px 0 0; padding:0 0 0 2px; text-decoration:none; letter-spacing:1px;} #nav a b {float:left; display:block; background:transparent url(right2.gif) no-repeat right bottom; padding:5px 16px 5px 12px;} #nav a:hover {background-color:#6f9c6f; cursor:pointer;} #nav #current a {background-color:#6f9c6f;} #nav {padding:1px 0 0 0; background:#fff; border-top:8px solid #040;} </style> <!--[if IE]> <style type="text/css"> #nav ul {display:inline-block;} #nav ul {display:inline;} #nav ul li {float:left;} #nav {text-align:center;} </style> <![endif]--> html code <div id="info"> <div id="nav"> <ul> <li id="current"><a href="centered_float_left.html?current=one"><b>HOME PAGE</b></a></li> <li><a href="centered_float_left.html?current=two"><b>FOOD 1</b></a></li> <li><a href="centered_float_left.html?current=three"><b>FOOD 2</b></a></li> <li><a href="centered_float_left.html?current=four"><b>SHIPPING/CONTACT</b></a></li> <li><a href="centered_float_left.html?current=five"><b>ABOUT US</b></a></li> <li><a href="centered_float_left.html?current=six"><b>FAQ'S</b></a></li> <li><a href="centered_float_left.html?current=seven"><b>CUSTOMER CORNER</b></a></li> <li><a href="centered_float_left.html?current=eight"><b>LINKS</b></a></li> </ul> </div> </div> And the website is... http://www.avianorganics.com/Newdesign/index.html?current=one Thanks, I appreciate any input Quote Link to comment Share on other sites More sharing options...
falkencreative Posted January 4, 2011 Report Share Posted January 4, 2011 I'm not sure why you are using "table-cell": #nav li {display:table-cell; margin:0; padding:0;} I would suggest removing "display:table-cell;" and using "float:left;" instead (and removing "display:table;" from the <ul> as well.) You could then drop this line from your IE conditional comment: #nav ul li {float:left;} (which, by the way, says "float:none" in your actual site). If you use "float:left" you can basically remove the IE conditional comment entirely. There really is no need for a conditional comment on something simple like this. Quote Link to comment Share on other sites More sharing options...
Wickham Posted January 4, 2011 Report Share Posted January 4, 2011 (edited) I don't normally code menus with display: table for the ul tag and display: table-cell for the li tag but if it works, leave the general styles and edit only the conditional comment for IE. The float: left; for the li tag is correct, so I suggest editing the ul tag (there are two conflicting styles at present):- <!--[if IE]> <style type="text/css"> #nav ul {display: block; /*display:inline-block;*/} /*#nav ul {display:inline;}*/ #nav ul li {float:left;} #nav {text-align:center;} </style> <![endif]--> Edit: my post is the same time as Ben's and we basically say the same thing, but he suggests editing the general styles instead. Edited January 4, 2011 by Wickham Quote Link to comment Share on other sites More sharing options...
catfish Posted January 4, 2011 Author Report Share Posted January 4, 2011 I don't normally code menus with display: table for the ul tag and display: table-cell for the li tag but if it works, leave the general styles and edit only the conditional comment for IE. The float: left; for the li tag is correct, so I suggest editing the ul tag (there are two conflicting styles at present):- <!--[if IE]> <style type="text/css"> #nav ul {display: block; /*display:inline-block;*/} /*#nav ul {display:inline;}*/ #nav ul li {float:left;} #nav {text-align:center;} </style> <![endif]--> Thankyou both for the quick replies. I liked the look of the menu. It is Stu Nicholls CSSPlay and so I just copied that code. I read your replies again and do some changes. I'll let you know how I make out if you don't mind. Thankyou again. Edit: my post is the same time as Ben's and we basically say the same thing, but he suggests editing the general styles instead. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.