Empty Inline Elements Backgrounds IE

[askohen]

Hi, I am having trouble getting IE7 to show a background (color or image) on empty inline elements.

If you look at http://www.cohencentral.com/test.html

in FF and IE side-by-side you'll see that you can see the bg color of the empty linline elems show thru in FF, but not IE. IE appears to ignore padding on these empty elems, whereas FF doesn't ignore it.

Any idea how I can get the bg color to show thru in IE? Thanks in advance!

[Kevey]

All I can figure is adding a space in the div: <span class="x">&nbsp;</span> although there is probably a better way?

[David Harrison]

I'm assuming that you want to use these inline elements to add decoration around your page as part of the design. If that is the case, can you show the actual page, since there may be a better and easier way to do this. Re-using elements that are already there, for example.

[askohen]

Actually I wrote a script that appends file names for links that go to native files.

See: http://cohencentral.com/appendFileName/

As an option you can pass filetypes as parameters to the function which allows you to append icons instead of text nodes. In all cases I am appending a span after each link. If I am using icons instead of text, I am not creating or inserting the text node, just hooking into a class on the span and using background: url("icon.gif") no-repeat; etc.

Try it in FF, it works, because FF shows the background on empty spans, in IE it doesn't work because of the reason I posted originally.

Obviously to see the dynamically generated HTML, you'll have to use something like Firebug and inspect the span that is inserted via the dom script.

[David Harrison]

Have you considered simply using the link to add in the icons? You could apply a bit of right padding and set the background image there.