CODEWITHSUNDEEP
htmlcss
Ryan S
Ryan S

Reputation: 3268

HR Styling - Only working in Firefox, how to make it work for IE and Chrome

I have this code 

<hr style="margin-top: 5px; color: #ada95b; width: 500px;"/>

However this is only working in Firefox, and not working on my versions of Chrome and IE. What way is best to style them and they will work in all browsers?

Upvotes: 5

Views: 7643

Answers (4)

ace
ace

Reputation: 6835

As I have tested your code with different browser (IE6 - 8, FF4 Chrome 10+) it is working fine. Although the problem it looks different to each other. You can solve this by adding a 

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

on your page. But as I have tested IE6 and IE7 is not giving the same results as the others browser unless change color to background-color as other post suggested. See more information about DOCTYPE.

The Second solution is you need to check what is the browser in use then apply the style for that browser.

Upvotes: 1

Salman Arshad
Salman Arshad

Reputation: 272426

For consistent display you can use a DIV with no height and either a top or bottom border.

<div style="margin: 5px 0; border-top: 1px solid #ada95b; width: 500px;"></div>

Upvotes: 1

Alex K
Alex K

Reputation: 7247

best way is removing the border and putting a color to background.. i.e.

<hr style="margin-top: 5px; height: 2px; border: none; background: #ada95b; width: 500px;"/>

Upvotes: 10

kapa
kapa

Reputation: 78751

Regarding the color, browsers treat it differently, you should also set background-color.

This is a quite old article, but might still help.

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

You can also get some ideas here:

http://webdesign.about.com/od/beginningcss/a/style_hr_tag.htm

Upvotes: 2

Related Questions