asked on

border-bottom not working in IE

Hello experts,

I have a strange problem with this CSS-code:

div.navi_bottom a {
      text-decoration:none;
}

div.navi_bottom a:hover {
      border-bottom:1px solid white;
      color:yellow;

}

It works fine in almost every browser. But in IE5.2/Mac, IE5.0/Win98 and IE6/Win2000 it does not display the red line below the link.
And what's even worse: it has very strange side effect on ID/Mac: it displays a vertical bar on the screen (looks like it changes the background color of the table row containing the bottom navigation). It works fine in IE6/WinXP...
The text, however turns yellow, so it obviously reads the rule.

Is that another of those browser bugs? Or could it be some machine/OS-dependant settings?

Please help, this is driving me nuts...

broesi

Roonaan

Possibly it isn't showing a red line because you defined it to be white?

Otherwise try to define a border-bottom also on div.navi bottom a, with the exception that in that stage the border-color is the samen as the background-color of the below layer.

-r-

Batalf

Could it be a line-height problem? i.e. not enough space to make the border visible.

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="">
<Title></Title>
<style type="text/css">
div.navi_bottom a {
text-decoration:none;
}
div.navi_bottom a{
line-height:24px;
}
div.navi_bottom a:hover {
border-bottom-width:1px;
border-bottom-color:#FFFFFF;
border-bottom-style: solid;
color:yellow;
line-height:24px;
margin-bottom:2px;
}
body{
background-color:#000000;
}
</style>
</head>
<body>
<div class="navi_bottom">
<a href="#">Hello</a>
</div>
</BODY>
</HTML>

Try to decrease the line-height of the <a> tag and the border will disappear.

Batalf

broesi

ASKER

Oops,

I changed the 'red' to 'white' for testing... But the problem is still the same. ;-)

Defining a border-bottom in the div.navi_bottom and setting a bigger line-height did not help. Also splitting up the border-bottom:... into 3 lines (border-bottom-widht, border-bottom-style and border-bottom-color) didn't work.

BTW: All the links on the site should have the red border-bottom on hovering. It works nowhere (not just not in the bottom navigation).

Any other ideas?

Roonaan

When it doesn't work anywhere you possibly have an interfering other style defined.

What happens when you use border instead of border-bottom. Does it show the right and left borders?

-r-

SOLUTION

Batalf

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

broesi

ASKER

Roonan,

tried that also: it does not show the border.

Here's the header:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

It works in IE6/WinXP but not in IE6/Win2000 - that's the thing puzzling me the most...

broesi

Batalf

Try to remove your XML tag(<?xml version="1.0" encoding="utf-8"?>) and then change doctype to

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

SOLUTION

COBOLdinosaur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

seanpowell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

COBOLdinosaur

heh; I never even thought of that... getting too old .

Cd&

seanpowell

Thanks for the A :-)

(and you're not getting too old...)

Sean

broesi

ASKER

That works like a charm - thanks a lot!! I'll give CD and Batalf some points, too. I will definitely re-think our doctype-strategy!

Thanks for your help!

Broesi

COBOLdinosaur

Glad we could help. Thanks for the A. :^)

Cd&