Creating a Visual Divider with CSS

As my last post got longer, different sections started flowing into each other, making it harder to read and follow the examples. One way to combat this problem is to introduce more headings which you can certainly try but I want to insert a visual bitmap, a generic stylized ribbon in this case, to mark the beginning of each different section.

I added a class called "ribbon-divider" for CSS:

.divider {  
       background: url(http://pics.cssrule.com/pics/ribbon.jpg) 50% 0 no-repeat; 
       height: 24px; width: 100%; 
       margin-top: 5px;
       margin-bottom: 5px; 
}

The height of the image is 24 pixels and for width I want to occupy the entire width of middle column, so I set the width property to 100%. I placed a single ribbon bitmap in the middle. No-repeat option ensures that the image does not repeat even if there's room to fill in. When I needed to mark a break in my content, I added the following to my HTML (or in Blogger add it to your post in Edit/Create Post mode in places where you would like to mark a break in your text):

<div class="divider"></div>

This works perfectly fine but the div, even with a descriptive class name, was not very meaningful from a mark-up point of view. The horizontal line tag is a more natural fit for what I am trying to do so I styled the "hr" tag instead of the new class. The styling of the "hr" element is almost the same as my class with one notable exception, setting the "border" property to none. This stops the hr element from outputting as a horizontal line.

hr    {  
       background: url(http://pics.cssrule.com/pics/ribbon.jpg) 50% 0 no-repeat; 
       height: 24px; width: 100%; 
       margin-top: 5px;
       margin-bottom: 5px; 
       border : none;
}

With this style, whenever I need a break in my post, I simply type in:

<hr />

which invokes the CSS style for the hr element and outputs a centered ribbon image in my post.

Unfortunately later on I discovered that IE does not register the "border" statement so in order to make this work universally and not just in Firefox, I have to go back to using the "div". I still feel styling the hr element is the better way of getting this done but since at the moment, I can't think of a way to stop Internet Explorer from misbehaving, please use the div option.