| Viewing Single Post From: Browser Dependent CSS | |
|---|---|
| Zeerus | Oct 15 2005, 09:34 PM |
Spank My Monkey!
  ![]](http://209.85.12.237/static/1/pip_r.png)
|
Making a website display correctly in all browsers can be quite a task, and some may even say that it’s the most difficult part of web design. Heck, I remember having trouble even getting tables to display correctly in all browsers a few years back, when they were acceptable for display use. Just recently, Stylegala covered the topic of throwing out CSS hacks by using PHP. The only problem is, this takes a whole lot longer and requires some intermediate level PHP knowledge. Now the method explained in this post will still require the use of hacks, but is way less PHP intense. Now there are many solutions to this problem. Before we move on, let’s outline a few of them. First, you can constantly check your website in all the different browsers available, and make changes as needed. Secondly, you can do the same thing, and then use hacks, like the box model, to make it look right in all browsers. But there’s also a third, easier way to do this. Through the use of IF THEN ELSE statements and some minor PHP coding you can use browser detection to display your website with a different style sheet for each viewer. Now this is a whole lot easier then spending hours of your time just trying to make a website that looks perfectly fine in one browser look just as good in others. As an example I’ll use one of my latest client’s website. Now the site may not be visually stunning, and it definitely doesn’t contain any revolutionary coding, but it is simple and efficient, exactly what the client called for. Let’s start by looking at the snippet of CSS that makes this site look different in IE than it does in other browsers. For demonstration purposes I have included the box model hack in the IE only coding.
It seems IE has a few margin problems. This probably has something to do with the box model issue, but I didn’t feel like investigating it and making changes when I could use browser dependant styling to make it display correctly in less than half the time. All this requires is a simple PHP snippet (available for download) and two different style sheets, one for Internet Explorer and one for the next most popular browsers (FireFox, Opera, Safari). If you want to go a step further we can add another small line of code to our PHP statement with a third style sheet for Netscape users, though the FF style sheet should work just fine. Now we have our IE only styling above, here is the replacement coding we will use for our secondary style sheet, which will only be used when a user visits the website in FF, Opera, Netscape, Safari, and others.
Now the box model is still there, but you might notice a small change. For some odd reasons IE completely screws up marginal padding, so the margin elements have been changed to compensate. Now let's take our tiny PHP script and insert it into the head of our document, replacing our default link tags.
When you click view source, as with any other PHP file, the PHP tags disappear and you're left with just the link rel tag which will change depending on which browser you use. There is, however, one problem which occurs when Opera identifies itself as IE. Now if you really want everything to display correctly you can modify the PHP statement to include a different stylesheet for each browser. For example, one for FF, one for Opera, one for Opera as IE, one for Safari, Camino, Omniweb, and son and so forth. This is a simple alternative to the lengthier method described by Stylegala. Good luck with your implementaiton and feel free to send me your pages that use this method. Keep in mind that this is in no way revolutionary and makes use of extremely simple coding, yet I've never seen it in use. |
| |
 |
|
| Browser Dependent CSS · Tutorials | |
12:39 PM Nov 27
