| Welcome to Abstracted.View. We hope you enjoy your visit. You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free. Join our community! If you're already a member please log in to your account to access all of our features: |
| Browser Dependent CSS; using PHP | |
|---|---|
| Topic Started: Oct 15 2005, 09:34 PM (4,215 Views) | |
| Zeerus | Oct 15 2005, 09:34 PM Post #1 |
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. |
| |
 |
 
|
| + Bird-E | Oct 21 2005, 06:16 AM Post #2 |
|
Dedicated member
|
Nice tut. I was having a hell of a time trying to figure out how to make a css hack so my tests display correctly both in ff and IE. Just wondering though, what does this part of the code do- \width: 749px; w\idth: 729px; Originally I thought that was a css hack, and that it could only be read by another browser. Just trying it out before, I couldnt get it to work. I tested it out on my localhost and it loaded both stylesheets. I made noticeable changes to the firefox css file (changed the colours), and those came up when I ran the html through IE. I'm a noob at PHP, but does this require something like a SQL database? Or should it work fine with the html, two css files, and the php script inside the html's head tags? |
|
|
|
| Zeerus | Oct 21 2005, 01:56 PM Post #3 |
|
Spank My Monkey!
|
it's called the Box Model hack, by Tantek Celik basically, IE ignores anything that comes after a backslash, like comments. But it also ignores open slashes. Basically with the box model we have two types of browsers. Whenever you create a div in IE, the padding, border width, etc. is counted inside the total defined Width of the DIV in most all other browser leements the div element is always the specifed width, and borders and padding are added to the outside of the DIV. let me give you an example
to wrap it up, IE only sees the width of 749px, with the 20px of padding or whatever contained inside that. FF and other browsers only see the width of 729px, with the 20 px of padding or whatever added to the outside of that. This ensures that the measuremeants are the same in both browsers, and they both add up to 749px using their own measurement system. with my method of using browser dependant stylsheets you don't have to use any hacks. |
|
| |
|
|
|
| + Bird-E | Oct 21 2005, 05:05 PM Post #4 |
|
Dedicated member
|
ah ok that makes sense now. Thanks for the help :) |
|
|
|
| Zeerus | Oct 24 2005, 01:52 PM Post #5 |
|
Spank My Monkey!
|
no problem |
|
| |
|
|
|
| 1 user reading this topic (1 Guest and 0 Anonymous) | |
| « Previous Topic · Tutorials · Next Topic » |
5:26 PM Nov 26
