Bug in IE6...

[cusimar9]

Theres a bug in some of my pages where if I hover over a button some of the content is covered by the background.

I've posted it before Here (http://www.webdeveloper.com/forum/showthread.php?t=129504) and was given some conditional code to put in which fixed it.

However now I have the conditional code and it seems to still be doing it. Any suggestions?

http://www.sufcjuniorblades.com/players.asp?item=3

[Annaccond]

Could you say address of this page? If you mean http://www.sufcjuniorblades.com/admin_login.asp than I don't see to anything was hidden there after Login button hover :|

[cusimar9]

Sorry I missed that!

Posted link above ;)

[Annaccond]

Add z-index in those 2 places of your CSS:


IMG.pictureright {
BORDER-RIGHT: #888 1px solid; BORDER-TOP: #888 1px solid;
FLOAT: right; MARGIN: 0px 0px 10px 10px; BORDER-LEFT: #888 1px solid;
BORDER-BOTTOM: #888 1px solid; position: relative; z-index: 2
}



A.linkbutton:hover {
BORDER-RIGHT: #8b5025 1px solid; BORDER-TOP: #8b5025 1px
solid; BACKGROUND: url(images/bg_nav_sel.gif) #8c0400 repeat-x 50%
bottom; BORDER-LEFT: #8b5025 1px solid; COLOR: #fff; BORDER-BOTTOM:
#8b5025 1px solid; TEXT-DECORATION: none; position: relative; z-index: 1
}

:)

[cusimar9]

Thanks, that would work

But the colour of the text in the button is wrong on that page too, should be white...

I don't want to have to put inline css on all the faulty pages...

[Annaccond]

Color of text button was/is black. You have to add correct color to CSS.

[cusimar9]

a.linkbutton {
margin: 0px 2px 0px 2px; padding: 4px 10px 4px 10px;
text-decoration: none;
text-align: center;
background: #d10904 url(images/bg_nav.gif) repeat-x center;
color: #fff;
border: 1px solid #808080;
font: 11px Tahoma, Arial, Helvetica, sans-serif;
font-weight:bold;
}
a.linkbutton:hover {
text-decoration: none;
background: #8c0400 url(images/bg_nav_sel.gif) repeat-x bottom;
border :1px solid #8b5025;
color: #FFF;
}

[Annaccond]

CSS not work this way. Style is inherit from previous elements. In your CSS is mess and many values is definied improper way. Start from here: http://jigsaw.w3.org/css-validator/ and fix all cautions.

Add this:

#mainFrame A { color: #ffffff }

[cusimar9]

Why is the CSS a mess? There's no cautions from the w3 website about the css on that page:

http://jigsaw.w3.org/css-validator/validator?uri=http://www.sufcjuniorblades.com/players.asp?item=3

The relevant CSS is this:


a:link, a:visited {
color: #630301;
}

a:hover, a:active {
color: #cd0904;
}

a.linkbutton {
color: #fff;
}
a.linkbutton:hover {
color: #fff;
}


Now in IE6 the linkbuttons are taking the color from the original anchor CSS, rather than from the linkbutton definition. Why is this? Surely the linkbutton definition should override the original anchor definition? It does in Firefox and IE7...

I can't add the line you've just recommended as that would make ALL my links invisible, which is obviously not a good idea...

[cusimar9]

I've figured it out now, I just had to declare the :link and :visited definitions as I did in my original anchor tags. I'll make the changes you mentioned regarding the z-index and then we should be onto a winner :)

[Annaccond]

#mainFrame A was my 1st idea but I didn't really checked clearly whole to find real error, great you made it :)

And as for mess I said it because I've noticed in CSS from site multiple declarations for the same elements putted in various order etc, like here:

#menu_selected A:hover {
BORDER-RIGHT: #8b5025 1px solid; BORDER-TOP: #8b5025 1px solid; FONT-WEIGHT: bold;
BACKGROUND: url(images/bg_nav_sel.gif) #8c0400 repeat-x 50% bottom;
BORDER-LEFT: #8b5025 1px solid; COLOR: #fff; BORDER-BOTTOM: #8b5025 1px solid
}

[cusimar9]

Where are you looking to get that code? Because that's not whats in my stylesheet:


#menu_selected a:hover, #menu_selected a:link, #menu_selected a:visited
{
font-weight: bold;
background: #8c0400 url(images/bg_nav_sel.gif) repeat-x bottom;
border :1px solid #8b5025;
color: #FFF;
}