CSS display:block problem, whos the culprit IE or Firefox?

Question

Hi guys, I am having a hard time figuring out why things look so different in IE and Firefox. Here is a CSS class

.logo { width: 224px; height: 120px; position: relative;
    display:block; left: -1px; background-image: url(logo.png);}

In IE this works as expected, but in Firefox it behaves like a drunk! I see 3 logo.png at different places on a page. If I remove display:block then I cannot see the image in either browser.

Any comments appreciated.

Answer 1

You might need to add

background-repeat: none;

to your css class. And for future reference, it's always IE that screws up ;)

EDIT: If that doesn't solve your problem, please put up a sample site live somewhere we can look at it and experiment a little. Also, Firebug might be helpful.

EDIT2: Removed this, since I noted the difference between firebug and the src I got from right-clicking and selecting "View Source..."

EDIT3: Steve found your problem: You can't self-close anchors. Change

<a href="/" id="logo" />

to

<a href="/" id="logo"></a>

Answer 2

Correct, the problem is always IE. If firefox has an issue it's usually an issue with the w3c specs. Not being a fanboy, it's just the way things are.

I guessing your problem is that the default value for background-repeat is different between the browsers. You should try setting background-repeat:no-repeat EDIT: Maybe not, all browsers default to repeat.

It would be useful to know what element you are applying logo to. Whatever it is is probably collapsing to a height of 0px when not a block. Put a border on it to see what's going on there.

Answer 3

Your problem is in the HTML. You can't can't self close A tags