HR thickness and color problem [Archive]

brian101

11-03-2007, 05:41 AM

Website: http://www.dealsneaker.com/projectx/projectx.html

if you look at my website im having trouble with my hr thickness, for some reason if you look on my website some hrs are thickers than others but their the same class can anyone help me?

heres the 2 classes
.hr_long{
height: 1px;
border:0.5px solid #2170d2;
}

.hr_short {
height: 1px;
border:0.5px solid #2170d2;
width: 525px;
}

also in IE the hr color is gray instead of #2170d2

thanks in advance

abduraooft

11-03-2007, 07:31 AM

0.5px? It's not possible to use such values with 'px' unit. Only whole number values will be taken. So here it'll be 0px. (you can use 'pt', 'em' '%' units)

VIPStephan

11-03-2007, 11:22 AM

Yeah, have you ever seen a half pixel? A pixel is a pixel is a pixel. There’s nothing smaller than that on a computer screen.
As to the color: With horizontal rules the fundametal differences in IE and other browsers become clear. For example to set a color one would think setting the background color should do the trick but no, IE actually needs color. Fortunately it doesn’t hurt anyone to set both, color and background color. There’s a nice article (http://www.sovavsiti.cz/css/hr.html) on how to style hrs.

brian101

11-03-2007, 08:13 PM

i tried everything but for some reason its still having the problems

heres my new css

.hr_long {
height: 1px;
color: #2170d2;
}

.hr_short {
height: 1px;
color: #2170d2;
width: 525px;
float: right;
}

Donkey

11-04-2007, 01:33 AM

This works in IE6 and FF2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">

<style type="text/css">
*{
margin:0;
padding:0;
border:0;
}

body{
text-align:right;
}

.long {
height: 1px;
color: #2170d2;
background-color: #2170d2;
}

.short {
height: 1px;
color: #2170d2;
background-color: #2170d2;
width: 525px;
float: right;
}

</style>



</head>

<body>
<br /><br />
<hr class="long" />
<br /><br />
<hr class="short" />

</body>
</html>

You need to state the background color for FF and the color for IE.

IE6 didn't like float:right so I used a conditional comment to change it to position:relative for IE6(and below) only, and added text-align:right to the containing div (body)

brian101

11-04-2007, 08:06 AM

This works in IE6 and FF2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">

<style type="text/css">
*{
margin:0;
padding:0;
border:0;
}

body{
text-align:right;
}

.long {
height: 1px;
color: #2170d2;
background-color: #2170d2;
}

.short {
height: 1px;
color: #2170d2;
background-color: #2170d2;
width: 525px;
float: right;
}

</style>



</head>

<body>
<br /><br />
<hr class="long" />
<br /><br />
<hr class="short" />

</body>
</html>

You need to state the background color for FF and the color for IE.

IE6 didn't like float:right so I used a conditional comment to change it to position:relative for IE6(and below) only, and added text-align:right to the containing div (body)

i inserted the code onto my website
Site: http://www.dealsneaker.com/projectx/index.html

still having trouble with the hrs

abduraooft

11-04-2007, 11:29 AM

Hmm... there is one more thing to get a cross browser support. Have a look at the various markup errors given by w3validator (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.dealsneaker.com%2Fprojectx%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0)

Donkey

11-04-2007, 04:50 PM

When you've put all the errors right replace
<div class="long"><hr /></div>
with
<hr class="long" />

brian101

11-04-2007, 06:02 PM

i found the problem even though it took awhile it was as simple as deleting css code, the problem was i set the main body div so all hrs were a certain property which messed up my hrs. Thanks everyone for your help.