SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    1337
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question way to get IE to ignore CSS?

    so i have a little problem where a site I designed work perfectly in firefox, but unless I take out a div styling from the CSS file, shows up blank in IE. Without this section of CSS, it shows up perfectly in IE. I know there is a way to allow only IE to execute a section of CSS with <!--[if IE]>, but what about if I want IE to ignore this section of CSS, but all other browser types to execute it??

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    I don't know of a way to hide it from IE - I would just return the values to what they were before the applied styles
    Code:
    <style type="text/css">
    #example { 
      border: 5px solid green;
      float: right;
      position: relative;
      margin-top: -25px;
    }
    </style>
    <!--[if IE]>
    <style type="text/css">
    #example { 
      border: none;
      float: none;
      position: static;
      margin-top: 0;
    }
    </style>
    <![endif]-->
    yeah?

  3. #3
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can actually use CCs to target non-IE browsers: http://www.cssplay.co.uk/menu/conditional.html

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Do all other browsers render what is in between <!--[if !IE]><!--> ?

    Edit: aahhhh it actually finishes off the comments.. sneaky sneaky

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    1337
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, so i've tried a lot of the things suggested, but none of them really worked as I had hoped. It seems to be a really odd problem, because if i remove the offending CSS code completely and load up IE, the page displays perfectly. However, if I simply use the <!--[if !IE]><!--> tag, it displays the page, but adds a ridiculous amount of whitespace into the middle of the document. I also tried nullifying the changes with regular <!--if IE--> statements, but that resulted in a blank page again. What I ended up doing was using the <comment></comment> tags, which are supported in IE around the DIV element tags in my template file. This did the trick and the page renders perfectly. If I use <comment> tags around the CSS and not the DIV's it renders the same as the <!--[if !IE]><!--> tags as pointed out above, with a lot of whitespace. If anyone is interested in the CSS that was doing this it is:

    Code:
    .outer {
      position: absolute;
      visibility: visible;
      overflow: visible;
      left: 0px;
      top: 0px;
      width: 100&#37;;
      height: 100%;
    }
    with outer being a nested DIV tag in the template file

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    You can't use the conditional comments inside the <style> tags or the CSS document, you can only use it in the HTML so it would need to be
    Code:
    <style type="text/css">
    /* All your page styles go here*/
    </style>
    <!--[if !IE]>
    <style type="text/css">
    <!--
    .outer {
      position: absolute;
      visibility: visible;
      overflow: visible;
      left: 0px;
      top: 0px;
      width: 100&#37;;
      height: 100%;
    }
    -->
    </style>
    <!-->
    Is that what you have?

    Edit: What is wrong in Firefox if you completely remove this div ? I'm not understanding the point of it.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    so i have a little problem where a site I designed work perfectly in firefox, but unless I take out a div styling from the CSS file, shows up blank in IE. Without this section of CSS, it shows up perfectly in IE.
    Show us the problem and I'm sure we can fix it without resorting to all this fuss. Do you have a link to the page concerned ?

    It looks like you are doing something very strange with a 100&#37; high absolute div anyway


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
  •