Welcome!

[danatello]

Hey,

So in trying to keep my markup clean I am styling a hr element using a background image, in ie6 and ie7 the hr has a border that I can't get rid of, anything obvious I might be missing?

[jarek]

IE has a bug with <hr> so the only solution is something like this:

Code: Select all

<div style="height:20px;background: #fff url(background.gif) no-repeat center;"><hr style="display:none;" /></div>

[danatello]

Well, isn't that just horrible. Cheers!

[Andy]

so the only solution is something like this

That is incorrect. There is another solution.

You apply the background as you usually do:

Code: Select all

hr {
   background: url(hr.png) no-repeat;
   border: 0;
   height: 40px;
}


then you serve up a special version to IE6 & 7:

Code: Select all

display: list-item;
list-style: url(hr.png) inside;
text-align: left;
filter : alpha(opacity=0);


You could do this through a conditional comment or the Star HTML hack.

[danatello]

Will try this out using the * hack, thanks alot!

[Andy]

Will try this out using the * hack, thanks alot!

You're welcome.

The only negative thing about this technique is that you cannot use CSS sprites, which kind of sucks. Anyway, good luck.

[danatello]

Yeah unfortunately I can't use sprites anyway (textured background [not my choice!]).

Is there any reason why IE needs it to be like that?

[Andy]

Is there any reason why IE needs it to be like that?

I can offer you two explanations:

1. Internet Explorer 7 and below does not consider the border around a HR tag to actually be a border. This workaround must therefore be applied to overcome this discrepancy.

2. The IE team fucks up everything they touch.