{"id":662,"date":"2010-04-24T08:51:17","date_gmt":"2010-04-24T07:51:17","guid":{"rendered":"http:\/\/www.simonbattersby.com\/blog\/?page_id=662"},"modified":"2011-09-02T13:05:15","modified_gmt":"2011-09-02T12:05:15","slug":"hr-element-css-removing-the-gaps-in-ie","status":"publish","type":"page","link":"https:\/\/www.simonbattersby.com\/blog\/hr-element-css-removing-the-gaps-in-ie\/","title":{"rendered":"&lt;hr&gt; element css &#8211; removing the gaps in IE6 and IE7"},"content":{"rendered":"<p>Applying css styling to the horizontal rule &lt;hr&gt; element is a little problematic, thanks in most part to non-standard approach of IE6 and IE7 or less. Let&#8217;s start off with colour. IE7 and under use the <code>color<\/code> selector to set the colour of the &lt;hr&gt;. Firefox, Opera, Chrome, Safari and IE8 all use <code>background-color<\/code>. So with css as follows:<\/p>\r\n\r\n<pre>hr{height:10px;color:red;background-color:blue}<\/pre>\r\n\r\n<p>Firefox and Opera give me a blue &lt;hr&gt; with a faintly discernible red border, Chrome, Safari and IE8 give me a blue &lt;hr&gt; with a grey border, and IE6\/7 give me a red &lt;hr&gt; with no border. So I need to set both <code>color<\/code>  and <code>background-color<\/code> and remove the border to get a consistent effect.<\/p>\r\n\r\n<p>So far so good, but the next problem is the margin. IE applies a default 8px margin top and bottom, which is <em>added<\/em> to any margin applied via css. So, with css as follows:<\/p>\r\n\r\n<pre>hr{height:10px;color:blue;background-color:blue;border:none;margin:10px 0}<\/pre>\r\n\r\n<p>Firefox, Opera, Chrome, Safari and IE8 are consistent but IE6\/7 have a much bigger margin. My only solution is to use some conditional css to target IE6\/7<\/p>\r\n\r\n<pre>&lt;!--[if lte IE 7]&gt;\r\n&lt;style type=\"text\/css\"&gt;\r\nhr{margin:2px 0}\r\n&lt;\/style&gt;\r\n&lt;![endif]--&gt;<\/pre>\r\n\r\n<p>So to achieve a 10px margin in IE I&#8217;m compensating for the 8px applied by only applying a 2px margin. Job done. <\/p>\r\n\r\n<p>Here&#8217;s a <a title=\"Test page for hr\" href=\"\/demos\/hr_demo.htm\">test page<\/a> if you want to have a look for yourself.<\/p>\r\n\r\n<p>There is another solution to all this of course, which is to dispense with the &lt;hr&gt; element altogether and use <code>border<\/code> instead&#8230;<\/p>\r\n\r\n\r\n\r\n\r\n","protected":false},"excerpt":{"rendered":"<p>Applying css styling to the horizontal rule &lt;hr&gt; element is a little problematic, thanks in most part to non-standard approach of IE6 and IE7 or less. Let&#8217;s start off with colour. IE7 and under use the color selector to set the colour of the &lt;hr&gt;. Firefox, Opera, Chrome, Safari and IE8 all use background-color. So [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-662","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/pages\/662","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/comments?post=662"}],"version-history":[{"count":1,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/pages\/662\/revisions"}],"predecessor-version":[{"id":3102,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/pages\/662\/revisions\/3102"}],"wp:attachment":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/media?parent=662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}