Colored horizontal line in IE and Firefox

Post Reply
User avatar
studiomaqs
Posts: 153
Joined: Sat Oct 20, 2007 7:33 pm
Full Name: Mostaque Ahammed
Expertise: Web Design

hi,

There is a problem regarding "Colored horizontal line in IE and Firefox" being same in both browser.

I have 2 hr line for same page and I want to look them different in color but same in both browser.
here is the html code:

Code: Select all

<hr id="hlineHeader" />
<hr id="hlineFooter" />
& here is the css code for them.

Code: Select all

hr#hlineHeader{
	border-bottom: 1px solid #FF8500; 
	border-top: 1px solid #FF8500; 
}
hr#hlineFooter{
	border-bottom: 1px solid #B7B7B7; 
	border-top: 1px solid #B7B7B7; 
}
This is the quick fix I came up. In both browser the line will show same.
I have checked it IE 6.0, IE 7 & Firefox 2.X.

If there is other issues, let me know pls.


User avatar
pagol
Insanely Distorted
Insanely Distorted
Posts: 3298
Joined: Sat Nov 03, 2007 8:41 pm
Full Name: Koba
Expertise: Jack of all, master of NONE
x 81

Code: Select all

<hr color="#CC0000"/>
<hr color="#006666"/>

use this way...

it's tested...
** KISS Principle **
User avatar
chhagol
DD Addict
DD Addict
Posts: 899
Joined: Wed Dec 05, 2007 5:17 am
Full Name: Mamun Khandaker
x 2

Hey dude...
I checked out the code and it's working fine with mine. I checked in both IE-6 and Firefox. I didn't understand what could be the problem. Well, let me check this out for some more time then i'll conclude with something else...... Thanks...
MAMUN KHANDAKER
Technical Lead
Monstarlab Bangladesh Ltd.
User avatar
pagol
Insanely Distorted
Insanely Distorted
Posts: 3298
Joined: Sat Nov 03, 2007 8:41 pm
Full Name: Koba
Expertise: Jack of all, master of NONE
x 81

Which properties work

Various CSS properties can be applied on <hr>:

* All three browsers allow setting width and height of the <hr> element.
* The border property can be used in IE and Mozilla. It does not work well in Opera.
* IE uses the color property for the <hr> element.
* Opera and Mozilla use background-color for the <hr> element.
* All three browser allow setting a background-image of the <hr> element, however this is not very useful in IE and Opera.



here is another good solution

Code: Select all

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
#wr{
	color: #003366;
	background-color: #003366;
	height: 1px;
}


#gf {
	text-align: right;
	width: 100%;
	height: 1px;
	color: #F00;
	border: none;
} /* For Internet Explorer */
html>body #gf{
	margin-right: 0;
	width: 100%;
	height: 1px;
	background-color: #F00;
	border: none;
} /* For Gecko-based browsers */
html>body #gf {
	margin-right: 0;
	width: 100%;
	height: 1px;
	background-color: #F00;
	border: 0px solid #F00;
} /* For Opera and Gecko-based browsers */
-->
</style>
</head>

<body>
<hr id="wr"/>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<hr id="gf"/>
</body>
</html>


**** man i hope you will be more active in DD.. we need active memberssssssssssssssss
** KISS Principle **
Post Reply

Return to “HTML”