Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

IE hr element alignment #297

Closed
wants to merge 1 commit into from

3 participants

@danielstocks

Test Case: http://www.hixie.ch/tests/evil/mixed/hrbrstyles.html

Edit the second example (in webkit for example), set inline style: margin: 1em 0 (like in the boilerplate css), now give it a width of 100px. It will align left.

If you do the same thing in IE(7,8, yet to test IE6) it will align center, because it uses text-align internally rather than margin (as should be according to the HTML5 spec) . Adding text-align: left fixes this.


http://www.w3.org/TR/html5/rendering.html#the-hr-element-0

@danielstocks

So is this a no go then?

@nimbupani

I have added this in the Make it better section so people can refer to it. I do not think hr is used as extensively to deserve a universal style reset.

@devinrhode2

Why is this not in main.css today?

This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jan 27, 2011
  1. @danielstocks

    IE 7 and 8 uses text-align to center HR by default, so we need to res…

    danielstocks authored
    …et this in order to comply with margin:1em 0
This page is out of date. Refresh to see the latest.
Showing with 1 addition and 1 deletion.
  1. +1 −1  css/style.css
View
2  css/style.css
@@ -53,7 +53,7 @@ abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
-hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
+hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; text-align:left;}
input, select { vertical-align:middle; }
Something went wrong with that request. Please try again.