CSS Spacing Issues With Safari?

I have made a list based navigation bar for my newest project and I have added two information bars on each side of the navigation. It is coming out as desired in Firefox and IE bu

Solution 1:

You seem to have made some adjustments already, based on the state of that site you linked to, but it's still not working properly across different browsers.

I think your best bet is to set that phonebg.gif image as a background on the entire #menubar div, instead of on the left and right parts of it, and then add a white background on the #nav.

That way you won't have to set a width on that right div at all (or at least not a width that needs to be so precise as to make sure the 3 parts exacty match up to the full width).

Solution 2:

I haven't got Safari so I cannot test, (although I'm using Chrome), but the problem is probably coming from the

#phonebar {
    padding: 0px 6px 9px 6px;
    width:15%;
} 

#asseenbar{
    padding: 0px 9px 9px 6px;
    width:19.7em;
} 

#nav li { 
    margin: 3px 3px 0px 0px;
    border:3px double;
}

#nav a {
    padding: 5px 15px 5px 15px;
}

Try to use consistent units (ie try all pixels, and when you get it right you can mess around with % if you are feeling brave) and make sure that the sum of the widths of your columns - does not exceed the width of the container div #menubar.

In addition you should specify a DOCTYPE or yo uwill get problems between different browsers. If you do not declare a specific docType correctly a visitors browser must "guess" (usually by applying the loosest possible docType or a "quirks" mode docType of its own) resulting in slower rendering.

If you do not specify a DOCTYPE you may have alot of trouble.

Solution 3:

Try adding a div around the list.