SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    USA
    Posts
    594
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firefox 3 Removing Background

    Hello All,

    I've had this issue since Firefox 3 has been released, and just got around to trying to fix it now.

    It appears that FF3 is removing the background attribute from the CSS when loaded.

    Offending Site is here: http://www.surpassarcade.com/
    You will notice the difference right away when loading in IE.

    This is the code in the CSS file:
    Code:
    body {
    	margin:0;
    	padding:0;
    	min-height: 100%;
    	background: #4e8333 url('../images/container_bg.jpg') top repeat-x left;
    	text-align: center; /* for IE */
    	height: 100%;
    }
    But when FF3 loads it, it produces:

    Code:
    body {
    height:100%;
    margin:0;
    min-height:100%;
    padding:0;
    text-align:center;
    }
    (obtained via Firebug)

    Has anyone else had this problem or know why its occurring?

    Thanks.
    BKerr

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    USA
    Posts
    594
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fixed, Nevermind.
    BKerr

  3. #3
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    How did you end up fixing it, as I am having pretty much the same problem (only it applies to a <div> tag).

    Cheers
    Leadeye

  4. #4
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Solved!

    I just had to add overflow: hidden;.

    That was a new one for me...

    Cheers
    Leadeye

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You are saving your css files with a BOM (byte order mark) which is corrupting the first selector in the css file.

    The browers is seeing a style like this.

    Code:
    &#239;&#187;&#191;html { height: 100&#37;; }
    &#239;&#187;&#191;.box {
    height:auto;
    }
    Which of course doesn't exist.

    Look at the css file using the webdeveloper toolbar in Firefox (edit CSS) and you will see the strange bom characters (&#239;&#187;&#191 at the top of 2 of the css files. If you don't know what a BOM is then read Tommy's sticky thread in the html forum about character encoding. Suffice to say you should remove those characters and stop your editor from outputting them in the first place


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •