472,972 Members | 2,400 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,972 software developers and data experts.

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 2506
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

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

Similar topics

by: Wiz | last post by:
Greetings the group! I see from a few previous postings that I am not the only person having a problem with hidden list item bullets. This question applies to both IE 6, current version, and...
by: Uwe Brauer | last post by:
Hello In the w3c website: http://www.w3.org/Style/Examples/011/firstcss There is an example of a first attempt of a css. Is it possible that Not only the form but also the content of...
by: Dave Brydon | last post by:
Access 2003 I have a combo box in my personnel table, which draws its data from a trade code table; the original field in the code table, is numeric, Long Integer, and formatted with 5 zero's . ...
by: Paul Mason | last post by:
Hi folks, I just need some advice about books/where to look about this subject. I've got a number of happily running .NET apps that are doing the business and have some good formatting, as...
by: Michael Weis | last post by:
Hello all, as a non-professional in these things, I searched for this topic but found no satisfying answer: I have to create a site with 3 frames. (Please no diskussion about the sense of...
by: David Housman | last post by:
Hello, I'm trying to implement a navigation bar with a ul in css. The code is a template, but i'm customizing. I can handle just text in each block, but i want the first block to have an image...
by: sevenalive | last post by:
Hi-- I am very new at this and trying to teach myself, and I have run into a roadblock that I can't figure out no matter how many times I Google it......my navbar is a vertical column of images,...
by: nicky77 | last post by:
Hi, i've been searching for a solution to this problem but haven't had any joy yet. I have a navbar which positions perfectly in Safari, FF and IE7 - but in IE6, it is pushed out to the right of the...
by: ayamopamo | last post by:
Hi- I am trying to center a web page. It seems like this should be very simple to do, but apparently it isn't my day. I have successfully centered the background by calling it in the css body tag:...
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
by: Aliciasmith | last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
by: NeoPa | last post by:
Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...
by: Teri B | last post by:
Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course. 0ne-to-many. One course many roles. Then I created a report based on the Course form and...
by: NeoPa | last post by:
Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
by: GKJR | last post by:
Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.