Links in a DIV

Can't get background to change in whole DIV in IE

[johnblack]

Hi,

I have a series of div blocks with a link in each one and when the user mouses over the div I want the background of the DIV to change.

This is what I have so far

HTML

<div class="block">
<a href="example.html">Link Text</a>
</div>

etc

CSS

.block a
{
display:block;
background-color:#52A221;
}

.block a:hover
{
background-color:#0085d7;
}

Now in FF 1.5 as soon as the mouse enters the div the background changes, yet in IE 6.0 the mouse has to reach the link text before the background will change.

I know I'm doing something simple wrong, I just don't know what it is!

All help greatly appreciated!

Cheers JB

[4css]

Actually it is doing just as it is supposed to do, change over the anchor link as specified.

I know with a list item that you can display:inline (even with display block) to get it to work within the whole link area such as you have right now, but not too sure how it would work in this case.

I would be curious to know what others have to say in regards to this.

[jamesn]

IE is extremely finicky about this behavior. I wanted to do the same thing a few days ago. I didn't use links inside divs, however - just links. I set them to display: block and set the width of the links in pixels so that they filled up the menu box. That worked some of the time, until I changed the CSS of some of the elements in other places. Then, I figured out that if you set the links to have a border, when the user moves the mouse over the border the :hover rules are set. This might not be too clear, so here's an example:

div.menu a {
border: 4px solid white;
color: black;
}

div.menu a:hover {
border: 4px solid black;
background-color: black;
color: white;
}

Good luck, IE is a piece of crap sometimes.

[edited by: jatar_k at 4:51 pm (utc) on July 26, 2006]
[edit reason]
[1][edit reason] no urls thanks [/edit] [/edit][/1]

[ram1]

If I remember rightly (no IE installed at home) the key is to give the parent element - in this case div.block - dimensions and set the anchor's display to block and 100% width.

If you don't mind dipping into a little JavaScript you may find a more flexible solution.

[edited by: jatar_k at 4:51 pm (utc) on July 26, 2006]
[edit reason]
[1][edit reason] no urls thanks [/edit] [/edit][/1]

[johnblack]

Thanks for all the replies!

4css

Are you saying that IE is functioning correctlt and that FF is wrong? Not disagreeing with you just wanted to make sure that IE interpretation is how links inside divs should work.

jamesn

Thanks for the code. I tried your snippet but couldn't get it to work, but then used the code from your site and that worked fine! Thanks a million!

ram1

Yeah, I was thinking I'd have to use some JS, but I seem to have found a way round with css. Thanks for your input.

Thanks again to all! Cheers JB

[Setek]

No, IE is not supporting the

display: block;

property value correctly.

IE, in cases such as this, has not triggered hasLayout, and is a well-known bug.

Usually, the easiest way to fix this is to set/define/force a width to the element (just for IE in a conditional comment is best)

SuzyUK made a brilliant post about this bug a while ago. [webmasterworld.com]

So, Firefox (which it usually does) is displaying it correctly. IE 6 (which it usually does) is not displaying it correctly.

[4css]

ram1, I dont' use 100%width with my lists and they display fully when hovered upon. I set all my lists in pixel width inside of a div. All list items as well with some nested lists along the way.

In my findings you need to set a display: inline; to the li. This should do the trick for the hover. And it won't interfer with FF at all.

[Bewenched]

Here's what I have found that will work all the browsers .. well .. except maybe netscape 2.0..

Here's the code in your included style sheet

#Menu {
width: 100%;
background-color:#000000;

}

#Menu a {
display: block;
padding-right: 8px;
padding-left: 8px;
padding-top: 1px;
padding-bottom: 1px;
text-decoration: none;
}

#Menu a:link {
background-color:#000000 ;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-WEIGHT: normal; TEXT-DECORATION: none; FONT-SIZE: 11px; color:#FFFFFF;
border-top: solid #666666 1px;

}

#Menu a:visited {
background-color:#000000 ;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-WEIGHT: normal; TEXT-DECORATION: none; FONT-SIZE: 11px; color:#FFFFFF;
border-top: solid #666666 1px;
}

#Menu a:hover {
background-color: #990000;
color: white;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-WEIGHT: normal; TEXT-DECORATION: none; FONT-SIZE: 11px; color:#FFFFFF;
border-top: solid #666666 1px;
}

#Menu a:active {
background-color: #990000;
color: white;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-WEIGHT: normal; TEXT-DECORATION: none; FONT-SIZE: 11px; color:#FFFFFF;
border-top: solid #666666 1px;
}

OK .. and here's the code on the page:

<div id="Menu">
<a href="http://www.mydomain.com/link1.html">Page 1</a>
<a href="http://www.mydomain.com/link2.html">Page 2</a>
<a href="http://www.mydomain.com/link2.html">Page 3</a>
<a href="http://www.mydomain.com/link2.html">Page 4</a>
</div>