tags:

views:

1061

answers:

3
+1  Q: 

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 but oddly enough Safari is acting up. It is making a large space between the navigation bar and the right side information bar.

CSS

body{
    background-color:#4c7094;
    background-image: url(images/bg.gif);
    background-repeat:repeat-x;
    font-size:.9em;
    color:#FFF;
    margin-top:0px;
    font-family: Tahoma, Geneva, sans-serif;
}

#nav {
    float:left;
    padding: 0px 0px 0px 3px;
    margin: 0px 0px 0px 0px;
    list-style:none;
     border:0px solid #000;
}

#nav li { 
    float:left;
    margin: 3px 3px 0px 0px;
    font-family:Tahoma, Geneva, sans-serif;
    background-color:#e7ebf0;
    border:3px double;
    display: inline;
    border-color:#99aabb;
}

#nav a {
    float:left;
    display: block;
    color:#1d4c7b;
    padding: 5px 15px 5px 15px;
    font-size: .8em;
    vertical-align:middle;
    text-decoration:none;
    font-family: Georgia, "Times New Roman", Times, serif;
}

#nav a:hover {
    float:left;
    display: block;
    color:#FFF;
    padding: 5px 15px 5px 15px;
    font-size: .8em;
    background-color:#5b7290;
    vertical-align:middle;
    text-decoration:none;
    font-family: Georgia, "Times New Roman", Times, serif;
}

#phonebar{
    padding: 0px 6px 9px 6px;
    background-image: url(images/phonebg.gif);
    background-repeat: repeat-x;
    background-color:#335b83;
    color:#FFF;
    float:left;
    border:0px solid #000;
    width:15%;
    text-align:center;
}

#asseenbar{
    padding: 0px 9px 9px 6px;
    margin-right: 0px;
    background-image: url(images/phonebg.gif);
    background-repeat: repeat-x;
    background-color:#335b83;
    color:#FFF;
    float:right;
    display:inline;
    border:0px solid #000;
    width:19.7em;
    text-align:center;
}

h2 {
    font-size:1.5em;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    display: inline;
    font-family:Georgia, "Times New Roman", Times, serif;
}

#phone {
    font-size:1em;
    margin: 0px 0px 0px 0px;
    padding: 8px 0px 0px 0px;
    font-family:"Times New Roman", Times, serif;
}

#asseen {
    font-size:.8em;
    margin: 0px 0px 0px 0px;
    padding: 9px 0px 0px 5px;
    text-align:left;
    font-family:"Times New Roman", Times, serif;
}

#menubar{
    clear:left;
    margin-bottom:0px;
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    background-color:#FFF;
    height:40px;
}

#content{
    margin-right:auto;
    margin-left:auto;
    background-color:#FFF;
    width:975px;
    height:890px;
    padding: 20px 5px 5px 20px;
    border:0px solid;
    border-color:#4c7094;
    color:#333;
}

HTML:

<body>
 <center> <img src="images/banner.jpg" width="1000" height="72" /></center>
<div id="menubar">
<div id="phonebar">
<p id="phone">888-325-1924</p>
</div>
  <ul id="nav">
<li><a href="#">HOME</a></li>
<li><a href="#">WHAT WE BUY</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">LOCATIONS</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
<div id="asseenbar">
<p id="asseen">As seen on CNN and NBC</p>
</div>
</div>
<div id="content">Welcome to Georgia Buying Group</div>
</body>

I have been fighting with this for hours and being new to CSS I am hoping that someone out there can give me a hand! Any advice is appreciated! Thanks :)

  • Chris

EDIT: My doctype is transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

sorry

EDIT -----------

I changed all the units to pixels, but the issue is still being presented. Now it looks fine on safari on my macbook but not on safari on my pc, or in firefox for that matter. it is just expanding so much that it is pushed down one line.

Here is my CSS:

body{
    background-color:#4c7094;
    background-image: url(images/bg.gif);
    background-repeat:repeat-x;
    font-size:.9em;
    color:#FFF;
    margin-top:0px;
    font-family: Tahoma, Geneva, sans-serif;
}

