Buttons Not Displaying Correctly in Safari

[spyder84]

Safari is not displaying my buttons correctly. When using IE or FF buttons display horizontally, but Safari displays them vertically. I've validated my CSS but cannot figure it out. Any ideas how I can get Safari to display the buttons horizontally? My code is below.

HTML CODE

<div class="button-space">
<ul id="nav">
<li><a href="index.php" class="navhome">Homepage</a></li>
<li><a href="our_team.php" class="navteam">Our Team</a></li>
<li><a href="schedule.php" class="navschedule">Schedule</a></li>
<li><a href="stats.php" class="navstats">Stats</a></li>
<li><a href="gallery.php" class="navgallery">Gallery</a></li>
<li><a href="sponsors.php" class="navsponsors">Sponsors</a></li>
<li><a href="contact.php" class="navcontact">Contact Us</a></li>
</ul>
</div>


CSS CODE

.button-space {
height:30px;
width:100%;
background : #00008b;
padding-left:3px;
padding-top:2px;
display:block;
}
#nav {
height : 27px;
float : left;
margin : 0px;
padding:0px;
font-size : 1px;
text-indent : -9999px;
display : block;
list-style:none;
}
#nav li {
list-style : none;
float : left;
padding-left: 0;
width : 127px;
height : 27px;
line-height : 27px;
position : relative;
display : block;
color : #ffffff;
}
#nav a {
width : 127px;
height : 27px;
position : absolute;
left : 0;
top : 0;
background-position : left top;
}
#nav a:hover {
background-position : left center;
}
#nav a:active {
background-position : left bottom;
}
#nav .navhome {
background-image : url('../../images/buttons/btn_home.gif');
}
#nav .navsponsors {
background-image : url('../../images/buttons/btn_sponsors.gif');
}
#nav .navteam {
background-image : url('../../images/buttons/btn_team.gif');
}
#nav .navschedule {
background-image : url('../../images/buttons/btn_schedule.gif');
}
#nav .navstats {
background-image : url('../../images/buttons/btn_stats.gif');
}
#nav .navgallery {
background-image : url('../../images/buttons/btn_gallery.gif');
}
#nav .navcontact {
background-image : url('../../images/buttons/btn_contact.gif');
}

[WebJoel]

#nav li {
list-style : none;
float : left;
padding-left: 0;
width : 127px;
height : 27px;
line-height : 27px;
position : relative;
display : block;
color : #ffffff;
} Make this "inline;" and put "display:block;" on the "#nav li a {...} "
"block" forces a newline, thus, 'vertical' like typewriter 'carriage return'. When used on "li a" it will 'shrink wrap' the "li" to the "a", making the entire real-estate of the "li" the clickable part.
that should work#nav a {
width : 127px;
height : 27px;
position : absolute;
left : 0;
top : 0;
background-position : left top;
} is stated twice. left:0; top:0; and again in "background-position: left top;"

[spyder84]

Thanks for the response. My code now looks like this as you suggested, but no change. Buttons still display vertically :(

#nav {
height : 27px;
float : left;
margin : 0px;
padding:0px;
font-size : 1px;
text-indent : -9999px;
display : block;
list-style:none;
}
#nav li {
list-style : none;
float : left;
padding-left: 0;
width : 127px;
height : 27px;
line-height : 27px;
position : relative;
display : inline;
color : #ffffff;
}
#nav li a {
width : 127px;
height : 27px;
display: block;
position: absolute;
background-position : left top;
}
#nav li a:hover {
background-position : left center;
}
#nav li a:active {
background-position : left bottom;
}

[spyder84]

I changed my CSS to the following:
.button-space {
height:30px;
width:100%;
background : #00008b;
padding-left:3px;
padding-top:2px;
display:block;
}
#nav {
height : 27px;
float : left;
margin : 0px;
padding:0px;
font-size : 1px;
text-indent : -9999px;
list-style:none;
}
#nav li {
list-style : none;
float : left;
padding-left: 0;
width : 127px;
height : 27px;
line-height : 27px;
position : relative;
color : #ffffff;
}
#nav a {
width : 127px;
height : 27px;
position : absolute;
left : 0;
top : 0;
}

