By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,045 Members | 2,120 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,045 IT Pros & Developers. It's quick & easy.

Horizontal navbar formatting incorrectly in IE7 and Safari

P: 3
I have a fluid horizontal navbar on my website which is formatted using floats and percentage widths to make it fluid. This looks great in WinXP Firefox, Opera, and even IE6. Safari and IE7 render it incorrectly. I've tried playing with the ul, li, a css but can't get this to look right in the latter 2 browsers. The site is . Any insight would be much appreciated.


Relevant css:
Expand|Select|Wrap|Line Numbers
  1. #navbar {    /* horizontal navbar on top inside container */
  2.     float: left;
  3.     background-color: transparent;
  4.     margin-left: 12%;
  5.     padding: 1.5em 0%;
  6.     }    
  7.     #navbar ul {
  8.         list-style: none;
  9.         height: 1.6em;
  10.         font-size: 0.8em;
  11.         border-left: 1px solid white;
  13.         }
  14.         #navbar ul li {
  15.             float: left;
  16.             display: inline;
  17.             width: 11%;
  18.             background: black url(images/blockdefault.gif) center center repeat-x;
  19.             height: 100%;
  20.             border-right: 1px solid white;
  21.             }
  22.             #navbar ul li a {
  23.                 display: block;
  24.                 text-decoration: none;
  25.                 height: 1.6em;
  26.                 text-align: center;
  27.                 width: 100%;
  28.                 }
  29.             #navbar ul li a:link, a:visited , a:hover, a:active{
  30.                 color: white;
  31.                 }
  32.             #navbar ul li a:hover {
  33.                 background: black url(images/blockactive.gif) center center repeat-x;
  34.                 }
  35.             #navbar ul li a[class="selected"] {        /* use of attribute selector to choose the one in the toolbar that is currently selected , unsupported in IE6*/
  36.                 background: black url(images/blockactive.gif) center center repeat-x;
  37.                 }    
Aug 14 '07 #1
Share this Question
Share on Google+
2 Replies

Expert 5K+
P: 7,435
Oh the hell of fluid pages.

Look into resetting your margins and padding all to zero and then setting them to exactly what you want. This keeps all browsers on the same page in that area since defaults can be different.

EDIT: Well, I see you've done that already. I'll try and look at it again later.
Aug 14 '07 #2

P: 3
Thanks for taking a look at this. I've spent a load of time on it but since it works as intended on Opera, FF, and IE6 it seems peculiar that IE7 and Safari would render it similarly incorrectly. Any other ideas?
Aug 16 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.