Problem with link hovering in case of inline-block element IE7 [Archive]

View Full Version : Problem with link hovering in case of inline-block element IE7

Metalpalo

01-08-2010, 11:47 AM

Hello

I have link <a> as inline-block element (black backround and white color). After what I hover on link I expect change of backround color to white and color to black.

But it doesnt work. The backround color is not changed and text in my link is also black

Where can be problem ?

Thanks

jscheuer1

01-08-2010, 01:20 PM

Works fine here:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
a {
display: inline-block;
background-color: #000;
color: #fff
}
a:hover {
background-color: #fff;
color: #000
}
</style>
</head>
<body>
<a href="#">Test</a>
</body>
</html>

Metalpalo

01-08-2010, 02:41 PM

Hello

I've found where is problem, but it appears only in IE. FF,Opera,Chrome is OK.
The problem causes reset part of CSS for links. If I removed it then everything works fine also in IE.

Here is my example my small example.
Note that file test.txt is html document.

Can somebody explain me where is problem?

Thanks

Metalpalo

01-08-2010, 03:19 PM

Hello

problem causes line font-size: 100%

why?

jscheuer1

01-08-2010, 05:08 PM

That's not what I just found. Here, if I include one or both of either:

border: 0;

or:

background: transparent;

That's what seems to set it off.

The border: 0; is technically incorrect, or just something I was always taught to avoid for some reason, it should be (AFAIK) border: none; - If you use that, it may remain and not mess things up for your demo. The background declaration is OK, but less specific than it should be. However, changing it to background-color makes no difference.

I seriously doubt there is a good explanation for this, as neither of these should affect the color property of a :hover pseudo class. My advice would be to just take the a out of the selector as your comment in the stylesheet indicates and define a separate one for the a tag. The default in all browsers for a is transparent background anyway, so you are losing nothing:

a {
margin: 0;
padding: 0;
outline: 0;
border: none;
font-size: 100%;
vertical-align: baseline;
}