Forum Moderators: not2easy
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]
My change, from:
<li class="courses">
<a href="/jump-courses.asp"[B]/>[/B]
</li>
<li class="courses">
<a href="/jump-courses.asp">[B]</a>[/B]
</li>
Can anyone explain why Mozilla does not interperate the normal sharthand element notation?