Forum Moderators: not2easy

Message Too Old, No Replies

Navbar background overflow errors in Mozilla browsers

         

SpringVark

9:50 am on Aug 22, 2009 (gmt 0)

10+ Year Member



Hi

Go to <snip>. It is frustrating. Try it in IE7 (works as desired). Then Firefox/Chrome (bleh).

The Mozilla flavours repeat the background images on the y-axis for some (but not all) of the navbar buttons, over the navbar's bottom edge & into the div below. The navbar is a simple unordered list. All navbar buttons are 18px high, and their containing elements (li's) are set to 19px. (leaving the navbar background exposed on the last line).

The navbar layout goes #navigation > ul > li > a. The background button images are contained by the li's. If I set the #navigation's overflow to hidden, the repeated backgrounds clear, but so do the drop-down menus for the a:hover psedo classes. Code snippet:


#navigation {
width: 100%;
height: 19px;
}
#navigation ul {
list-style-type: none;
margin: 0px;
padding: 0px;
border: 0px;
}
#navigation ul li {
float:left;
position:relative;
height: 19px;
}
#navigation li a {
text-decoration: none;
display: block;
height: 19px;
}
#navigation ul li.home {
width: 82px;
}
#navigation ul li.home > a {
background: url(../img/new_home.gif) no-repeat;
}
#navigation ul li.home > a:hover {
background-image: url(../img/new_home_hover.gif);
}

or go to <snip> for the full navbar stylesheet, & view source on the main page for the content.

Any suggestions on how to get rid of the repeating backgrounds?

ANY help = MUCH appreciated.

[edited by: swa66 at 8:16 pm (utc) on Aug. 22, 2009]
[edit reason] No link, please see ToS and Forum charter [/edit]

SpringVark

12:49 pm on Aug 22, 2009 (gmt 0)

10+ Year Member



SOLVED.
You'll have noticed from my previous posts that I was closing my anchor tags with shorthand notation. I'm not sure if this is strictly XML (I always assumed it still was), but the Mozilla browsers did not take well to the shorthand syntax.

My change, from:


<li class="courses">
<a href="/jump-courses.asp"[B]/>[/B]
</li>

to:

<li class="courses">
<a href="/jump-courses.asp">[B]</a>[/B]
</li>

did the trick - no more repeated backgrounds.

Can anyone explain why Mozilla does not interperate the normal sharthand element notation?