Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Location
    Sweden
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Override CSS3 in IE8

    Hi!
    I have a site that's using the double background functionality in CSS3. I know it doesn't work in IE8 and I'm ok with older browsers displaying only one background. I would have thought that this code would do it:

    Code:
    /*IE 8*/
    background: #042546 url(../images/sky.png) repeat-x fixed top left;
    /*newer browsers*/
    background-image: url(../images/sun-strong.png), url(../images/sky.png);
    background-repeat: no-repeat, repeat-x;
    background-position: top left;
    background-attachment:fixed;
    background-color: #042546;
    My idea was that IE8 would pick up and use the first line, and ignore the lines that it can't compute. But it seems like it picks up th second background declaration and since it doesn't understand it it doesn't display a background image at all but only the background colour.

    Any simple way to solve this? Like I said – I don't need two backgrounds in IE8 and older. If I can simply make them ignore the CSS3 code that would be enough.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello alandor,
    Looks like you're off to the right start, you just need a little tweak to get IE to pay attention to it. See Conditional Statements here.

    Yours might work like this -
    Code:
    <!--[if lt IE 9]>
    <style type="text/css">
    	#myDivElement {	background: #042546 url(../images/sky.png) repeat-x fixed top left;	}
    </style>
    <![endif]-->
    <style type="text/css">
    #myDivElement {
    	background-image: url(../images/sun-strong.png), url(../images/sky.png);
    	background-position: top left;
    	background-attachment: fixed;
    	background-color: #042546;
    }
    </style>
    The conditional statement would load the single background in IE vesrions lower than 9 and the normal CSS would load it in IE9 and higher.
    ...

    It could also be a linked CSS file like this -
    Code:
    <!--[if lte IE 9 ]>
      <link href="myIE8css.css" rel="stylesheet" type="text/css">
    <![endif]-->
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    341
    Thanks
    3
    Thanked 36 Times in 36 Posts
    Quote Originally Posted by Excavator View Post
    (...)
    Be it that the conditional code must be put after/under the normal style block or link.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • Users who have thanked Frankie for this post:

    Excavator (04-11-2013)

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Yup. My bad - I never use conditional comments so I actually did not know that.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,376
    Thanks
    11
    Thanked 592 Times in 572 Posts
    Quote Originally Posted by Excavator View Post
    Yup. My bad - I never use conditional comments so I actually did not know that.
    it's not the conditional comments that demand the ordering, it's the CSS cascade; you put clobbers after the orig...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by rnd me View Post
    it's not the conditional comments that demand the ordering, it's the CSS cascade; you put clobbers after the orig...
    Yes, I understand cascading and specificity. I wrongly assumed the comment would not be included in that, since it was commented out.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

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