Background Showing in IE but not FF

Discussion in 'CSS' started by Sneakynarb, Oct 23, 2007.

0
  1. #1
    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.
     
    Sneakynarb, Oct 23, 2007 IP
  2. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #2
    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..
     
    soulscratch, Oct 23, 2007 IP
    Sneakynarb likes this.
  3. Sneakynarb

    Sneakynarb Peon

    Messages:
    120
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thank you very much. +rep =)
     
    Sneakynarb, Oct 23, 2007 IP
  4. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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.
     
    Arnold9000, Oct 23, 2007 IP
  5. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #5
    ^ 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.
     
    soulscratch, Oct 23, 2007 IP
  6. Sneakynarb

    Sneakynarb Peon

    Messages:
    120
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    It's like you're reading my mind. :eek: 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?
     
    Sneakynarb, Oct 23, 2007 IP
  7. Sneakynarb

    Sneakynarb Peon

    Messages:
    120
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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.
     
    Sneakynarb, Oct 27, 2007 IP
  8. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #8
    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.
     
    soulscratch, Oct 27, 2007 IP