SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    canada
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Page background not showing in IE works fine everywhere else

    Hi the dev site is Untitled Document

    My background image shows up just fine in every single browser except for IE where it just give a plain white background.

    here is the css

    Code:
    body {
    	margin: 0px auto;
    	font: 62.5% "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Arial,Helvetica,sans-serif;
    	background:url(../images/bg2.png)repeat-x #ddd;
    }
    Any ideas as to why this is going on
    Your Websites Your Way!!
    www.clhdesigns.com

  2. #2
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    canada
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    I have solved the problem already here is the answer for anyone else who has this problem in the future. You need to have your color deceleration before you have your repeat property.

    Code:
    body {
    	background:url(../images/bg2.png) #ddd repeat-x;
    	margin: 0px auto;
    	font: 62.5% "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Arial,Helvetica,sans-serif;
    }
    Hope this helps others
    Your Websites Your Way!!
    www.clhdesigns.com

  3. #3
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, is not correct now either. You need some more deceleration on your color.

    Using the background shorthand needs to follow the order like this:

    Code:
    element {
      background-color: color || #hex || (rgb / % || 0-255);
      background-image:url(URI);
      background-repeat: repeat || repeat-x || repeat-y || no-repeat;
      background-position: X Y || (top||bottom||center) (left||right||center);
      background-attachment: scroll || fixed;
    }
    into this

    Code:
    element {
      background:
        #fff
        url(image.png)
        no-repeat
        20px 100px
        fixed;
    }
    though, as you've seen, browsers try to make good with a mixed up order as well.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by capples3 View Post
    I have solved the problem already here is the answer for anyone else who has this problem in the future. You need to have your color deceleration before you have your repeat property.

    Code:
    body {
        background:url(../images/bg2.png) #ddd repeat-x;
        margin: 0px auto;
        font: 62.5% "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Arial,Helvetica,sans-serif;
    }
    Hope this helps others

    Actually the bug has nothing to do with that at all

    The problem in IE8 and under is that when there is no space after the bracket it breaks (haven't tested IE9 yet).

    Code:
    background:url(../images/bg2.png)repeat-x
    Therefore for IE there must be space after the bracket like so:
    Code:
    background:url(../images/bg2.png) repeat-x
    More info here.

    I should also point out that for the background shorthand the properties can actually appear in any order (apart from inherit which should be at the end).
    A double bar (||) separates two or more options: one or more of them must occur, in any order.
    Most shorthand properties are like this with the notable exception of the font shorthand which has its own special rules to follow.

  5. #5
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As always, nice to have Paul around.


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
  •