A–C
D–H
I–Z
Developer services
Project centers
Community resources
- Adobe Cookbooks (share code)
- CSS Advisor (browser bug fixes)
- Exchanges (share components)
- Adobe Labs
- Adobe Open Source
- Forums
- RSS feeds
- Bug base
- User groups
- Adobe Community Experts (ACE)
- Developer events
Integration
Product documentation
Downloads
Samples
Training and books
- Online training
- Classroom training
- Certification
- Adobe Developer Library
- Adobe Press
- Safari Books Online
Newsletters
Blogs
Archives
ADC program
Additional resources
CSS Advisor
Cross browser Horizontal Rule with Background Image
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 (4)
To add a comment, please Log in.
Add <hr> direct in the tag no need of seperate div
by remizrahnas on May 26, 2008
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
by ingozen on July 29, 2007
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
by branjo on April 23, 2007
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?
by i0nutzb on April 23, 2007
if you hide the hr tag, why you insert in that code? it's better to let only <div class="hr"> </div>