PDA

View Full Version : <hr> cross-browser

Geoserv
04-11-2006, 09:43 AM
I am currently using:


hr{color:#f0f0f0;
background-color:#ffffff;
height: 2px;
margin-right:5px;
}


and of course it displays properly in IE, but not in Opera or Firefox. Is there a cross-browser method to solve it?

An example can be seen at http://www.apnaonline.ca/utopian/about.shtml

Thanks,
Geoserv.
karinne
04-11-2006, 09:46 AM
would this help?

http://www.sovavsiti.cz/css/hr.html

seems like you need a "border" in there?
karinne
04-11-2006, 09:48 AM
hmmm ... maybe not eh? seems like you have everything you need in there?!
Geoserv
04-11-2006, 09:57 AM
would it be my html thats wrong, right now Im doing <hr />

should I be using <div>s instead?
_Aerospace_Eng_
04-11-2006, 10:10 AM
hr{
line-height:0px; /*CSS validator says you need units on line-height*/
font-size:0;
border:0;
border-bottom:2px solid #F0F0F0;
margin-right:5px;
}
That should display the same in IE, FF, and Opera.
Geoserv
04-11-2006, 10:20 AM
yes that works Aero, however, if I change

border-bottom:2px solid #F0F0F0;

to

border-bottom:1px solid #F0F0F0;

to get a thinner line, IE goes black, and Opera/FF display properly.

Any ideas?

Geoserv.
_Aerospace_Eng_
04-11-2006, 10:24 AM
Apparently there is a mysterious height coming from some where.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
hr{
line-height:0px; /*CSS validator says you need units on line-height*/
font-size:0;
border:0;
border-bottom:1px solid #F0F0F0;
margin-right:5px;
height:0;
}
</style>
</head>

<body>
<hr>
</body>
</html>
Geoserv
04-11-2006, 10:30 AM
ok, its good now.

Thanks,
Aero.
Whizzkid
04-11-2006, 11:43 AM
Is it possible only to have one half of the border?
karinne
04-11-2006, 12:00 PM
What do you mean "one half of the border" ???
Whizzkid
04-11-2006, 12:58 PM
My code is

hr {
line-height:0px;
font-size:0;
border:0px;
border-bottom:1px dashed #FF0000;
border-top:1px dashed #FF0000;
margin-right:150px;
margin-left:150px;


I want my hr to be 1px hight (dashed red). If I were to put border-top as 0px it would go back to default as a solid grey line.

Is there anyway for that not to be displayed?
scoutt
04-11-2006, 04:18 PM
don't use a <hr> tag, you can get more out of a div tag instead. my opinion.
_Aerospace_Eng_
04-11-2006, 04:52 PM
My code is

hr {
line-height:0px;
font-size:0;
border:0px;
border-bottom:1px dashed #FF0000;
border-top:1px dashed #FF0000;
margin-right:150px;
margin-left:150px;


I want my hr to be 1px hight (dashed red). If I were to put border-top as 0px it would go back to default as a solid grey line.

Is there anyway for that not to be displayed?
Set the height to 0 as well.
erisco
04-11-2006, 06:38 PM
to get a thinner line, IE goes black, and Opera/FF display properly.

IE adds in a shadow unless noshadow is specified. I am guessing that is what is turning it to black.
_Aerospace_Eng_
04-11-2006, 10:01 PM
It also goes away when height is set to 0 because it has nothing to add the shadow to. I think an hr is just fine for creating a line to separate divs. Its more semantical.
Whizzkid
04-12-2006, 07:58 AM
Set the height to 0 as well.

Cheers. Worked a treat