Re: Tab Button Hiding under another element? Help! :)

[joshuanhibbert]

Okay, currently you have this class:

ul.list1 a {

list-style-type: none;

background-image: url(GreyDivider.png);

background-repeat: no-repeat;

background-position: right;

padding-right: 42px;

padding-left: 42px;

display: block;

line-height: 45px;

text-decoration: none;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 21px;

color:

black;

}

Which is overriding this class:

a.button {

display: block;

width: 135px;

height: 43px;

background: url(button.png) top;

position: absolute;

background-repeat: repeat;

z-index: 1;

}

Due to specificity (a CSS term that you definitely should Google and wrap your head around).

Most of the properties in the two classes are different, so it’s not too much of an issue. But, background-repeat: repeat; is being overridden by background-repeat: no-repeat;

The easiest way to fix this would be to remove the ul from the ul.list1 a selector (once you understand specificity, that will make sense). You will then also need to remove background: url(button.png) top; as that image links to nothing.