SitePoint Sponsor |
|
User Tag List
Results 1 to 25 of 28
-
Dec 29, 2004, 09:51 #1
- 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
-
Dec 29, 2004, 10:00 #2
You have two options:
- 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
- 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.
-
Dec 29, 2004, 10:10 #3
- 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
-
Dec 29, 2004, 10:15 #4
- 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
-
Dec 29, 2004, 12:12 #5
- 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
-
Dec 29, 2004, 12:15 #6
Originally Posted by jeremymgp
-
Dec 29, 2004, 19:34 #7
- 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.
Thanks again!
Regards, u2fan
-
Dec 30, 2004, 02:53 #8
- 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
-
Dec 30, 2004, 03:15 #9
- 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.
-
Dec 30, 2004, 20:33 #10
- 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.
-
Dec 31, 2004, 09:32 #11
- 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
-
Dec 31, 2004, 09:36 #12
- 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
-
Dec 31, 2004, 10:53 #13
- Join Date
- Dec 2004
- Location
- New York City
- Posts
- 86
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by fish
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.
-
Dec 31, 2004, 11:09 #14
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by zcorpan
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
Originally Posted by mstrbob
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
-
Dec 31, 2004, 14:06 #15
- 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.
-
Dec 31, 2004, 19:35 #16
- 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.)Simon Pieters
-
Jan 1, 2005, 08:20 #17
- 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.
-
Jan 1, 2005, 08:32 #18
- 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
-
Jan 1, 2005, 11:20 #19
- 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
-
Jan 1, 2005, 11:24 #20
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by zcorpan
-
Jan 1, 2005, 20:02 #21
- 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% ??
-
Jan 1, 2005, 20:12 #22
- 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!
-
Jan 1, 2005, 20:22 #23
- 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!
-
Jan 1, 2005, 23:54 #24
- 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?
-
Jan 2, 2005, 05:08 #25
- 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 */
e.g.:
* html .trackback-url{
font-size-small;/* for ie5 and 5.5./*
f\ont-size:small;/* for ie6*/
}
Originally Posted by u2fan
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