I removed all "display:" attributes and their values. The buttons display correctly in IE6, IE7, and FF. Safari still displays them vertically.

Has anyone seen this issue before?

[WebJoel]

....I removed all "display:" attributes and their values. The buttons display correctly in IE6, IE7, and FF. Safari still displays them vertically.

Has anyone seen this issue before?

Try removing this:
#nav li {
list-style : none;
float : left;
padding-left: 0;
width : 127px;
height : 27px;
line-height : 27px;
position : relative;
color : #ffffff;
} There shouldn't be any reason that you'd want these 'relative'. "Relative", -to what? It may do nothing, but you shouldn't need this to make this work.
If this doens't help I may be forced to copy your code to desktop & use Safari-for-XP :)

Also, -where is "display:inline;" for "#nav li {....}"? That was the whole point of getting rid of "display:block;". "Getting rid of the display values" might work if the HEIGHT constrains the flow of the LI's and the width of the UL permits it, but "display:inline;' is what makes items 'line-up horizontally, -in-a-line'.

Also:
#nav a {
width : 127px;
height : 27px;
position : absolute;
left : 0;
top : 0;
} just curious: -why? "Absolute" lifts these from the document flow and it serves no purpose really, except,to remove these from the document flow..

[WebJoel]

Try this:

#nav {font-size:16px; list-style:none; padding-bottom:1px; border-bottom:1px solid #00008b;}
#nav li {list-style:none; float:left; width:127px; text-align:center; border:1px solid #00008b;}
#nav a {width:127px; height:27px; padding:7px 0 5px 0; display:block; color:#fff; background-color:#00008b; text-decoration:none;}
#nav a:hover {color:blue; height:25px; background-color:white; border: 0 none; border:1px solid #00008b; text-decoration:underline;}

<ul id="nav">
<li><a title="Homepage" href="index.php" class="navhome">Homepage</a></li>
<li><a title="Our Team" href="our_team.php" class="navteam">Our Team</a></li>
<li><a title="Schedule" href="schedule.php" class="navschedule">Schedule</a></li>
<li><a title="Stats" href="stats.php" class="navstats">Stats</a></li>
<li><a title="Gallery" href="gallery.php" class="navgallery">Gallery</a></li>
<li><a title="Sponsors" href="sponsors.php" class="navsponsors">Sponsors</a></li>
<li><a title="Contact Us" href="contact.php" class="navcontact">Contact Us</a></li>
</ul> Validates, shorter, works IE7, Firefox and Safari...

[spyder84]

As you can see, I'm still somewhat new to all this, but I understand the basic logic. I believe the code below is explicit as to display the buttons in a line...yet safari does not. :mad:


.button-space {
height:30px;
width:100%;
background : #00008b;
padding-left:3px;
padding-top:2px;
display:block;
}
#nav {
height : 27px;
float : left;
margin : 0px;
padding:0px;
font-size : 1px;
text-indent : -9999px;
list-style:none;
display:block;
}
#nav li {
list-style : none;
float : left;
padding: 0;
margin:0;
width : 127px;
height : 27px;
line-height : 27px;
color : #ffffff;
display:inline;
}
#nav a {
display:block;
float:left;
width : 127px;
height : 27px;
}

[WebJoel]

Did you try the code that I posted last night? I tested this with IE7, Firefox and Safari-on-XP, and it works.
Are you using a valid !doctype? Maybe there is something with Safari that requires a valid !dcotype in order to function this.

[spyder84]

Did you try the code that I posted last night? I tested this with IE7, Firefox and Safari-on-XP, and it works.
Are you using a valid !doctype? Maybe there is something with Safari that requires a valid !dcotype in order to function this.


