Border displayed incorrectly in IE 7

[freddygusto]

Hi guys, I just ran into one more (!) cross-browser compatibility problem.
In the footer of the page I am setting up I am using an horizontal list with links.

At the start of my CSS I use

a {text-decoration: none;}
a:hover {text-decoration: underline;}

And then for the footer I set

#menu_footer ul {
text-transform: uppercase;
padding:10px;
margin:0px;
float: left;
width: 100%;
list-style:none;

}

#menu_footer ul a {color: #999; font-weight: bold; letter-spacing: 0.4em; padding-bottom: 5px; text-decoration:none;}


#menu_footer ul li {
display: inline;
margin-left: 15px;
margin-right: 15px;
padding-bottom: 5px;
}

#menu_footer ul li:hover {
border-top:thick solid #999;
background-color: red;
}

And surprise! I cannot get the top border to show in IE (it shows in Mozilla)

Any help how to get around it?

[nickelleon]

Can you post a link to the site?

[WebJoel]

Without seeing your site, know that an "a {....}" is not the same as a pseudo-class "a link {....}"

So, you might want to have something more like this:

a {....}
a link {text-decoration: none;....}
a visited {....}
a hover, a focus {text-decoration: underline;....}
a active {....}

The "a {....}" is for ANY hyperlink in the document that will NOT change 'pseudo state' while "a link {....}" is the default 'state' for links that WILL change on whatever 'action' is given. The delineation is required for separating the 'normal' hyperlinks from the hyperlinks that has some action required. CSS is very um, -strict. Explicitly stating your intentions is required. IE will probably 'guess' what you wanted to do, compliant browsers will ignore the error or 'missing' action. It will not guess.

Note that "hover" and "focus" inclusive share the same attributes. "hover" handles the on-state of the pointer-tool/mouse, and "focus" is for non-mouse user-agents such as hand-held, cellphone, tabs/hotkey/rollerball etc, and assistive technologies for the handicapped (s.508)

[Andyram2k]

Hi Freddygusto,
Try floating the a tag (with possibly width and display: block) and this should hopefully add the border-top. Hope this helps.

[freddygusto]

Thanks for the kind replies guys

Here's the webiste url

http://constantinsandu.com/intranet/

Please have a look at the footer in IE and Mozilla...

[igv]

not sure if you already fixed it or no, but on that page footer top border on hover looks absolutely the same for me in FF3, IE7, and IE8. You mean gray thick border on top of red hovered link, yes?

[freddygusto]

You are right. They do look the same in IE and Firefox.
(the red was for testing) so all I did was (form the css code above) remove the red background and make the border thin bottom instead of thick top. And I got what I wanted to show you!!
IE no border at all
Firefox fine!

Do you know what's happening??

[igv]

I see you have hover state on li element in css:

#menu_footer ul li:hover {
border-top:thick solid #999;
background-color: red;
}


which is not supported by IE6 anyway, so I would not use it, you better use hover only on links ('a' elements)

But in your code, I think the problem could be that you have <li> as inline element, and IE maybe do not like it. I think using them like floated blocks could be better.

[igv]

I meant that IE do not like border on inline element