Css Switcher

Nelo

Ok so I'm new to php and I'm trying to make a code check what broswer is being used and depending on the browser it will execute different php.

For some reason it doesnt work right any help would be appreciated

<?
if ($name = strstr ($HTTP_USER_AGENT, "MSIE"))
{
?>
<link rel="stylesheet" href="css.css">
<?
}
else if ($name = strstr ($HTTP_USER_AGENT, "Mozilla"))
{
?>
<link rel="stylesheet" href="css2.css">
<?
}
else
{
?>
<link rel="stylesheet" href="css.css">
<?
}
?>

NogDog

As the HTTP user agent field is unreliable, I would highly recommend doing this on the client side via IE conditional comments. (Well, actually, I'd recommend working on making a single style sheet work by making sure IE is not in quirks mode and following all the current CSS best practices. 😉 )

<link rel="stylesheet" href="/style.css" /> <!-- make sure default is first -->
<!--[if IE]>
<link rel="stylesheet" href="/ie_style.css" />
<![endif]-->

Nelo

Heh thanks yeah Its basically a background image its aligning perfectly in FF, but in IE and browsers beside FF its off by 2 pixels, so i was hoping that php would take care of it. Again thanks for the help =)

Ashley_Sheridan

I've got a full breakdown of the sorts of conditional comments you can use athttp://www.ashleysheridan.co.uk/coding_html_comments.php . Just set the CSS up so it works OK in Firefox, Safari, Opera (basically all the decent browsers) and then use conditional comments to fix it for IE. I'd use the comments to check if the browser is <= IE7 as IE8 is out now on a beta, and it has sorted a lot of CSS bugs.

bpat1434

Ah, but the real solution is not to code for the browser and to "hack" your CSS to look the way you want it to. The real solution is to rethink your css. Just like php's "if you're using eval() you're doing something wrong", "if you're using conditional comments, you're doing something wrong". I have had plenty of layouts that have looked perfectly fine between IE, Mozilla, Opera, Safari and Konqueror.

As NogDog said, make your stylesheets keep IE out of quirks mode, use the proper standards, and know the difference between padding, margin and how borders will effect width and height 😉 It's all about understanding the specifications.

The only thing I really see needing to differentiate between IE and other browsers is AJAX. CSS should just be a one-time thing.

Ashley_Sheridan

Sometimes the only way to achieve a consistent look is with conditional comments. It's not a case of doing something wrong. Clearly, IE renders CSS differently from other compliant browsers, and often the only way round this is to use conditional comments or drastically change the HTML output. As the main reason for CSS is to enable semantic markup, conditional comments are the preferred way to go. I admit, it's not particularly graceful, and I hate doing it, but sometimes you're left with no choice.

Most often, I'll only ever have to use conditional comments to adjust small things that get messed up by the IE box model, and there is really no easy way around that.