...

View Full Version : Tabs not displaying correctly in Firefox



arubalisa
12-06-2009, 06:47 AM
The code below is not displaying correctly in FF. The code looks great in IE but in Firefox you can see most of the bullets in the underlying layer.

HTML code used

<ul id="navigation">
<li><span><a href="index.htm">Home</a></span></li>
<li><a href="#"><span>Vet Services</span></a></li>
<li><a href="#"><span>Preventative Services</span></a></li>
<li><a href="#"><span>Boarding</span></a></li>
<li><a href="#"><span>Grooming</span></a></li>
<li><a href="#"><span>Staff</span></a></li>
<li><a href="#"><span>Pet Care</span></a></li>
<li><a href="#"><span>News</span></a></li>
<li><a href="#"><span>Location</span></a></li>
</ul>

CSS used


#navigation a
{
color: #fff;
font-weight: bold; font-size: .7em; font-family: Verdana, Arial, Helvetica;
background: #781351 url('../images/left-tab.gif') no-repeat left top;
text-decoration: none;
padding-left: 5px;
float: left;
}

#navigation a span
{
background: url('images/right-tab.gif') no-repeat right top;
padding-right: 5px;
float: left;
}

#navigation a:hover {
color: #000;
background: #ffa20c url('../images/left-tab-hover.gif') no-repeat left top;
padding-left: 5px;
float: left;
}

#navigation a:hover span
{
background: url('../images/right-tab-hover.gif') no-repeat right top;
padding-right: 5px;
float: left;
}

#navigation a, #navigation a span
{
display: block;
float: left;
}

/* Hide from IE5-Mac \*/
#navigation a, #navigation a span
{
float: none
}
/* End hide */

#navigation ul
{
list-style: none;
padding: 0;
margin: 0;
float: left;
}

#navigation li
{
float: left;
margin: 0;
}


Also is float: left; required if it is appearing correctly in IE without it, and definitely not appearing correctly in FF anyway?

Thank you in advance for any advice or suggestions.

vineet
12-06-2009, 07:14 AM
replace this



#navigation li
{
float: left;
margin: 0;
list-style:none;
}


vineet

SB65
12-06-2009, 10:36 AM
I think your css isn't quite right:


#navigation ul
{
list-style: none;
padding: 0;
margin: 0;
float: left;
}


should be


ul#navigation
{
list-style: none;
padding: 0;
margin: 0;
float: left;
}

drhowarddrfine
12-06-2009, 02:59 PM
The code below is not displaying correctly in FF. The code looks great in IE

How it looks in IE means little since IE is the worst browser on the planet. You should be using FF, or any other modern browser, to test your markup in before looking to see how IE screws things up, which is why you are having problems and will continue to do so.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum