By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,723 Members | 1,655 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,723 IT Pros & Developers. It's quick & easy.

Horizontal line display resolution help

P: 21
I am trying to display a horizontal line using CSS and the results are fine when viewed with Mozilla Firefox 2.0, but not in IE6. I am not able to control the line height in IE6. In the test code below, I also included the deprecated properties code which works fine in both browsers. Any help to switching to CSS is greatly appreciated.

ineuw

<html>
<head>

<style type="text/css">

div.hr {
background-color: #ff0080;
border: 0px;
clear: left;
color: #ff0080;
float: left;
height: 5px;
margin: 4px 0px 4px 0px;
width: 100%;
}

</style>

</head>
<body>

<br>
<br>

<!-- deprecated mode works fine in both Firefox and IE -->
deprecated display
<div><hr size="5" color="#ff0080" bgcolor="#ff0080" width="100%"></div>
<br>
<br>

<!-- line-height of 5px in the css has no effect in IE -->
css display
<div class="hr"></div>
</body>
</html>
Jan 2 '08 #1
Share this Question
Share on Google+
3 Replies


drhowarddrfine
Expert 5K+
P: 7,435
This is another margin bug with IE but, I haven't run into it in so long, I don't remember the details. I'll try and look it up.
Jan 2 '08 #2

100+
P: 428
The simplest way to display a styled horizontal line is to define the top or bottom border of a div with css.
Jan 3 '08 #3

P: 21
Thanks for all who replied.

mrhoo is correct when he advised: "The simplest way to display a styled horizontal line is to define the top or bottom border of a div with css." Also, there was an error with the CSS definition, as someone pointed out that there can't be <div class="hr">

Here is the corrected code below, which works fine in bot Mozilla and IE^

Thanks again


<html>
<head>

<style type="text/css">

hr.logo
{
background-color: #ff0080;
border: 0px;
clear: left;
color: #ff0080;
float: left;
height: 5px;
margin: 4px 0px 4px 0px;
width: 100%;
}

</style>

</head>
<body>

<br>
<br>

<!-- deprecated mode works fine in both Firefox and IE -->
deprecated
<div><hr size="5" color="#ff0080" bgcolor="#ff0080" width="100%"></div>
<br>
<br>

<!-- line-height of 5px in the css has no effect in IE -->
css
<hr class="logo" />
</body>
</html>
Jan 3 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.