473,397 Members | 1,950 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,397 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.

Thanks.

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;
  12.  
  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.                 }    
  38.  
Aug 14 '07 #1
2 2525
drhowarddrfine
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

2
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...
23
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...
4
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 . ...
2
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...
14
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...
5
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...
3
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,...
3
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...
8
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:...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

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.