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 15 of 15
  1. #1
    New Coder
    Join Date
    Dec 2005
    Location
    NYC
    Posts
    49
    Thanks
    4
    Thanked 1 Time in 1 Post

    Hide From All Except IE

    Hi,

    I am trying to hide some CSS styles from all browsers except IE. I have temporarily solved the problem by using two different CSSs. I need to, however, figure out a way to hide sections of CSS within the same CSS file. Does anyone know how I can make a block of a CSS only be interpreted by IE (while not interpreting the code for other browsers). Basically I need to make sure that firefox, safari, opera, etc use one section of the CSS while IE uses another. The majority of the CSS works for both so I do not want to duplicate.

    Thanks for any help you may have. I appreciate it.

    Brett

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,632
    Thanks
    0
    Thanked 649 Times in 639 Posts
    The following will add an IE only stylesheet.

    <!--[if IE]>
    <link rel="stylesheet" href="ie.css" type="text/css" />
    <![endif]-->
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New Coder
    Join Date
    Dec 2005
    Location
    NYC
    Posts
    49
    Thanks
    4
    Thanked 1 Time in 1 Post
    That is the current solution I am using right now. I was wondering if there is a way to do this within a single CSS file. I need to hide just a section of the css rather than having to create two different CSS.

    Thanks.

  • #4
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,172
    Thanks
    19
    Thanked 65 Times in 64 Posts
    to supply a rule just to ie I use *

    eg
    Code:
    #foo{
    width:500px;
    *width:400px;}
    would give 400px width to ie and 500 to everyone else

  • #5
    New Coder
    Join Date
    Dec 2005
    Location
    NYC
    Posts
    49
    Thanks
    4
    Thanked 1 Time in 1 Post
    Did the trick! Thank you!!

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Alternatively, if you want something which isn't going to invalidate your css…
    Code:
    #foo {
    width: 500px;
    }
    
    * html #foo {
    width: 400px;
    }

  • #7
    Regular Coder
    Join Date
    May 2005
    Location
    Michigan, USA
    Posts
    566
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Bill Posters
    Alternatively, if you want something which isn't going to invalidate your css…
    Code:
    #foo {
    width: 500px;
    }
    
    * html #foo {
    width: 400px;
    }

    This is the correct solution as Bill said, because it is valid CSS markup.
    Note: I do not test code. I just write it off the top of my head. There might be bugs in it! But if any thing I gave you the overall theory of what you need to accomplish. Also there are plenty of other ways to accomplish this same thing. I just gave one example of it. Other ways might be faster and more efficient.

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,632
    Thanks
    0
    Thanked 649 Times in 639 Posts
    That CSS hack wont work in Internet Explorer 7.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by felgall
    That CSS hack wont work in Internet Explorer 7.
    …which, given the likelihood that the problem which lead us to use the hack in the first place has been fixed in IE7, makes it a reasonably good choice for targeting IE6 and below.

  • #10
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,632
    Thanks
    0
    Thanked 649 Times in 639 Posts
    IE7 is primarily a security fix. Most of the HTML/CSS problems will still be there just some of the hacks to "fix" them will no longer work.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    IE7 Beta has some problems fixed, like the 3px gap in between a floated element and an element that is given a left margin to clear the width of the floated element. It does support transparent pngs. The double margin bug is still there. I haven't done too many tests but those are the ones that stood out.

  • #12
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Unless I've missed something and they've recanted on the following statement, IE7 claims to have some fairly significant code handling improvements over IE6, including fixes for many issues which lead developers to deliver alternative CSS to that browser.
    (Iirc, the betas haven't so far included all of the fixes/improvements.)

    IEBlog

    Quote Originally Posted by IEWin Dev Team via IEBlog
    In IE7, we will fix as many of the worst bugs that web developers hit as we can, and we will add the critical most-requested features from the standards as well. Though you won’t see (most of) these until Beta 2, we have already fixed the following bugs from PositionIsEverything and Quirksmode:

    * Peekaboo bug
    * Guillotine bug
    * Duplicate Character bug
    * Border Chaos
    * No Scroll bug
    * 3 Pixel Text Jog
    * Magic Creeping Text bug
    * Bottom Margin bug on Hover
    * Losing the ability to highlight text under the top border
    * IE/Win Line-height bug
    * Double Float Margin Bug
    * Quirky Percentages in IE
    * Duplicate indent
    * Moving viewport scrollbar outside HTML borders
    * 1 px border style
    * Disappearing List-background
    * Fix width:auto

    In addition we’ve added support for the following

    * HTML 4.01 ABBR tag
    * Improved (though not yet perfect) <object> fallback
    * CSS 2.1 Selector support (child, adjacent, attribute, first-child etc.)
    * CSS 2.1 Fixed positioning
    * Alpha channel in PNG images
    * Fix :hover on all elements
    * Background-attachment: fixed on all elements not just body

  • #13
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,632
    Thanks
    0
    Thanked 649 Times in 639 Posts
    I think I got the wording a bit backwards before. The

    * html

    hack wont work properly with IE7 because the browser will always apply the hack even when it shouldn't because some of the problems that the hack is intended to correct will have been fixed.

    So you will need to test

    <!--[if IE 7]> <[endif]-->

    to override the * html hack.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #14
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Then why not just feed to browsers less than IE7?
    Code:
    <!--[if lt IE 7]><![endif]-->
    You won't even need the * html hack in the IEonly CSS because the * html hack would be used only if it was one stylesheet being used that was being fed to all browsers.

  • #15
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Bearing in mind that the OP was after a way to target currently available versions (i.e. IE6/Win and below) without requiring an additional style sheet, the * html 'hack' remains a reasonable way to target said browser versions even after IE7 has arrived.
    Consequently, I foresee * html getting continued use from those who would rather keep their (non-invalidating) hacks within their single CSS file.

    If it weren't for the fact that I generally tend to add a second, IE/Win-specific CSS file (between conditional comments) to house the proprietory filter properties for PNG24 opacity support, then I would almost certainly use * html to address the problems of IE6/Win and below from within my main CSs file.

    MS themselves have now openly attempted to 'deprecate' the use of * html as a means to target IE/Win as IE7's ignorance of that selector makes it unreliable as a means to target the new browser.
    Those who are using * html to target specificially IE6/Win and below are using is fairly wisely.

    IE6/Win and its bugs will still be with us for a while, so it will still need targeting.
    I'm not saying that it should definately be used instead of conditional comments, just that it's an quick and efficient alternative which many, myself included, still see a practical use for.

    It's just a matter of knowing its uses and its limitations and using it wisely.


  •  

    Posting Permissions

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