|
|
It's a known problem. Remember that bug I fixed for you? It broke another thing.
I really, really dislike the breaking changes between IE versions. It's getting silly.
cheers,
Chris Maunder
The Code Project | Co-founder
Microsoft C++ MVP
|
|
|
|
|
|
So, would you rather MS stopped updating IE to be more standards compliant to minimize the cross version hacks you have to write now, or to keep going for it to minimize the cross browser hacks in the future?
3x12=36
2x12=24
1x12=12
0x12=18
|
|
|
|
|
c) drop Trident and move to WebKit.
What I'd actually like, just because I'm lazy, is a way to have conditional CSS inside CSS files themselves. I don't like having multiple style sheets for multiple browsers so I rely on using the IE6 and 7 hacks to write conditional CSS inside the sheets so that I can work around the changes in each version of IE. With IE9 there are no hacks (that I'm aware of) that allow me to target one rule for IE9/Normal browsers and one for IE8. Since IE9 and IE8 do things differently it makes it tremendously painful. Found a hack!
The ultimate answer is that Microsoft moves to replicate the rendering behaviour of Gecko and WebKit. Innovate all they want, but I don't want to have to worry about hasLayout, or deal with odd PRE behaviour, or fiddle with overflow settings just to endlessly beg and plead with it.
cheers,
Chris Maunder
The Code Project | Co-founder
Microsoft C++ MVP
modified on Wednesday, April 13, 2011 4:39 PM
|
|
|
|
|
I think you can do conditional CSS in a couple of ways:
A. with an extra div:
A1. a single CSS file with global as well as specialized style definitions:
p { definitions for paragraph }
div.IE8 p { definitions for paragraph specific to IE8 }
A2. and then you pack every page in a div with a class that depends on the browser:
<div class="IE8">
normal page content
</div>
B. The alternative would be the "PIEBALD approach":
- create a single CSS file, stuff it with typical C-style preprocessor directives;
- have a batch file that "compiles" this for every browser target, using different output file names of course;
- have your pages include the correct CSS file.
Luc Pattyn [Forum Guidelines] [My Articles] Nil Volentibus Arduum
Please use <PRE> tags for code snippets, they preserve indentation, improve readability, and make me actually look at the code.
|
|
|
|
|
I'm not sure I get how A would work. You'd have two divs both showing. You'd need to somehow toggle which div gets displayed. I don't want to use server-side code (it's unreliable) nor can I rely on Javascript (it's not always used).
The other big issue here is that it's often the case that a single element simply renders wrong. Your approach means double the payload (which has massive consequences in terms of bandwidth, speed and maintenance) just to fix, in some cases, a tiny element.
The fix I have settled on is:
IE6: prefix property names by "_"
IE7: prefix property names by "*" or use the *+html hack
IE8: suffix property values by \0/ and ensure these properties are declared last within a rule
IE9: No hacks. Target it as the standard IE version.
cheers,
Chris Maunder
The Code Project | Co-founder
Microsoft C++ MVP
|
|
|
|
|
The concept is you pack the whole page in some tag, maybe a div (or a span or whatever suits you), with a class that matches the client's web browser (info gotten from useragent); that is the only change to the page, nothing gets doubled. Your web server just has to add the surrounding div/whatever when it serves the page request. So when the useragent indicates the client is using IE7, you would send:
<html><head>...</head><body>
<div class="IE7"> -- this is a new line, it varies with the browser
normal page content
</div> -- this is the other new line
</body></html>
And then there is a single CSS file that has browser-specific style definitions that refer to the surrounding class when necessary. So it could have
li { ... }
div.IE8 li { ... }
div.IE7 li { ... }
div.FF4 li { ... }
if IE8, IE7, and FF4 were the browsers that would need specialized definitions for li.
So in the CSS file there is some doubling up, which is unavoidable if you want to only have one file. (The alternative is to have one master file, and have the others generated, that was described as plan B).
Luc Pattyn [Forum Guidelines] [My Articles] Nil Volentibus Arduum
Please use <PRE> tags for code snippets, they preserve indentation, improve readability, and make me actually look at the code.
|
|
|
|
|
OK. An interesting approach. I would probably attach the class to the BODY tag, though (assuming testing with IE6+ showed that was possible - I've not done this).
cheers,
Chris Maunder
The Code Project | Co-founder
Microsoft C++ MVP
|
|
|
|
|
Chris Maunder wrote: I would probably attach the class to the BODY tag
The HTML spec seems to support that. You need to test the approach on every browser of interest obviously. Some seem to have trouble adhering to the standard... 
Luc Pattyn [Forum Guidelines] [My Articles] Nil Volentibus Arduum
Please use <PRE> tags for code snippets, they preserve indentation, improve readability, and make me actually look at the code.
|
|
|
|
|
I now have it working on my web site.
The server recognizes a number of browsers (IE, FF, CR), and adds two classes to the body tag (family and family+version), like so:
<body class="FF FF4">
Here[^] is a demo, the bottom line basically contains:
Browsers (client in red): <span class="IE">IE</span> <span class="FF">FF</span> <span class="CR">CR</span>
My CSS file now includes:
body.IE span.IE {color: #FF0000;}
body.FF span.FF {color: #FF0000;}
body.CR span.CR {color: #FF0000;}
therefore the tools page gives a red foreground for the body-span combinations that have a matching class.
It works fine on IE7, CR11, and FF4, though I had the usual trouble of forcing FF to reload the CSS file (any hint?).
[ADDED]
I now installed the "CSS reloader" add-in for FF, and that works. I think it is silly one needs an add-in to fix a short-coming of CTRL/F5!!!
[/ADDED]
Luc Pattyn [Forum Guidelines] [My Articles] Nil Volentibus Arduum
Please use <PRE> tags for code snippets, they preserve indentation, improve readability, and make me actually look at the code.
modified on Wednesday, April 13, 2011 8:05 PM
|
|
|
|
|
I cannot find any IE9 CSS workarounds that are friendly with the chirpy CSS post-processor we use so I've fallen back to using this technique for IE9 only and it has solved the issue neatly. Thanks Luc.
cheers,
Chris Maunder
The Code Project | Co-founder
Microsoft C++ MVP
|
|
|
|
|
You're welcome.
PS: if any of my replies have been useful, you should vote them up...
Luc Pattyn [Forum Guidelines] [My Articles] Nil Volentibus Arduum
Please use <PRE> tags for code snippets, they preserve indentation, improve readability, and make me actually look at the code.
|
|
|
|
|
Question: if the client PC caches web pages, and the user switches browsers, would that lead to style problems (the page no longer matching the browser currently in use)? or do you enforce a no-cache policy everywhere? (if so, how?)
Luc Pattyn [Forum Guidelines] [My Articles] Nil Volentibus Arduum
Please use <PRE> tags for code snippets, they preserve indentation, improve readability, and make me actually look at the code.
|
|
|
|
|
Page caching is done at the browser level (each holds its own). Networks / proxies will sometimes cache pages but there's not a lot (in practical terms) we can do about that.
cheers,
Chris Maunder
The Code Project | Co-founder
Microsoft C++ MVP
|
|
|
|
|
If you'd just go ahead and convert CP to use Silverlight, these problems would all go away. 
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997
|
|
|
|
|
Along with a bunch of other "problems", too.
cheers,
Chris Maunder
The Code Project | Co-founder
Microsoft C++ MVP
|
|
|
|
|
You mean Apple/Safari users? Yeah
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997
|
|
|
|
|
That sounds more like a feature to me. 
3x12=36
2x12=24
1x12=12
0x12=18
|
|
|
|
|
Am I the only one who feels that if you are going to get 2 points for adding a simple pre tag that you might as well edit the rest of the question? ...spelling and grammar perhaps, question title, tags, etc...
Come on people, 2 points for adding pre tags and you still can't understand the freakin' question.
--
You don't hire a handyman to build a house, you hire a specialist.
|
|
|
|
|
If it's full of errors, depends on how I feel, but if there are only one or two, yes.
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997
|
|
|
|
|
I see your point.
Maybe I am interpreting the word "edit" the wrong way.
--
You don't hire a handyman to build a house, you hire a specialist.
|
|
|
|
|
The button clearly says "improve", not edit.
cheers,
Chris Maunder
The Code Project | Co-founder
Microsoft C++ MVP
|
|
|
|
|
Chris Maunder wrote: The button clearly says "improve", not edit.
Then don't categorize it as "editor" (points) but "improver" (points) instead.
How is it possible to improve something unless you edit it? 
The message to the right of the page for "improving" the question says that my status enables me to "edit" or "delete" this question.
--
You don't hire a handyman to build a house, you hire a specialist.
modified on Wednesday, April 13, 2011 11:26 AM
|
|
|
|
|
Slacker007 wrote: How is it possible to improve something unless you edit it?
A lot of times, improvement can only be achieved via deletion, which if stretched, could be considered to be a kind of editing, but for my purposes, it's not.
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