This is the !doctype I'm using:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

[WebJoel]

Here is a screenshot of how your page is showing in two versions of SAFARI: the navigation bar looks fine. But the content sort-of drops-down doesn't it?

[spyder84]

Yep. That's what I see.

[WebJoel]

Yep. That's what I see. Is that 'the problem' then? Doesn't really make this:
Safari is not displaying my buttons correctly. When using IE or FF buttons display horizontally, but Safari displays them vertically.... make much sense then.. :confused::confused:

Are we even talking about the same thing at this point? :o 'The buttons' seem to be okay...

[spyder84]

The problem is not getting them to appear on the screen. The problem is they aren't displaying horizontally.

[WebJoel]

The problem is not getting them to appear on the screen. The problem is they aren't displaying horizontally. Forgive my denseness... What is "they", -the Navigation links, or the blocks of content that seem to be 'dropping down'. And I hope you do not become flustered at my honest failure to understand your problem here but you don't seem to be saying what the 'problem' is other than "..they are not horizontal"... They, -being what? :confused:
*I* see that the navigation links ARE "horizontally displayed"... that is what I took the problem to be.

If you mean the 'blocks of content', this is called either "line drop" or 'float drop' (assuming that they are floated elements, -this is what they visually appear to be doing but it may just be paddings & margins are being rendered differently X-browser)..

[spyder84]

I apologize, the confusion is probably my fault. The buttons themselves should be displayed in a horizontal line (1 row accross the top) like the attached screenshot. I don't understand what 'float drop' is but if Safari is rendering the margins differently, I guess I'd like to know what I can do to make it render the content like IE and FF.

[WebJoel]

Can you post a screenshot of what the buttons look like in your SAFARI browser? I checked with my SAFARI-on-XP and I am not seeing the same thing.

In your CSS, have you (or, just add this either way) this line for your very FIRST line of CSS:

* {margin:0; padding:0; border:0;}
html, body {margin:0; padding:0; border:0;}
I added "border:0;" in case Safari is adding a default border or something. The universal selector will take care of IE's particular problems, and the html,body {} will be read by all *other* browsers, -including Safari.

Failing that, I would begin systematically ADDING various selectors ("form", "ul", etc) to that second rule's declarations... to see if *something* ("UL", etc.) maybe receives a default 'padding' or default 'margin' from Safari...

I'm going to Google 'problems with Safari rendering' and see if anything comes up...

[WebJoel]

You know... IE6 has/had a problem similar to what you're describing that sometimes did not respond to "float:left;" and "display:inline;" used on "li"s...

adding line-height:0 to "li" elements solved it... I think it was a 'hasLayout' issue with IE6... maybe Safari has this (or similar)???

[spyder84]

I tried both of your suggestions above but no luck. I'm using Safair On XP to test also. See attachment.

[WebJoel]

Very interesting....

-I'll snag your code from the URL that you PM'd to me and do a full-site analysis on this... the code I've been providing, **should work**, -leading me to wonder if it's not *something else* causing the links to drop like that... I am N:confused:T seeing that on my Safari-on-XP when I run just the menu...

[spyder84]

Very interesting....

-I'll snag your code from the URL that you PM'd to me and do a full-site analysis on this... the code I've been providing, **should work**, -leading me to wonder if it's not *something else* causing the links to drop like that... I am N:confused:T seeing that on my Safari-on-XP when I run just the menu...

I very much appreciate your help :)

[WebJoel]

See the SAFARI screenshot:

-I tell ya... it's enough to make ya wanna cry!

ALL this thing needed... is this:

#nav {....width:100%;....}

and suddenly, the navigation flows horizontally in Safari! :p

[spyder84]

OMG! :eek: Why is it that it's always the simplest things? I can't believe I haven't slept in 3 day becuase of "width:100%;" LOL

WebJoel...I appreciate all the help. You rock!

[WebJoel]

...You rock! Totally!