Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 949
  • Last Modified:

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
0
broesi
Asked:
broesi
  • 3
  • 3
  • 3
  • +2
3 Solutions
 
RoonaanCommented:
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-
0
 
BatalfCommented:
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
0
 
broesiAuthor Commented:
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?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
RoonaanCommented:
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-
0
 
BatalfCommented:
Have you chosen a doctype for your document?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

or

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

It's the most important tag in your document. Without it, you will run into houndreds of situations like this in the future.

More: http://htmlhelp.com/tools/validator/doctype.html

Batalf
0
 
broesiAuthor Commented:
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
0
 
BatalfCommented:
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"> 



0
 
COBOLdinosaurCommented:
Actually get rid of the XHTML doctype all together it is unsupport by IE and much of wha tyou have to do to validate will have to be changed again for XHTML2.  Use:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

There is absolutely no reason to use the unstable XHTML doctypes and the xml tag unless you are actually generating an xml document for web presentation.  Stay with HTML4.01, until the real XHTML standard (XHTML2) is ready.

As for the problem itself it may be cused by the fact that adding the border results in a resize fo the element.  Try setting a bottom border the same color as the background for the unhovered link.  Then all the hover needs to do is just change the color.

Cd&
0
 
seanpowellCommented:
>>It works nowhere (not just not in the bottom navigation).
That's because you can't define a bottom border to an inline link, you would need to do this:

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

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


Thanks,
Sean
0
 
COBOLdinosaurCommented:
heh; I never even thought of that... getting too old .

Cd&
0
 
seanpowellCommented:
Thanks for the A :-)

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

Sean
0
 
broesiAuthor Commented:
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
0
 
COBOLdinosaurCommented:
Glad we could help.  Thanks for the A.  :^)

Cd&
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 3
  • 3
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now