#nav {
    float:left;
    padding: 0px 0px 0px 3px;
    margin: 0px 0px 0px 0px;
    list-style:none;
    border:0px solid #000;
}

#nav li { 
    float:left;
    margin: 3px 3px 0px 0px;
    font-family:Tahoma, Geneva, sans-serif;
    background-color:#e7ebf0;
    border:3px double;
    display: inline;
    border-color:#99aabb;
}

#nav a {
    float:left;
    display: block;
    color:#1d4c7b;
    padding: 5px 15px 5px 15px;
    font-size: .8em;
    vertical-align:middle;
    text-decoration:none;
    font-family: Georgia, "Times New Roman", Times, serif;
}

#nav a:hover {
    float:left;
    display: block;
    color:#FFF;
    padding: 5px 15px 5px 15px;
    font-size: .8em;
    background-color:#5b7290;
    vertical-align:middle;
    text-decoration:none;
    font-family: Georgia, "Times New Roman", Times, serif;
}



h2 {
    font-size:1.5em;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    display: inline;
    font-family:Georgia, "Times New Roman", Times, serif;
}


#phonebar{
    padding: 0px 6px 9px 6px;
    background-image: url(images/phonebg.gif);
    background-repeat: repeat-x;
    background-color:#335b83;
    color:#FFF;
    float:left;
    border:0px solid #000;
    width:120px;
    text-align:center;
}

#asseenbar{
    padding: 0px 9px 9px 6px;
    margin-right: 0px;
    background-image: url(images/phonebg.gif);
    background-repeat: repeat-x;
    background-color:#335b83;
    color:#FFF;
    float:right;
    display:inline;
    border:0px solid #000;
    width:326px;
    text-align:center;
}

#phone {
    font-size:1em;
    margin: 0px 0px 0px 0px;
    padding: 8px 0px 0px 0px;
    font-family:"Times New Roman", Times, serif;
}


#asseen {
    font-size:.8em;
    margin: 0px 0px 0px 0px;
    padding: 9px 0px 0px 5px;
    text-align:left;
    font-family:"Times New Roman", Times, serif;
}

#menubar{
    clear:left;
    margin-bottom:0px;
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    background-color:#FFF;
    height:40px;
}

#content{
    margin-right:auto;
    margin-left:auto;
    background-color:#FFF;
    width:975px;
    height:890px;
    padding: 20px 5px 5px 20px;
    border:0px solid;
    border-color:#4c7094;
    color:#333;
}

It can be found here;

http://www.christopherbier.com/gbg

Any help is appreciated!!!

+2  A: 

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.

DrG  2009-04-08 20:09:35
I do not want to set fixed widths, so that way it can be flexible. How would i gauge filling the 1000px nav bar with ems or % if i wanted it to be flexible? I am trying to maintain a 3px border around the nav. If i set too high of a % it wont work. www.christopherbier.com/gbg is the site. Thank you!
Chris B.  2009-04-08 20:27:54
It's not flexible, you have a fixed with of 1000px to work with!!
DrG  2009-04-08 20:30:36
If the user increases the text size i do not want to it overflow the buttons, infobars etc.
Chris B.  2009-04-08 20:33:29
Well in that case you should specify the width of the page using a % or em width. The px is absolute, and ems and % are relative. Use all ems and you will be ok.
DrG  2009-04-08 20:36:18
There is excessive white space on the right side of Contact Us on my macbook pro :( its very odd. I have specified a doctype I just have left it out for the example.
Chris B.  2009-04-08 20:36:28
A: 

Try adding a div around the list.

Jamie  2009-04-08 20:43:20
The UL acts like a DIV, that is why I have not used a div.
Chris B.  2009-04-08 20:54:50
+2  A: 

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).

mercator  2009-04-08 22:53:22
Good Idea, Thank you!
Chris B.  2009-04-08 23:03:11

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?