470,581 Members | 2,580 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,581 developers. It's quick & easy.

Horizontal navbar formatting incorrectly in IE7 and Safari

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 sinaiem.org . 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
2 2402
7,435 Expert 4TB
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
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.

Similar topics

23 posts views Thread by Uwe Brauer | last post: by
2 posts views Thread by Paul Mason | last post: by
14 posts views Thread by Michael Weis | last post: by
5 posts views Thread by David Housman | last post: by
1 post views Thread by livre | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.