Accessibility

CSS Advisor

Cross browser Horizontal Rule with Background Image

by jlabelle on April 22, 2007
Edited by: mzaharia@adobe.com on July 22, 2011
Avg Rating 3.0 (27)   |   Log in to rate post.

Tagged with Explorer 6.0 , Explorer 5.0 , Opera 7.x , Explorer 7.0 , Explorer 5.5 , Opera 8.5 , HorizontalRule , Explorer for Mac , Background

Problem

You'd like to create a cross-browser horizontal rule that utilizes a custom image as the content separator.

Solution

Internet Explorer and Opera like to show light borders around the <hr /> when you use an image as a background. This is the workaround.

Detailed description

USAGE

=========================================================
The CSS Class
=========================================================
div.hr {background: #fff url(myhrimg.gif) no-repeat scroll center; height: 10px}
div.hr hr {display: none}

=========================================================
The Tag
=========================================================
<div class="hr"><hr /></div>




Text ID: CROSS_BROWSER_HORIZONTAL_RULE_WITH_BACKGROUND_IMAGE



Comments (5)

To add a comment, please Log in.




Totally agree...

This is not a fix, or a workaround.  Essentially what is being said here is that IE does not support the use of css "background" for this tag.  As if that wasn't ridiculous enough in this day and age, to post a "fix" where you are telling people to put in a superfluous tag and then hide it with css just doesn't make any sense.

Either don't use the HR at all and then remove the hiding class to avoid bloating file sizes, or put the style in a conditional stylesheet for just IE and have a different class for broken browsers.

Add <hr> direct in the tag no need of seperate div

USAGE

=========================================================
The CSS Class
=========================================================
hr {background: #fff url(myhrimg.gif) no-repeat scroll center; height: 10px}


=========================================================
The Tag
=========================================================
<p>your content</p>
<hr> <!-- your image will be displayed here-->
<p>your content</p>

semantic is the key

A horizontal rule isn´t just a graphical way to seperate your content, it´s has his semantical meaning, too. Poor enough that IE lower than 7 doesn´t allow Webdesigners to match semantics with layout, but i think that this problem is better solved with a tiny bit of unobtrusive javascript that replaces the hr with th construct shown in the example on pageload.

because

i think the hr tag is left in the code and rendered hidden in order to better facilitate  screen readers meet accessibility guidelines. It also allows hr styling for different media types, i.e. handheld, print, etc.

in firefox, a cheap and easy way to preview what a mobile device will render (without a specific style sheet attached) is to choose "View -> Page Style -> No Style."

why?

if you hide the hr tag, why you insert in that code? it's better to let only <div class="hr">&nbsp;</div>





CSS Advisor home
Submit a post

rss

CSS ADVISOR RSS FEEDS
Recent: POSTS | COMMENTS | EDITS


Browsers
Internet Explorer (103)
Mozilla/Firefox (52)
Opera (18)
Safari (38)
CSS Properties
Background (25)
Border (10)
Color (10)
Float (23)
Font (6)
Margin (11)
Padding (9)
Position (40)
Text (30)
Width/Height (27)