Jump to content
Stef's Coding Community
Sign in to follow this  
catfish

navigation menus / different browsers

Recommended Posts

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.

dea7a3b808a94c92c9173a4e706638eb.png

 

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 :unsure:

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by Wickham

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...