WTF ... IS WTF!?
We are a collective of people who believe in freedom of speech, the rights of individuals, and free pancakes! We share our lives, struggles, frustrations, successes, joys, and prescribe to our own special brand of humor and insanity. If you are looking for a great place to hang out, make new friends, find new nemeses, and just be yourself, WTF.com is your new home.

CSS and IE issues

Awkward Silence

Perplexed Bemusement
99
0
0
#1
If i have 2 CSS documents, is there a way to define which CSS file applies to each html file based on the user's browser?

I'm in the process of creating a css based site, and it looks fine in Firefox, but the alignments are all wrong in IE due to the margins and padding being displayed differently. What's the way round this?

I figured if i could define which CSS document to call based on the user's browser, then i could have 2 CSS files, one properly configured to work with firefox etc, and one which was IE standard.

Unless there's an easier way....?
 

jamesp

In Memory...
1,714
1
0
#3
This is easy with php, though I have forgotten the exact syntax just define a variable as the browser name, getting it from the browser info in php, and then do a conditional statement on it...

code said:
...
browserVersion = PHP_GET_BROWSER();
if (browserVersion == iexplore)
{
do something
}
if (browserVersion == firefox)
{
do something else
}
...
 

Jung

???
Premium
13,979
1,397
487
#4
How is that easier than @import? @import "style.css" ; will only work on IE, all other browsers ignore it.

Depending on what he's trying to do though, he might not even need to use a hack.
 

jamesp

In Memory...
1,714
1
0
#5
Because all browsers recognize PHP. Im not saying it is better, I was just stating my idea for it.
 

Awkward Silence

Perplexed Bemusement
99
0
0
#6
jamesp, i thought of doing something like that, but php returns something like:

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b3) Gecko/20050712 Firefox/1.0+

This will be different for different versions of IE, and all of the different versions of Firefox/Deer Park etc.... so its a bit too much work.

CSS is here: *edit: removed link*

and pages are here: *edit: removed link*

(hosted on my now-working apache server with php and mySQL - thanks again for that advice jung)

If you look at the page above in IE and Firefox, you will see my problem. The page displays fine in FF but not IE.
 

Awkward Silence

Perplexed Bemusement
99
0
0
#7
Am i correct in thinking that if i just add:

@import "IE.css"
to the end of style.css and then change all of the properties that need changing in IE.css, that will work?
 

Jung

???
Premium
13,979
1,397
487
#8
This will be different for different versions of IE, and all of the different versions of Firefox/Deer Park etc.... so its a bit too much work.
This *should* work for all versions from 5.0 - 6.0, and honeslty, that's all you need to worrry about. Just add detection for the Mozilla user agents. http://justinb.us/php-css.phps

Edit: Or you could just specifiy all the rules in the ie.css file to override the normal ones with the !important; directive.


Awkward Silence said:
Am i correct in thinking that if i just add:
to the end of style.css and then change all of the properties that need changing in IE.css, that will work?
No, you'd need to use one of the hacks I linked to. @import will import it for all browsers that support that directive.


I'll take a look at the CSS in a bit though.
 

Awkward Silence

Perplexed Bemusement
99
0
0
#9
would this not be easier in the document head?:

<?php
if (strstr($_SERVER["HTTP_USER_AGENT"], 'MSIE')) {
echo '<link type="text/css" href="IE.css" rel="stylesheet" />';
} else {
echo '<link type="text/css" href="style.css" rel="stylesheet" />';
}
?>
and just use the 2 versions of the CSS file?
 

Jung

???
Premium
13,979
1,397
487
#10
Either way should work. If you did it the other way you'd only have to put the IE specific rules in ie.css with !important. Just do it whatever way seems more logical to you.
 

Jung

???
Premium
13,979
1,397
487
#12
jamesp said:
Because all browsers recognize PHP. Im not saying it is better, I was just stating my idea for it.
Those same browsers also support CSS, but that point is irrelevant in this case. My point was, this could easily be done in CSS _like it should_ without the need for PHP hacks. Also, if you're lazy like me, you like to do things with the least amount of typing possible. :p I wasn't saying your way was wrong, it just wasn't 'easier' like you said.


Awkward Silence said:
Ok, thanks for the help. I'll see how far i get with it now....
http://www.justinb.us/as/
http://www.justinb.us/as/IE.css

Works in IE, Opera and Mozilla.

Btw, line breaks need to be self closing in XHTML, use <br /> instead. Also, you can do your buttons in pure CSS with a:hover without the need for using Flash. Flash is generally a bad idea when it comes to naivgation buttons and links, as it breaks search engine spidering.
 

jamesp

In Memory...
1,714
1
0
#13
Hmmm...I never thought of that. I didn't think of flash menus breaking bots like that, but now that you mention it, it makes a lot of sense.