This morning I have been working on a XSL Template for our site at work. Our nice graphic designer made a mock-up in Adobe Illustrator, which he then converted to HTML using Macromedia NightmareWeaver. I then had to make an XSL Template to convert our source XML into his result HTML.
NightmareWeaver produces utterly awful HTML if you let it, a gazillion tables and table cells, unique style names for everything, and no logical hierarchy at all. Making this with XSLT is an evil and thankless task, which I frankly was not looking forward to.
So instead of producing a page that used his HTML, I junked it, and decided to make the page using standard compliant xhtml and CSS. Most of the mark-up that NightmareWeaver produces seems to be tables - it's very good at tables, and many of them seem to serve no useful purpose, so I just deleted them wholesale. Then I put the bits that needed to be in different logical containers into DIVs, and at a stroke I'd removed over 50% of the HTML. Generating my xhtml from XSLT is much easier and simpler to do, so that took no time at all.
Then the fun begins. Looking at the page in Firefox, it's a bit Spartan, so I started to add rules to the CSS style sheet. One by one, I moved the logical blocks into their correct location and set their appearance. All works pretty much as you'd expect, Firefox does what you would expect, and with it's excellent development tools, it's great to see what's going on when you screw up!
As I was getting close I quickly tested in Opera, as I expected it was perfectly happy too. It's a fine browser, a bit more picky than gecko based ones - good for finding mark-up bugs, but it's not as nice as a developer tool so I don't use it as much as Firefox.
Then I looked at in IE6. It got the page all wrong, the mark-up and style is correct, but IE6 doesn't get the layout right. I then start the tweaking, adding stuff to make IE6 work, and hoping that it's not going to break Opera or Firefox/Mozilla. One by one I eliminated the bugs, it took longer to fix for IE6, than it did to create in the first place.
I HATE IE6, ignoring it's awful security track record, it's lousy usability, lack of PNG support, it really annoys me how poorly it supports the standards, standards that Microsoft helped to create!
Using IE6 is like watching B&W analogue TV, when glorious, digital, 16:9 ratio, colour is available.
-Dom
Re:IE Box Model...
ajt on 2004-02-25T14:57:08
If only! In this case it's a float bug. I have the DTD set correctly so IE6 should be using the correct box model, and at this stage I don't care about IE5's totally broken implementation.
The man in the scary hat is a jolly clever chap, and I read his book while stuck in hospital last year - a very useful read indeed. I keep trying to get people to read it. I've not rad it yet, but Eric Meyer On CSS may also be a goo read.
My problem is that IE5 and IE6 do odd things with floats. Mozilla and Opera do what you would expect, IE doesn't and your whole page get's messed up. Then when you think you have fixed that, more strange float things happen....
We were struggling with it at the weekend for a small site we were working on. In the end we figured out what IE was doing, and you can compensate, but it's a really terrible browser. If I hadn't have been sucessful at home, I wouldn't have attempted to do what I did at work - however, even forewarned IE is still CRAP!
Re:IE Box Model...
Dom2 on 2004-02-25T19:58:52
I've got the Eric Meyer book and it's really very good. Reccomended. It really opened my eyes to what you can acheive in CSS.-Dom
Re:IE Box Model...
brianiac on 2004-02-25T17:12:11
I tend to prefer to exploit the CSS-BE support in IE to spoon-feed it special instructions:.class
{
width: 300px;
width: expression( '400px' );
}Re:IE Box Model...
ajt on 2004-02-25T18:36:46
Not seen that. Normally I force IE6 into standards mode, and I either don't care about older broken IEs, or use the infamous Tantek Hack.
FONT tags and friends, into CSS — even though somewhat buggy.
I really ought to look into the upgrades.
Re:Cleaning up HTML...
ajt on 2004-02-25T18:28:03
Tidy is pretty good at fixing bad HTML, as is libxml2, however they are no good at at de DreamMangling a page, for that you have to do it by hand. However, that job is now done!
Both tidylib and libxml2 can be used from within Perl, so they are also great for on the fly HTML cleaning too. If only it was possible to on the fly upgrade IE users to Firefox or Opera.....
Re:IE? IE who?
ajt on 2004-02-25T22:09:38
I had forgotten how old HTML4.0 is. What is even worse is that MS co-wrote the damn thing, and you would think that in seven years they would have enough time to actually adhere to the specification they helped to write!
As I said previously, this is ignoring all the other things wrong with IE!
<style type="text/css" title="whatever">@import "full_sheet_url" all;</style>
That "all" there is legal CSS 2, implemented in Firefox, but unimplemented in IE, so IE just ignores the whole statement as far as I can tell. Folks, let me know if this idiom doesn't quite work for you -- I just stumbled on it the other day.
Re:IE hell
ajt on 2004-02-26T08:48:24
Another new trick. I suppose it's a generation on from the original
@importhack to protect Netscape 4 and IE 4 from their own failings. Obviously I'd have to check that with recent Opera and khtml based browsers too, but it's another weapon in the armoury.In my case I still have to find out why IE is breaking (float bug I think) and do things to the style sheet to workaround the defect.
The IE Factor, money paragraphs quoted here.
Such is often the case when designing with CSS. When working with semi-complex layouts, I frequently encounter challenges that end up slowing me down. I’m getting familiar with these road blocks, and can often predict where I’ll find them. Having patience, or knowing what to try to get around them prevents head from going through monitor.
Without a doubt, the biggest challenge I encounter each time is in wrangling Microsoft’s Internet Explorer browser. This devil does not play fair. It often follows no rules, and its behavior defies all common logic. It will double margins for no apparent reason. Borders disappear, 62 pixels magically turn into 143 pixels. It dodges left when other browsers go right. I’ve decided to call this phenomenon “the IE Factor”. (Those familiar with authoring DHTML four or five years ago already know where I’m headed with this.)
Re:Web Designers Call This "The IE Factor"
ajt on 2004-02-28T11:42:38
I know the feeling totally. IE is so variably buggy, yet so dominant in the market place. IE is probably the biggest impediment to clean modern web design. As Microsoft has officially stated that there will be no major change to IE until Longhorn, it looks like web design will be held back in the 1990s for another few years, or everyone will try a better browser - there are plenty to choose from...