Home Design Cross-browser Complications: The Cost Of Conformity

Cross-browser Complications: The Cost Of Conformity


I’ve had to redesign my website after finding that my bounce rate had risen since I put the new design features in. Then I discovered that the internet had totally lied to me about the ease of making text shadows work as well in IE as in standards-compliant browsers. And if W3C is to be believed, the cross-browser gradients I like to use create invalid CSS. The HTML on all my pages is valid, though. It’s all about the journey, though, so I’m going to share what I learned from my experiences….It all began when I decided that my old look was a bit boring so I moved the menu into the content area and made the slideshow bigger. Then I decided to liven things up by adding some fancy font effects.

Cross-browser Complications

What went wrong?

Where do I start? I had drop-shadows on the headlines, fancy fonts, rounded corners and a gradient background. Oh, and marketing bod Denise said my website lacked personality. Text shadows Those text shadows that looked so lovely in Gecko and Webkit browsers look butt ugly in IE. And the fixes offered by Microsoft are so clunky and ugly they’re hardly worth bothering with. There are plugins you can get to make it work a bit better but you still need to add a shedload of code. I’d gone with a drop-shadow that looked horrible in IE because it dropped the shadow too far from the original text. The glow is not much better; it leaves an ugly jagged edge around the text. Blurring it just blurs the whole element. If you blur, let’s say, a heading, you end up blurring the whole line and when you run your mouse over it the results are just awful. Fonts I’d tried messing with fonts and although they look fine in IE on the HTML pages, on the gallery and blogs they look dreadful. They’re sort of eroded even if you use the EOT files and conditional IE declarations.

Rounded corners

Let’s be honest, the CSS PIE code is buggy and a bit temperamental, to say the least. It works on some things and not on others. Until I got to grips with it and wiggled it a bit, getting even the main content are to go round at the top corners just wasn’t happening on IE on the gallery and blogs. On better browsers it’s no problem but IE was having none of it.

Gradient background

Linear gradients are no problem on modern browsers, but IE is having none of it where radial gradients are concerned. I decided to use a background image on the IE stylesheet — an inferior solution because it slows page loading time down and looks horrible when it repeats. There are cross-browser generators that work fine on the body but for divs they’re a nightmare and either don’t quite reach the top or don’t quite reach the bottom. When the gradient failed to register on IE Tester I was appalled. When I noticed that it left a white line at the top of the page on IE8 I thought, “Forget it,” and switched to a plain background color. It shouldn’t be that much trouble!

How I fixed it

Getting the conditional statements to work was a huge bind till I realized what I was doing wrong; it’s not enough to target the stylesheets you want IE to see ─ you also have to write a conditional statement to include the gradient.css and other files you don’t want it to pick up.

The code:

The first statement targets IE. The second one targets everything else.  What I’d been getting wrong was targeting IE but failing to stop it from picking up the stuff I didn’t want it to see. The ! in front of the IE means “not IE.”Text shadowsIE can’t read CSS3 text shadows. I’ve decided to just leave the text plain on the IE stylesheet. One thing they never tell you on the coding blogs is that you have to be careful when making text shadows because if you’re not you end up with these rather horrible smudges by each space. The only way to eliminate them is to write something like this:It’s not my fault if you want to blur forwards.

The code:text-shadow: 0px 0px 1px #444444;makes an ugly mess. This is what you want: text-shadow: 1px 0px 0px #444444;blurring backwards gives you the blur without the grey smudge. There’s a whole box of tricks for text shadows at useragentman.com if you want to have a look. I spent most of yesterday playing with them. I blurred the text to take the jagged edges off the titles. Speaking of which…Fonts

They work well enough on the HTML pages but on my blogs and gallery they look eroded and really ugly. I’ve had to fall back to Verdana on those programs till I find a viable solution. Font Squirrel, Google Web Fonts and Cufon don’t work on IE.Rounded cornersCSS PIE does the job well enough on the HTML page but it wasn’t working properly on the blog and galleries. In fact, it didn’t work at all. My lovely rounded corners only showed up on modern browsers. I’ve got it working by using#content { background-color: #ffffff;padding: 10px;margin-left: auto;margin-right: auto;min-height: 100%;margin-top: 0.8em;width: 960px;z-index: 10;position: relative;-moz-border-radius-topleft: 12px;-moz-border-radius-topright: 12px;-moz-border-radius-bottomright: 0px;-moz-border-radius-bottomleft: 0px;-webkit-border-radius: 12px 12px 0px 0px;border-radius: 12px 12px 0px 0px; /* box-shadow */-webkit-box-shadow: rgba(0,0,0,0.8) 0px 2px 5px;-moz-box-shadow: rgba(0,0,0,0.8) 0px 2px 5px;box-shadow: rgba(0,0,0,0.8) 0px 2px 5px;display:table;clear: both;behavior: url(PIE/PIE.htc);The trouble with having unequal corners is that it means more code. The behavior command calls the PIE script but because b2evolution and Gallery 3 are a bit pernickety I had to use PIE/PIE_uncompressed.htc to get it to work on them. My corners are lovely and round on IE7 and up now. On the content div. The corners on the search box won’t go round for me on IE on the gallery and blogs. I’ve tried every trick I can think of and it’s having none of it.


Your email address will not be published. Required fields are marked *