fighting with :hover

making IE do something better

[SethCall]

Well, as you know, only a:hover works for IE, right?

THe thing is, I want an entire div to turn colors when the mouse comes over it. But, with IE, only the text in the A link changes colors, even if you set the A tag's width:100%.

now, if you change the display type of A to display:block, then I get the effect I want, except now in mozilla, I get an extra carriage return. (IE doesn't show it, but I suppose it probably should) Other than making carriage return-height 0px (can't think of the actual CSS property just now), is there anyway in CSS to make a block element, but such that it doesn't have a automatic carriage return?

thanks!

[Birdman]

Try setting the size of the div and the anchor tags the same value.

.thediv
{
width: 100px;
height: 100px;
}

.thediv a
{
width: 100px;
height: 100px;
}

<div class="thediv">
<a href=""></a>
</div>

Suzy_Uk helped me out with the same thing(can't find the thread). As far as the carriage return, I've noticed some strange things also.

When I put two images next to each other like this:

<img src="" alt="" />
<img src="" alt="" />

There is a space between them on the page. If I put them on the same line like this:

<img src="" alt="" /><img src="" alt="" />

No space. I can't answer that one :(

[ggrot]

The image space thing is a problem with the browsers interpreting HTML spec. Whitespace is supposed to be ignored, but not if it is part of text. The problem is determining whether or not your space or newline is text or source code formatting. Most browsers just ignore the problem and render all whitespace as a single space on the screen (even if there are multiple whitespace characters in a row, it is still rendered as a single space.

[SethCall]

Here is something else tat seems simple, but I dont know if it can be done. after much googling, I have to admit defeat:

is their anyway to change another class/id's properties in an a:hover{} statement?

Something that would be like:

a:hover{background-color:orange
#otherElement:background-color:yellow}

im just doing what I can to avoid javascript :) im not stranger to it, but I would simply rather not have it hehe

[SethCall]

Well I thank you very much Birdman: i swear there must be a way to make this work: i tried what you told me, but I am using percentages.. perhaps thats just not working because of this fact.

But thanks anyway! If i find the answer, Ill post it, of course