Okay, here's what I'm trying to accomplish...
I am creating two separate CSS files...one for the REAL browsers out there and another for the other.
Here's my question...
Is there a way, within my markup, that I can force the REAL browsers to ONLY @import the REAL CSS file and the other to ONLY @import the other, or vice versa?
Thanx.Is it even possible?
Thanx.i think the easiest way would be to use a server-side language that detects what browser they are using by the http_user_agent, then based on what browser it finds it would display a certain stylesheet. Not diffitcult at all. What server side languages do you have avaiable to you?I do not have access to any server-side language. Unfortunately, this has to be done without SSL and without scripting of any kind. That's why I'm having such a hard time with this.
Any other ideas?
Thanx.why create entirely seperate stylesheets? if your layout is so complex that you need an entirely seperate stylesheet to get it to work in ie, there's probably problems with your layout.Well...it's not that it's that different, I just need to be able to mix the different styles and it seemed easier to simply separate them into two sheets.
Was I wrong in thinking this way?
If so, what would be the best way in "separating" the style in one css file? The biggest stumbling blocks, of course, are the browsers' interpretations of pixel sizes as pertaining to width and height, and the min-* attributes.
Thanx.these are all very simple fixes that can be corrected with a simple !important declaration, or the good 'ol box model hackI'm assuming you mean like this:
{ width : 100px !important; width : 150px; }
Which one is the one that IE will ignore or accept and vice-versa with the real browsers?
Thanx.in your example, IE would take the 150px. using !important tells real browsers to keep that definition, even if its overwritten (except by something else thats !important I believe)So, anything with the !important after it, IE will ignore, right?
Anything?
Thanx.not exactly. see example:
width:50px !important; /*IE sees me now*/
width:48px; /*IE sees me, real browsers keep the original declaration*/Okay...so IE will always use the last-most declaration, right?
Thanx.you got it. glad to helpOkay...
Now, what about the box-model hack?
How, exactly, does that work?
Thanx.like this (<!-- m --><a class="postlink" href="http://tantek.com/CSS/Examples/boxmodelhack.html">http://tantek.com/CSS/Examples/boxmodelhack.html</a><!-- m -->)
Basically, IE5/IE5.5 see different attributes than everything elseSo, in your previous example:
PHP:
-------------------------------------------------------
width:50px !important; /*IE sees me now*/
width:48px; /*IE sees me, real browsers keep the original declaration*/
-------------------------------------------------------
And, taking into consideration the box model hack...
How would I incorporate the two, assuming I'm thinking of a width of 700px?
Thanx.
P.S. Does the box model hack only apply to width, or to height as well?
I am creating two separate CSS files...one for the REAL browsers out there and another for the other.
Here's my question...
Is there a way, within my markup, that I can force the REAL browsers to ONLY @import the REAL CSS file and the other to ONLY @import the other, or vice versa?
Thanx.Is it even possible?
Thanx.i think the easiest way would be to use a server-side language that detects what browser they are using by the http_user_agent, then based on what browser it finds it would display a certain stylesheet. Not diffitcult at all. What server side languages do you have avaiable to you?I do not have access to any server-side language. Unfortunately, this has to be done without SSL and without scripting of any kind. That's why I'm having such a hard time with this.
Any other ideas?
Thanx.why create entirely seperate stylesheets? if your layout is so complex that you need an entirely seperate stylesheet to get it to work in ie, there's probably problems with your layout.Well...it's not that it's that different, I just need to be able to mix the different styles and it seemed easier to simply separate them into two sheets.
Was I wrong in thinking this way?
If so, what would be the best way in "separating" the style in one css file? The biggest stumbling blocks, of course, are the browsers' interpretations of pixel sizes as pertaining to width and height, and the min-* attributes.
Thanx.these are all very simple fixes that can be corrected with a simple !important declaration, or the good 'ol box model hackI'm assuming you mean like this:
{ width : 100px !important; width : 150px; }
Which one is the one that IE will ignore or accept and vice-versa with the real browsers?
Thanx.in your example, IE would take the 150px. using !important tells real browsers to keep that definition, even if its overwritten (except by something else thats !important I believe)So, anything with the !important after it, IE will ignore, right?
Anything?
Thanx.not exactly. see example:
width:50px !important; /*IE sees me now*/
width:48px; /*IE sees me, real browsers keep the original declaration*/Okay...so IE will always use the last-most declaration, right?
Thanx.you got it. glad to helpOkay...
Now, what about the box-model hack?
How, exactly, does that work?
Thanx.like this (<!-- m --><a class="postlink" href="http://tantek.com/CSS/Examples/boxmodelhack.html">http://tantek.com/CSS/Examples/boxmodelhack.html</a><!-- m -->)
Basically, IE5/IE5.5 see different attributes than everything elseSo, in your previous example:
PHP:
-------------------------------------------------------
width:50px !important; /*IE sees me now*/
width:48px; /*IE sees me, real browsers keep the original declaration*/
-------------------------------------------------------
And, taking into consideration the box model hack...
How would I incorporate the two, assuming I'm thinking of a width of 700px?
Thanx.
P.S. Does the box model hack only apply to width, or to height as well?