SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Cross Browser Background rule order

    Hey guys,

    I have all my rules to make each browser give a nice backgound but can't seem to get the order of them right. As is, I get CSS gradients in Chrome, FF, etc, IE9 gets SVG but IE 7 and 8 just show a plain colour. I would like 7+8 to use the png image version.

    IE6 has been relegated to a plain IE6 universal set of styles so not worried about that.

    Any ideas how to get IE 7 and 8 to use the PNG version?

    Code CSS:
      background: rgb(58, 77, 160) image-url('bg-body.png') repeat-x left top; /*Graphic*/
      background: rgb(58, 77, 160) image-url('bg-body.svg') repeat-x left top; /*SVG*/
      background: #3A4DA0 -webkit-linear-gradient(top, rgb(18, 22, 43) 0, rgb(58, 77, 160) 500px) no-repeat; /*CSS Gradient*/
      background: #3A4DA0 -moz-linear-gradient(top, rgb(18, 22, 43) 0, rgb(58, 77, 160) 500px) no-repeat;
      background: #3A4DA0 -ms-linear-gradient(top, rgb(18, 22, 43) 0, rgb(58, 77, 160) 500px) no-repeat;
      background: #3A4DA0 -o-linear-gradient(top, rgb(18, 22, 43) 0, rgb(58, 77, 160) 500px) no-repeat;
      background: #3A4DA0 linear-gradient(top, rgb(18, 22, 43) 0, rgb(58, 77, 160) 500px) no-repeat;

    Kind regards,
    Neil

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    instead of

    Code:
    image-url('bg-body.png')
    it should just be

    Code:
    url('bg-body.png')
    Of course, make sure the path is right too. At the moment, the CSS assumes the image is in the same folder as the CSS file.

  3. #3
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The image- is to allow the Rails asset pipeline to work.

    I basically can't figure out what order the rules need to go in to allow IE7 and IE8 to use the PNG version, IE9 to use SVG and others to use CSS gradients because the way I have them currently does not give a png version to 7 and 8 but I do get just a static plain colour.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Can't you just conditional comments and send the correct rule to IE7 and 8.

    There seems to be a solution here but I haven't tested it out.


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
  •