SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Found a way to write IE7 specific CSS

    Found a way to write IE7 specific CSS

    Code:
    <style type="text/css">
    @import url("ie.css");
    @import url("main.css") all;
    </style>
    It appears that IE7 doesn't supports "all", so only the first css will be parsed.

    Great success.

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've not tried that out but I wouldn't recommend it.

    Personally, I never have to include an IE7 specific stylesheet as in most cases if you use a doctype and write your code using web standards then in most cases it'll behave in the same way as Firefox, Opera and Safari.

    You may need a few haslayout fixes but that's well documented and easy to solve.

    If you still insist on including a separate CSS file for IE7 though then the recommended method is conditional comments

    Code:
    <!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7.css" media="all">
    <![endif]-->
    Hope that helps.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wouldn't use it either. 99.5&#37; of the time there's no need to serve code to IE 7 that other browsers wouldn't require anyway; usually all that's needed is an adjustment in the code that was written in the first place.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Code:
    Found a way to write IE7 specific CSS
    If I'm not mistaken then that rule will also exclude IE6.

    http://reference.sitepoint.com/css/at-import

    Here's a test:
    http://www.pmob.co.uk/temp/import-test.htm

    Both ie6 and ie7 ignore the css.

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE6 and IE7 actually look for a file whose name includes the media types. You will get a lot of 404's in your error logs with this method.
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Addict
    Join Date
    Apr 2006
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As csswiz said, just use the conditionals - then you can include special css for ie6/7 (or both) as needed.

  7. #7
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    The conditional comments idea seems to be bringing in another stylesheet anyway.

    Is there any way to do this with just one stylesheet? Before IE7, this was easily done. I could keep IE6 in Strict mode, but feed it other styles within the single stylesheet using either stars or CSS signatures or child selectors/combinators...

    I saw someone once use conditionals to wrap an invisible table around en element that needed to act visually like a table (height of a single child setting the total height, expanding to accomodate content...). Is this a better way??

    (I've got a menu that I would like to keep a menu, but currently want to act like a table... and IE doesn't understand display: table so I'd like to feed the smarter browsers the better-working display: table and give IE the not-quit-as-good float model, as well as have the freedom to change the thing entirely on the print.css which I couldn't get easily with a real table.)

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can of course hack it if you want but its never a good idea to hack a live browser though.

    A simple ie7 hack is as follows:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    p{background:red}
    * html p{background:blue}
    *+html p{background:green}
    </style>
    </head>
    <body>
    <p>This will have a red background in all browers except IE.</p>
    <p>IE6 will have a blue background</p>
    <p>IE7 will have a green background</p>
    </body>
    </html>
    Of course you never know what IE8 might do and whether IE7 will get fixed some time (unlikely).

    Conditional comments are the safest bet but I agree that managing multiple stylesheets is a headache at times.

  9. #9
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Ah, yeah! I saw something like that a month ago but with some extended first-child thing added on... and had totally forgotten about it because I kept thinking I want all IEs.

    I'm hoping IE8 acts like MOS. (fingers crossed).

    If the design didn't need the whole table-flexibility, I'd have every browser have what IE would show anyway, just left-floated li's with a width of 19%, which just doesn't quite do the job...

    Thanks, I'll just have to think on this one and make a decision which perilous road I want to take... : )

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Location
    Kent, UK
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All my pages look like this:

    HTML Code:
    <body>
    
    	<!--[if lte IE 6]>
    		<div id="isIE_version_LTE6">
    	<![endif]-->
    	
    	<!--[if IE 7]>
    		<div id="isIE_version_7">
    	<![endif]-->
    	
    		[PAGE CONTENT GOES HERE]
    	
    	<!--[if IE]>
    		</div>
    	<![endif]-->
    
    </body>
    For any styling that needs to target IE7 or other versions, my CSS (which all goes in one file) then looks like this:

    HTML Code:
    .someclass {
          [rules for someclass]
          }
    
    #isIE_version_7 .someclass {
          [additional rules for IE7]
          }
    
    #isIE_version_LTE6 .someclass {
          [additional rules for IE6]
          }
    Personally, I prefer this to including separate stylesheets because:
    1. The page only needs to load the one stylesheet, and
    2. The browser targeting rules go right after the rules they modify, which I find makes it easier to maintain the stylesheet.
    Paul Clark, BlueCamroo Inc
    All-in-one Online CRM, Social CRM and Project Management solution

  11. #11
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Hmmm, I might be able to do something like that. <!--[if lte IE 7]>... extra div wraps around this menu... <![endif]-->

    So long as IE8 adds display: table : ) I haven't had to go back and undo anything yet for when IE7 came out... I hope to do the same when 8 is out.

  12. #12
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    I wouldn't use it either. 99.5% of the time there's no need to serve code to IE 7 that other browsers wouldn't require anyway; usually all that's needed is an adjustment in the code that was written in the first place.
    I guess im "unlucky" then. I have this issue with IE ( in firefox renders well ) that i can't solve.

  13. #13
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just looked at it in IE 7 and Opera. They both look identical to me. Tell you what. Start a new thread in the Web Page Design board explaining what the problem is and I'm sure someone will be along shortly to answer it (I need to head to bed).

  14. #14
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are just a bunch of minor padding or margin differences (make sure you're overwriting the browser defaults), nothing to worry too much about but as Dan said, open another thread for this.
    Dan G
    Marketing Strategist & Consultant


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
  •