SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 28
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    usa
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to use CSS and yet support older vers of Internet Explorer?

    Hi we'd like to use CSS (2 i think) but would like to remain compatible (that is website should come up the same layout) with older versions of Internet explorer namely 5.5 and 5.0.

    What's the best way of going about this? Thanks,

    u2fan

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    You have two options:
    1. Never set padding/borders and width/height on the same element. This can work in most cases, but isn't practical all the time, or
    2. Use the Box Model Hack.

    I prefer the first approach whenever possible. The second one can get you out of a bind if there's no other option though.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Also have a look ath FAQ on the broken box model as there are different methods there also.

    Ie5 and 5.5. can be made to look pretty good with very little effort. There are some things that just won't work very well but in the main its a matter of tweaking here and there. All the 3 col layouts in the sticky demo work in ie5 and ie5.5. and use some quite complicated css and they still work ok.

    Paul

  4. #4
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can always address version specific IE issues by feeding a custom style sheet that addresses the issues using the following method. It is valid HTML as it is essentially a comment and only only IE supports this hack. I personally find that I can usually get by with only a few style fixes for IE 5 and only on really rare occasions do I need to fix IE 6 using this method.

    Code:
    <!--[if IE 5]>
    	<link href="/IE5.css" rel="stylesheet" type="text/css">
    <![endif]-->
    <!--[if IE 6]>
    	<link href="/IE6.css" rel="stylesheet" type="text/css">
    <![endif]-->
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  5. #5
    SitePoint Member
    Join Date
    Dec 2004
    Location
    UK
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm tired of learning hacks for everything, we finally put the Netscape/IE conflict behind us, and no it's CSS hacks. CSS looks good though,

    Jeremy

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by jeremymgp
    I'm tired of learning hacks for everything, we finally put the Netscape/IE conflict behind us, and no it's CSS hacks. CSS looks good though,

    Jeremy
    You don't have to use CSS hacks. In some cases they may be a necessary evil, but there are usually ways around everything you would need a hack for. It might involve rethinking your layout or adding a div here or there, but it's definitely possible not to use CSS hacks.

  7. #7
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    usa
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow all the experts have replied thanks so much!

    Just one quick question:

    Never set padding/borders and width/height on the same element. This can work in most cases, but isn't practical.
    Does height include line-height ??

    Thanks again!

    Regards, u2fan

  8. #8
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    usa
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi short of using the actual browsers, is there any way to test ie 5.5 and ie 5 results? I only have access to ver 6 IE.

    Regards, u2fan

  9. #9
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    http://www.quirksmode.org/browsers/multipleie.html - For multiple IEs.

    And no, line-height is not in any way connected to the box model.

    I don't see a problem with using a hack here and there. It certainly beats putting un-necessary divs in the html.

  10. #10
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    usa
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi these files you mentioned above (ie 5, 5.5 ) are corrupt !
    Winzip won't open them and says the zip files are corrupt.

  11. #11
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I like putting IE6 into quirks mode. That way I only need to make one CSS workaround for both IE5 and IE6, as IE6 in quirks mode renders the same as IE5 (I think).

    To do so, put anything above the doctype. A comment or an XML declaration will be fine.
    Code:
    <!-- -->
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    ...
    Simon Pieters

  12. #12
    SitePoint Zealot
    Join Date
    Oct 2001
    Location
    Norway
    Posts
    187
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But then you get problems with other browsers..
    Good web hosting info All you need to know about web hosting
    xhbml(web dev blog)
    CSS Viking CSS blog

  13. #13
    SitePoint Enthusiast MstrBob's Avatar
    Join Date
    Dec 2004
    Location
    New York City
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fish
    But then you get problems with other browsers..
    To my knowledge, other browsers won't go berserk with a comment above the DOCTYPE. I've tested it in Firefox, Mozilla, Opera, and IE. IE is the only one which will go into quirksmode. Another method of accomplishing the same thing is, if one is using XHTML, to put the XML declaration first. IE will go into Quirks mode, others won't.

    But in generally, I find that one simply needs to know how to treat IE. There are some bugs one can take advantage of. My favourite example being to give a floated element the display:inline; property, which will eliminate IE's habit of doubling margins for floated elements. Certain things one just can't use with IE (position:fixed; anyone?) I've only really found it necessary to use hacks when dealing with IE 5x, as it can do some weird stuff. It is very much possible to go full CSS with IE 5x support included.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by zcorpan
    I like putting IE6 into quirks mode. That way I only need to make one CSS workaround for both IE5 and IE6, as IE6 in quirks mode renders the same as IE5 (I think).
    I'm afraid it doesn't render the same at all Ie6 does use the broken box model and some other legacy behaviour in quirks mode but there are too many other differences to really use this as a good alternative (which is a shame because it would be easier .

    To take the most common example of the broken box model and apply the tantek box model hacks and you will find that ie5 and 5.5. are correct while ie6 is not correct. The reason being that ie6 understands and parses the voice family hack even in quirks mode and reads back the incorrect values. There are many other differences which will affect layouts so the easiest solution is to use the multiple ie versions which I have been using ever since they came out with no problems (apart from those documented).

    I got mine from here and had them up and running in minutes once downloaded.

    http://www.skyzyx.com/archives/000094.php

    Quote Originally Posted by mstrbob
    Certain things one just can't use with IE (position:fixed; anyone?)
    Well with a bit of hacking you can do things like this:

    Fixed header and footer for ie and moz:
    http://www.pmob.co.uk/temp/fixedlayoutexample2.htm
    http://www.pmob.co.uk/temp/fixedlayoutexample3.htm

    However its a shame that ie didn't implement position fixed because its so useful. (The only place position fixed works correctly is on background images on the body element.)

    A lot of these problems and fixes are documented in the FAQ thread if anyone wants some reading . (broken box model, all about floats and double margin bugs, 3 pixel jog etc)

    Paul

  15. #15
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    usa
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    17-20% of our site users use IE5 so we have a major prob as IE5 is showing a messed up site.

  16. #16
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    (The only place position fixed works correctly is on background images on the body element.)
    ...and the HTML element.
    Simon Pieters

  17. #17
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    usa
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The worst part of this css2 and xhtml is that our page validates as valid transitional by validator.w3.org and the css as well but IE5 does not load the page completely (last part of the page is missing) and notice a few other weird effects.

  18. #18
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    usa
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok folks here's one question that I have: if I use the x-small declaration for font size in my CSS file, why is it that the fonts sizes are quite large when viewed with IE 5 and 5.5?

    What's the fix for this? thanks, u2fan

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

    IE5 and 5.5. (and ie6 in quirks mode) are one size out with their keywords so you need use the star selector hack to offer them the correct size. (See the FAQ on font-sizes for further explanations )

    The other problem is that you need the height:1% hack on .blogbody to force
    ie into layout mode. This is the probably the most annoying of IE's habits and is actually something that MS has crafted into IE for some unknown reason.

    Elements that do not have dimensions applied don't have "layout" and don't behave as they should. This is most noticable on elements that have their size defined by margins alone nd can cause any number of strange behaviours.

    There are a number of other properties that will cause this "layout" to be implemented which is why everybody keeps thinking they've discovered a new hack but they are really only addressing the same problem.

    More info:
    http://msdn.microsoft.com/workshop/a.../haslayout.asp

    Hope that helps.

    Paul

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by zcorpan
    ...and the HTML element
    Correct

  21. #21
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    usa
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul thanks so much for your replies.

    So to blogbody I should just add height:1% ??

  22. #22
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    usa
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And the other question is, that the FAQ states the following code for standard font size for IE5-Ie6 :

    * html body {font-size:small;f\ont-size:medium}

    what's the backslash there for? Thanks again!

  23. #23
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    usa
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I read the FAQ again and understand the use of backslash but I tried the following:

    font-size-small;
    f\ont-size:smaller;

    Now the font size shows up as medium in IE5-6. However I require the font size to be x-small (smaller).

    So then what do I use in the css? thanks!

  24. #24
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    usa
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok found a similar hack for IE5 font issue:

    font-size: x-small; /* REDUCE desired size a notch for IE 5 */
    voice-family: "\"}\"";
    voice-family: inherit;
    font-size: small; /* REAL DESIRED SIZE for all other browsers */


    Looks like the same as above?

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

    I've already emailed you all the code you needed

    Here it is again:
    Code:
    * html .description,
    * html .title,
    * html .menu,
    * html .comments-head,
    * html .trackback-body,
    * html .trackback-url{font-size:x-small;f\ont-size:small;}
    
    * html .posted,
    * html .calendar,
    * html .calendarhead,
    * html .side,
    * html .sidetitle,
    * html .comments-body,
    * html .comments-post,
    * html .trackback-post{font-size:xx-small;f\ont-size:x-small;}
    
    * html .date{font-size:small;f\ont-size:medium;}
    * html .banner-commentspop{font-size:medium;f\ont-size:large;}
    /* mac hide - because of 1% hack\*/
    * html .blogbody{height:1%;font-size:xx-small;f\ont-size:x-small;}
    /*end hide - keep these three lines together (inclusing this one) otherwise 
    hack won't work */
    This works by giving ie5 and 5.5. the size smaller and ie6 (in standards mode) the correct size.
    e.g.:
    * html .trackback-url{
    font-size-small;/* for ie5 and 5.5./*
    f\ont-size:small;/* for ie6*/
    }

    Quote Originally Posted by u2fan
    font-size-small;
    f\ont-size:smaller;
    That code above won't work properly because you are giving ie5/55.5. the x-small size but you should then be passing the small size to ie 6 not smaller. smaller will make it smaller than its default whatever that happens to be in its current context.

    Also don't use the voice family hack unless you know what you are doing because IE5 jumps not only the next style but the whole next style block! The star selector hack is much better and easier to use ans is also valid code when media="screen" is required.

    Paul


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
  •