CSS rendering: block issue, who is the culprit on IE or Firefox?
It's hard for me to figure out why things look so different in IE and Firefox. Here is the CSS class
.logo { width: 224px; height: 120px; position: relative;
display:block; left: -1px; background-image: url(logo.png);}
In IE it works as expected, but in Firefox it behaves like a pissed-off! I see 3 logo.pngs in different places on the page. If I remove the display: block then I cannot see the image in any browser.
Any comments are appreciated.
a source to share
You may need to add
background-repeat: none;
for your css class. And for future reference, it's always IE, which is addictive;)
EDIT: If that doesn't solve your problem, please post a sample site live where we can take a look and experiment a bit. Also, Firebug might be helpful .
EDIT2: Removed this since I noticed a difference between firebug and src which I got by right clicking and selecting "View Source ..."
EDIT3: Steve found your problem: you can't close anchors yourself. The change
<a href="/" id="logo" />
to
<a href="/" id="logo"></a>
a source to share
That's right, the problem is always IE. If Firefox has a problem, then it's usually a problem with the w3c specs. Not being a fan, it's just the way it is.
I guess your problem is that the default for background-repeat differs between browsers. You should try setting background-repeat: no-repeat EDIT: Probably not, all browsers repeat by default.
It would be helpful to know which element you are applying the logo to. Be that as it may, it probably collapses to 0px height when it is not a block. Place a border on it to see what's going on there.
a source to share