posted on
Sunday, February 08, 2009 10:00 PM
In this post I want to share with you a solution I found to workaround a bug/problem that IE has with <hr>: it doesn't render the background image.
For the new skin of my blog I tried to use the "good old" simple tags, which I choose based on the content.
For example I preferred to use semantic tags if they were good for the content I wanted to display, like cite and quote for a citation rather than a using a generic span. This a thing that most web designers forget: there are tons of tags, but most of us always use div, span, p and lately the ul/li. But that's the topic for another post.
I developed the skin on a Mac, so I developed it using Firefox, and then I tested it on Safari and then Opera and the skin was looking good on all these browsers, without any change needed. But then I fired up with Windows VM to test it with IE7... and here came the problems.
I accepted some differences, but I didn't want to change my idea of using a definition list (<dl> with nested <dt> and <dd>) for the list of photos and titles.
The problem is that IE renders a definition list completely different from the other three browser. So, to solve the problem I decided to change the way I implemented the graphic separator between the images: instead of just having a background on the <DL> I decided to use a <hr /> to separate each item group (description + title) and then to give it a background in order to have the graphic rule instead of the usual boring solid line.
And again there was a problem: IE doesn't render the background of the <hr />. A simple solution would have been to drop the line, replace it with a generic div, and give it a background. But then I would have missed the clean markup given by the <hr />.
So I decided for a mixed solution: I just write the hr in the html, to keep it clean, but then make it a div with a background at runtime, using jQuery.
Let's start with the HTML markup that we want to achieve:
<div class="hr"><hr class="Img"></div>
But I don't want to write that code, so here is the markup that I write:
<hr class="Img" />
And the CSS that I used to style the <hr>. Notice that this style applies both to the <hr> and the div that will wrap it.
The height property is set to the height of the image that I want to use to replace the <hr>.
hr.Img, div.hr {
background:#FFFFFF url(images/coolHr.gif) no-repeat center bottom;
height:20px;
}
Then it's time for the javascript.
First in the <head> I called the library (here I used the minimized version of jQuery hosted on Google):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
And finally, in a script block, I put this javascript function:
$(document).ready(function(){
$("hr.Img").wrap("<div class='hr'></div>");
});
That code just selects the <hr> I want to replace and wraps it with the
container div.
The results of all this work is the dark green line you see down below.
Technorati tags: css, IE, jQuery, hack