I was up till 4am trying to sort out the problems I'd caused in other browsers for my blog and gallery because the menu wasn't displaying correctly, and on Webkit browsers (I checked it via Chrome) the corners didn't show up as round and the sidebars on both the gallery and the blog had dropped. And I only just found out yesterday evening, hence the late night.
IE and how it renders
As usual, the problem was caused by me trying out a new layout in a bid to demonstrate my ability to design well. I have always favoured a clean, minimalist layout with few large images, but a few fancy features, e.g. fading slideshows. Anyway, I had another go at rounded corners, using CSS3 and a fixer called PIE that works on earlier versions of IE.
IE9 and 10 can read HTML and CSS like a decent browser, and IE8 can to a lesser extent. It's IE7 and below where the problems lie because CSS3 is all Greek to them.
The problem
I've got a few tools for seeing how my work renders in different browsers. The trouble is, they're not terribly accurate at rendering what IE actually sees, ignoring the conditional statements I've used to call an alternative file and reading only the main CSS file. This has necessitated developing in the alternative file, making changes where necessary to make it display as it should. Oh, and conditional statements only work in Windows on IE.
Since the emulators don't accurately display what IE6 and 7 see, I can't trust fixes like PIE and have had to dispense with the rounded corners in the CSS for those versions. I've also had to make a JPG header since they can't see the .png one.
The solution
An alternative file, using the same divs and spans, but with changes made to display the page properly. You need only one for earlier versions of IE, but it seems you have to call the dratted thing twice, with a conditional statement for IE6 and another for IE 7. gte is supposed to call that version and earlier, but it doesn't seem to work, and I'd rather not take chances.
<!--[if IE 6]> <link rel="stylesheet" type="text/css" href="menu/menu-ie6.css"> <link rel="stylesheet" type="text/css" href="header-ie6.css"> <![endif]--> <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="menu/menu-ie6.css"> <link rel="stylesheet" type="text/css" href="header-ie6.css"> <link rel="stylesheet" type="text/css" href="ie7.css"> <![endif]--> <!--[if gte IE 8]> <link rel="stylesheet" type="text/css" href="/header.css" /> <![EndIf]-->
What about Webkit?
The main benefit of the Browser wars is that we now get to see nicer-looking images, fonts and effects on the internet. The trouble is that, although they are moving more closely towards web standards, they still render CSS differently from each other.
The problem
My chief beef, design-wise, has always been with IE, and for that reason I keep forgetting that it renders divs and spans differently, so that what displays nicely on a Gecko browser like the ones I use is narrowed, warped and occasionally lost by a Webkit one like Chrome or Safari. That's what happened to my blog and gallery. They spent a week with the sidebar dropped beneath the main content div because the container wasn't wide enough. The CSS worked perfectly on my main pages because it wasn't interacting with anything else, but when I incorporated it into my blog and gallery, it went all funny because it had to take the code from there into consideration. And because I hadn't checked my blog and gallery in other browsers, I thought it was fine.
The solution
I've been hunting high and low for solutions to this on t'internet, and the only one that seems to work is to have alternative CSS files and use PHP code to call them. Conditional statements like the one above only work in Windows on IE. They won't work for other browsers.
You have to use JavaScript or PHP. Word of warning: if you're working with a PHP-based applications program such as b2evolution (this blog), the JavaScript won't work (I tried!), so use this:
<?php
$Safari = strpos($_SERVER["HTTP_USER_AGENT"], 'Safari') ? true : false;
$Chrome = strpos($_SERVER
["HTTP_USER_AGENT"], 'Chrome') ? true : false;
if ($Safari ) { ?>
<link rel="stylesheet" href="other.css"
type="text/css" />
<link rel="stylesheet" type="text/css" href="menu/menu-ie6.css">
<link rel="stylesheet"
type="text/css" href="header-ie6.css">
<link rel="stylesheet" type="text/css" href="ie7.css">
<?php
}
if
($Chrome) { ?>
<link rel="stylesheet" href="other.css" type="text/css" />
<link rel="stylesheet" type="text/css"
href="menu/menu-ie6.css">
<link rel="stylesheet" type="text/css" href="header-ie6.css">
<link rel="stylesheet"
type="text/css" href="ie7.css">
<?php
}
?>Can you see how many style sheets I had to make? Thankfully, it was a mere matter of copying and pasting some code (not all of it, just the bits you want to change) and making the necessary changes. IE6 creates huge gaps that have to be filled, and IE7 compresses things, so I had to make one just for the header to make it render correctly in that inferior browser.
Rather than entrust myself to a browser emulator, I actually downloaded Chrome and checked it manually there. You can't do that with earlier versions of IE, so you just have to do the best you can and check your work on another computer.
I've also tested my work in a browser resizer because my header was getting squashed. I solved the problem by giving the header a width.
Other browsers
There's a plethora of other browsers, but honestly, you really can't win 'em all. I'm of the opinion that, as long as you style for the Big Three: Webkit, Gecko and IE, you should be fine. Just be sure to check your work of different-sized screens to make sure it displays as intended.
No comments:
Post a Comment