Since I always see this kind of FF/IE posts here, I thought I'd start a thread about my favourite method for dealing with it.
Step 1. Make a CSS "good_ff.css" that works in FF and Opera.
Step 2. Save the CSS as "dumb_ie.css" and change this to make it work in IE 5.
Step 3. Using PHP, serve the dumb CSS to IE and the good CSS to everyone else. Moreover, don't serve a DOCTYPE to IE so that IE 6 runs in Quirks Mode and uses the same box model as IE 5.
Step 4. Make sure the dumb CSS actually works the same in IE 5 and IE 6, as they have different bugs.
Step 5. Because this awful browser requires you to make changes in two places from now on, place a "Get Firefox" button on every page of the site. Sweet Revenge!
Note: I use XHTML, so I decide if a browser is IE or not based on this
<?php
if (stristr($_SERVER["HTTP_ACCEPT"], "application/xhtml+xml"))
?>
Sure hope IE7 won't support XHTML...
Note: Get the "Get Firefox" button from the "Help spread Firefox" link below.Proposed treatment for IE / FF differences
Step 1. Learn CSS.
Step 2. Write one css.
Step 3. Work in strict mode.
Step 4. All browsers have bugs and implement css differently.
Step 5. Don't tell users what they should use. Make your site accessible to all.
Use html4 not xhtml <!-- m --><a class="postlink" href="http://www.hixie.ch/advocacy/xhtmlWhatever">http://www.hixie.ch/advocacy/xhtmlWhatever</a><!-- m -->. It was a suggestion not a proposed W3C recommendation. It might not be suitable to every developer and every site, but there's no doubt in my mind. I don't wanna go back to one CSS full of comments like this:
/*** Fix IE bug ***/
div.fix { blahblah
/*** Fix FF problem caused by the previous fix ***/
body > div.fix { blahblah
And a CSS where you can't ever use padding and width for the same element.
I wish someone had given me this idea when I first started instead of having to come up with it myself.
The W3C recommends serving XHTML as text/html to user agents who do not recognise application/xhtml+xml.
There are many reasons why XHTML is better than HTML. Why do you think W3C is gonna release a recommendation for XHTML 2 and not for HTML 5? HTML is dying.Oh no, I sense another [X]HTML fight coming on.
Personally, I use a vaguely similar method of coding to the CSS standards (oddly enough Fx and Opera usually render things correctly), then adding an IE-only stylesheet hidden by a conditional comment if it's necessary.
This article (<!-- m --><a class="postlink" href="http://www.w3.org/International/articles/serving-xhtml/">http://www.w3.org/International/articles/serving-xhtml/</a><!-- m -->) helps clarify things a bit.
AdamI'm 100% on Fang's side here. You usually don't need hacks as much as most people think. Plus 99% of the time you can fix all of your problems by using really simple hacks that are almost unnoticable. All those nasty, dirty, ugly comments aren't necessary. Oh, and use HTML 4.01 strict, not XHTML.
#myDiv {
margin: 10px;
width: 250px;
float: right;
padding: 2px;
border: solid 1px #000;
}
* html #myDiv {
margin-top: 5px;
}most of my css hacks are just to make the padding right in both IE and FF,
and i only use xhtml
My site does serve different MIME types anyway.
Also, my site serves a different CSS for the 'printable view' if the page end with ?print=1).
So it is no effort to implement my method.
Having thought about it, I kind of see why my idea isn't as big an advantage for a page that wouldn't otherwise be parsed by the PHP engine.
As for the HTML vs XHTML...
Instant validation in the FF browser is reason enough for me to use XHTML.
As for the quirks mode, note that <!-- w --><a class="postlink" href="http://www.w3.org">www.w3.org</a><!-- w --> runs in quirks mode in IE. I have stated why I think quirks mode is better for IE, I haven't seen any reason why it isn't.Originally posted by amazing_andr3
My site does serve different MIME types anyway.
Also, my site serves a different CSS for the 'printable view' if the page end with ?print=1).
Why would you ever need a printable version if you're designing with CSS?I need to remove the header and footer images and the menu.
You mean I should have used @media print { ?
The reason why I have a "printable view" link which loads the 'printable page' ?print=1 is because I wanted to know if anyone is interested in printing my pages and I couldn't think of any other way. I log the times printable pages have been opened.
So now I know none is printing my pages
Anyway, in case someone wants to use my method and needs more details, I have written an explanation at:
<!-- m --><a class="postlink" href="http://www.siteuri.ro/developer/css-browser-differences.phpMozilla's">http://www.siteuri.ro/developer/css-bro ... pMozilla's</a><!-- m --> view (<!-- m --><a class="postlink" href="http://www.mozilla.org/docs/web-developer/faq.html#accept">http://www.mozilla.org/docs/web-develop ... tml#accept</a><!-- m -->)What that link says is that there's only one disadvatage in serving XHTML as application/xhtml+xml, and that is the lack of streaming.
This is of course something browsers should fix, but it's not a huge issue.
Let's assume you are already on a site and you visit one of its pages. Measure the time it takes for some text to appear.
I'm on a 56k dial-up.
It took over 13 sec since I pressed "POST REPLY" until I was able to start typing this and yet people still use this forum.
While the lack of XHTML streaming might add 1-2 seconds in the (perceived) loading time for a reasonably-sized page, this will never exceed 4-5 seconds because XHTML makes slim pages.
As for the first time you load a page of the site (which is the one time it really maters), it makes no difference what so ever.
And if none serves XHTML properly, where's the incentive for browser developers to implement XML streaming?OK I see none likes my method...
then what about this thing that wikipedia uses?
<!--[if lt IE 5.5000]><style type="text/css">@import "/skins/monobook/IE50Fixes.css";</style><![endif]-->
<!--[if IE 5.5000]><style type="text/css">@import "/skins/monobook/IE55Fixes.css";</style><![endif]-->
<!--[if IE 6]><style type="text/css">@import "/skins/monobook/IE60Fixes.css";</style><![endif]--><offtopic>
Andrei, I took your quiz and there are a couple of things I'd like to mention about it. First, in question #6, you say that "XML won't replace HTML. XHTML will." XHTML is a form of XML. Additionally, HTML will always be a W3C standard, so even if it turns out that eventually no one really uses HTML, it will still be a standard and will not have been replaced with XHTML. In question #17, a PNG can be photographic. This was kind of confusing since you didn't give me the JPG choice and as a result I chose what was second most likely. Until PNGs are supported better, JPGs and GIFs have their place, but they will both be replaced by PNGs in the future, since PNGs have higher quality at a lower file size and also other things like alpha transparency. On question #27 I was thrown off by "-//W3C\//DTD XHTML 1.0 Strict//EN" in the doctype. I skimmed the rest of the page and figured you either accidentally had that backslash up there or you did on purpose. As a result, I just chose randomly. In question #28, you are specifying that there is a specific order in which background property values should be. However, there is no specific order. The W3C lists them in an apparent order in the specification, but if you look at the example following it, you will see that they specify a background URL, then a background color. If there was a specific order, they would clearly be contradicting themselves. Just thought I would point that out. Thanks, though, I always like to take quizzes from time to time.
</offtopic><offtopic>
Even if there's millions of HTML 3.2 pages out there, none designs a new site with HTML 3.2. I guess it's a matter of semantics, but I would say that HTML 4.01 has replaced HTML 3.2
Then it's also matter of logic
XHTML replaces HTML
XHTML is XML
Therefore XML replaces HTML (?)
I'll have to think about it...
Thanks for pointing all of that out, I'll fix my quiz.
</offtopic>A newer version of HTML replaced an older one, but HTML 3.2 is still a specification, still supported by browsers and can still be used.
But yeah, on the XHTML/XML replacing HTML issue, it's just an Aristotle logical pattern.
Step 1. Make a CSS "good_ff.css" that works in FF and Opera.
Step 2. Save the CSS as "dumb_ie.css" and change this to make it work in IE 5.
Step 3. Using PHP, serve the dumb CSS to IE and the good CSS to everyone else. Moreover, don't serve a DOCTYPE to IE so that IE 6 runs in Quirks Mode and uses the same box model as IE 5.
Step 4. Make sure the dumb CSS actually works the same in IE 5 and IE 6, as they have different bugs.
Step 5. Because this awful browser requires you to make changes in two places from now on, place a "Get Firefox" button on every page of the site. Sweet Revenge!
Note: I use XHTML, so I decide if a browser is IE or not based on this
<?php
if (stristr($_SERVER["HTTP_ACCEPT"], "application/xhtml+xml"))
?>
Sure hope IE7 won't support XHTML...
Note: Get the "Get Firefox" button from the "Help spread Firefox" link below.Proposed treatment for IE / FF differences
Step 1. Learn CSS.
Step 2. Write one css.
Step 3. Work in strict mode.
Step 4. All browsers have bugs and implement css differently.
Step 5. Don't tell users what they should use. Make your site accessible to all.
Use html4 not xhtml <!-- m --><a class="postlink" href="http://www.hixie.ch/advocacy/xhtmlWhatever">http://www.hixie.ch/advocacy/xhtmlWhatever</a><!-- m -->. It was a suggestion not a proposed W3C recommendation. It might not be suitable to every developer and every site, but there's no doubt in my mind. I don't wanna go back to one CSS full of comments like this:
/*** Fix IE bug ***/
div.fix { blahblah
/*** Fix FF problem caused by the previous fix ***/
body > div.fix { blahblah
And a CSS where you can't ever use padding and width for the same element.
I wish someone had given me this idea when I first started instead of having to come up with it myself.
The W3C recommends serving XHTML as text/html to user agents who do not recognise application/xhtml+xml.
There are many reasons why XHTML is better than HTML. Why do you think W3C is gonna release a recommendation for XHTML 2 and not for HTML 5? HTML is dying.Oh no, I sense another [X]HTML fight coming on.
Personally, I use a vaguely similar method of coding to the CSS standards (oddly enough Fx and Opera usually render things correctly), then adding an IE-only stylesheet hidden by a conditional comment if it's necessary.
This article (<!-- m --><a class="postlink" href="http://www.w3.org/International/articles/serving-xhtml/">http://www.w3.org/International/articles/serving-xhtml/</a><!-- m -->) helps clarify things a bit.
AdamI'm 100% on Fang's side here. You usually don't need hacks as much as most people think. Plus 99% of the time you can fix all of your problems by using really simple hacks that are almost unnoticable. All those nasty, dirty, ugly comments aren't necessary. Oh, and use HTML 4.01 strict, not XHTML.
#myDiv {
margin: 10px;
width: 250px;
float: right;
padding: 2px;
border: solid 1px #000;
}
* html #myDiv {
margin-top: 5px;
}most of my css hacks are just to make the padding right in both IE and FF,
and i only use xhtml
My site does serve different MIME types anyway.Also, my site serves a different CSS for the 'printable view' if the page end with ?print=1).
So it is no effort to implement my method.
Having thought about it, I kind of see why my idea isn't as big an advantage for a page that wouldn't otherwise be parsed by the PHP engine.
As for the HTML vs XHTML...
Instant validation in the FF browser is reason enough for me to use XHTML.
As for the quirks mode, note that <!-- w --><a class="postlink" href="http://www.w3.org">www.w3.org</a><!-- w --> runs in quirks mode in IE. I have stated why I think quirks mode is better for IE, I haven't seen any reason why it isn't.Originally posted by amazing_andr3
My site does serve different MIME types anyway.
Also, my site serves a different CSS for the 'printable view' if the page end with ?print=1).
Why would you ever need a printable version if you're designing with CSS?I need to remove the header and footer images and the menu.
You mean I should have used @media print { ?
The reason why I have a "printable view" link which loads the 'printable page' ?print=1 is because I wanted to know if anyone is interested in printing my pages and I couldn't think of any other way. I log the times printable pages have been opened.
So now I know none is printing my pages
Anyway, in case someone wants to use my method and needs more details, I have written an explanation at:<!-- m --><a class="postlink" href="http://www.siteuri.ro/developer/css-browser-differences.phpMozilla's">http://www.siteuri.ro/developer/css-bro ... pMozilla's</a><!-- m --> view (<!-- m --><a class="postlink" href="http://www.mozilla.org/docs/web-developer/faq.html#accept">http://www.mozilla.org/docs/web-develop ... tml#accept</a><!-- m -->)What that link says is that there's only one disadvatage in serving XHTML as application/xhtml+xml, and that is the lack of streaming.
This is of course something browsers should fix, but it's not a huge issue.
Let's assume you are already on a site and you visit one of its pages. Measure the time it takes for some text to appear.
I'm on a 56k dial-up.
It took over 13 sec since I pressed "POST REPLY" until I was able to start typing this and yet people still use this forum.
While the lack of XHTML streaming might add 1-2 seconds in the (perceived) loading time for a reasonably-sized page, this will never exceed 4-5 seconds because XHTML makes slim pages.
As for the first time you load a page of the site (which is the one time it really maters), it makes no difference what so ever.
And if none serves XHTML properly, where's the incentive for browser developers to implement XML streaming?OK I see none likes my method...
then what about this thing that wikipedia uses?
<!--[if lt IE 5.5000]><style type="text/css">@import "/skins/monobook/IE50Fixes.css";</style><![endif]-->
<!--[if IE 5.5000]><style type="text/css">@import "/skins/monobook/IE55Fixes.css";</style><![endif]-->
<!--[if IE 6]><style type="text/css">@import "/skins/monobook/IE60Fixes.css";</style><![endif]--><offtopic>
Andrei, I took your quiz and there are a couple of things I'd like to mention about it. First, in question #6, you say that "XML won't replace HTML. XHTML will." XHTML is a form of XML. Additionally, HTML will always be a W3C standard, so even if it turns out that eventually no one really uses HTML, it will still be a standard and will not have been replaced with XHTML. In question #17, a PNG can be photographic. This was kind of confusing since you didn't give me the JPG choice and as a result I chose what was second most likely. Until PNGs are supported better, JPGs and GIFs have their place, but they will both be replaced by PNGs in the future, since PNGs have higher quality at a lower file size and also other things like alpha transparency. On question #27 I was thrown off by "-//W3C\//DTD XHTML 1.0 Strict//EN" in the doctype. I skimmed the rest of the page and figured you either accidentally had that backslash up there or you did on purpose. As a result, I just chose randomly. In question #28, you are specifying that there is a specific order in which background property values should be. However, there is no specific order. The W3C lists them in an apparent order in the specification, but if you look at the example following it, you will see that they specify a background URL, then a background color. If there was a specific order, they would clearly be contradicting themselves. Just thought I would point that out. Thanks, though, I always like to take quizzes from time to time.
</offtopic><offtopic>
Even if there's millions of HTML 3.2 pages out there, none designs a new site with HTML 3.2. I guess it's a matter of semantics, but I would say that HTML 4.01 has replaced HTML 3.2
Then it's also matter of logic
XHTML replaces HTML
XHTML is XML
Therefore XML replaces HTML (?)
I'll have to think about it...
Thanks for pointing all of that out, I'll fix my quiz.
</offtopic>A newer version of HTML replaced an older one, but HTML 3.2 is still a specification, still supported by browsers and can still be used.
But yeah, on the XHTML/XML replacing HTML issue, it's just an Aristotle logical pattern.