firefox and opera problem

[cooldaddy]

My banner aint displaying properly in firefox and opera...(the banner is too far too the left). It appears correctly on IE though. The banner has a widht of 598 pixels, just like the column it is in. I've placed the banner within css with this code:

background: #ffffff url('http://www.msnemo.com/design/LOGO.JPG') no-repeat fixed top center;

Anybody got a clue on how to solve it ?

you can view the buggy banner in action at: http://www.msnemo.com/vindex.htm

[mark87]

Post a link to the page, it's more likely a bug in IE than a problem with Opera or FF.

[cooldaddy]

This is the link : http://www.msnemo.com/vindex.htm

[Kravvitz]

You really should be using an <img> element to display the background image.

If this works, then it is an IE bug. Try removing the "fixed" keyword from this:
background: #ffffff url('http://www.msnemo.com/design/LOGO.JPG') no-repeat fixed top center;
which becomes this:
background: #ffffff url('http://www.msnemo.com/design/LOGO.JPG') no-repeat top center;

[cooldaddy]

Hey, that solved the problem :) Thank you very much, appreciate it

[Bill Posters]

You really should be using an <img> element to display the background image.
Do you mean the header graphic? Why should an img element be used instead of a background image?

background: #ffffff url('http://www.msnemo.com/design/LOGO.JPG') no-repeat top center;
Just a heads up…
It's generally advisable to avoid using any quotes in CSS urls as a bug in IE5/Mac results in single-quoted urls being ignored.
(* It's sometimes used as a means to filter out IE5/Mac…

e.g.
@import url('styles.css');

Consequently, the header background is not appearing in IE5/Mac, though the layout is otherwise as it should be.

So, whilst single, double and no quotes are all valid, using no quotes is the option which is least likely to throw up issues of this sort.

-

cooldaddy, I would certainly consider reworking that header graphic to give the text some anti-aliasing to improve its appearance.

http://www.msnemo.com/design/LOGO.JPG

[Kravvitz]

Do you mean the header graphic? Why should an img element be used instead of a background image?
Yes, that's what I mean. I said that because there is no text equivalent present for that image.

[Bill Posters]

If getting text in there was the reason behind the recommendation, then surely text + CSS:IR would have made a more fruitful recommendation, no?

Using text + CSS:IR, the text can be assured of receiving the full weight (in terms of search engines) of whichever heading element it's nested within.
There's evidence to suggest that the alt text of img elements nested within heading elements isn't given the same seo weight as plain text nested within the same heading element.

This consequently seems to make img elements (w/ alt) a less effective option than text + CSS:IR when it comes to implementing graphic headings.

[Kravvitz]

I might have, but the background image was just applied to a <div> that had other stuff in it. Either way would be better than how it is.

I use and recommend the Gilder/Levin Method of CSS Image Replacement (http://www.mezzoblue.com/tests/revised-image-replacement/index.php#gilderlevin) which uses an empty span element, because it's the method that's still usable with the images disabled and CSS enabled scenario, which to me is more important than the empty span elements.

[Bill Posters]

I use and recommend the Gilder/Levin Method of CSS Image Replacement (http://www.mezzoblue.com/tests/revised-image-replacement/index.php#gilderlevin) which uses an empty span element, because it's the method that's still usable with the images disabled and CSS enabled scenario, which to me is more important than the empty span elements.

Ditto (with the small exception that I place the spans after the text and use z-indexing to lift the 'background' over the text).

I used to simply shove the text content off-screen to the left using large negative text-indent ('Phark Revisited'?), but my bloody-minded attitude towards adding otherwise redundant span elements finally succumbed to accessibility pragmatism. ;)