Background Showing in IE but not FF

www.samcode.net/Blogs

Ignore the other problems on the site, i'm working on those. I'm trying out wordpress and coding my own template, though i'm having some problems:

#wrapper{
	margin: 0 auto 0 auto;
	width: 750px;
	text-align: left;
	background-image: url(images/Back.png);
	background-repeat: repeat-y;
}

Code (markup):

It works in IE, but not FF. Any chance there's a solution?

Thanks in advance.

 

My guess is that you're not containing the floats inside of #wrapper, and the width will trigger hasLayout which makes IE contain floats.. but not modern browsers.

Add overflow:hidden to #wrapper and that should do it..

 

Thank you very much. +rep =)

 

It looks to me that you don't even need a background image, all you have to do is the add a left and right border to your container. Also, you repeated auto 0 twice. Don't know if that would cause problems too.

 

^ Is that because you only saw "margin:0 auto;" in CSS Mastery? That's just a shorthand version of "margin:0 auto 0 auto" or top 0, right auto, bottom 0, left auto.

You're right on the background image deal though, it doesn't look like he has any columns that have different background colors, so he doesnt even need that background image.. horizontal borders would do.

Or maybe he tried doing borders first, but since the floats weren't being contained he had the same problem he was having after he tried the background image.

 

It's like you're reading my mind. I also changed it for my header, thanks once again.

Though one small problem - if you check now, i've tried to replace the text in the image with text in the CSS. But i don't think it supports the 'smooth' style so it looks awful. Any fix for that?

 

I'm also having this problem with my tabs, the black background isn't showing like it does on IE.

I tried the same method, it only made them disappear.

 

What tabs are you referring to? And regarding the text problem, the difference is the text in the image that you probably created in Photoshop has anti-aliasing.. which makes it smooth looking.. unless you use something like sIFR which is a Flash alternative to images, it won't look as smooth.