David
16th Jul 2004, 10:29 pm
They say that you can't teach an old dog new tricks and just recently I'm beginning to appreciate the veracity of that particular saying.
Now, I'm an open minded sort of person and I have a natural curiosity for all things new. I'm also never happier than when I'm learning new skills. None of this, however, is any help when approaching that most vexed of topics: CSS layout.
I am convinced of the fact that CSS is the right way forward for the page layout of web pages and I will even concede that tables were just a convenient interloper - a handy tool that never was designed for that purpose.
I have a number of web design projects on at the moment and one of them is a very simple site for a friend of mine who wants to advertise a house in Italy. That's just background. I decided that it would be a good idea to work this site up entirely with CSS - it's a simple site - can't be THAT difficult.
I start from first principles and I design a simple layout:
http://www.websitearchitecture.co.uk/watson/postimages/limoni/page.gif
...and here's the relevant CSS:
#wrapper {
width:80%;
position:relative;
background-color:#DAEDFF;
border:2px solid #466C91;
margin:2em auto 2em auto;
padding:8em 2em 2em 2em;
}
#head {
position:relative;
width:100%;
float:both;
}
#content {
position:relative;
float:right;
width:auto;
}
#nav *{
position:relative;
float:left;
width:100px;
}
.title {
padding-bottom:2em;
}
It all looks perfectly logical. Here's the relevant HTML:
<body>
<div id="wrapper">
<div id"head">
* <img src="images/title.gif" width="290" height="33" alt="" class="title" />
</div>
* <div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="gallery.html">Photo Gallery</a></li>
</ul>
* </div>
* <div id="content">
<p>The hamlet of Montefiorile is in the heart of the Tuscan hills, surrounded by woods, olive groves and Chianti Classico vineyards which provide the wonderful foods and wines of the area. Scenic walks in the woods can be followed by a refreshing swim in the hamlet’s pool.</p>
* </div>
</div>
</body>
So far, everything is looking fine and dandy. The page previews correctly in Dreamweaver and IE displays the page just as you would expect given the clear and logical code:
http://www.websitearchitecture.co.uk/watson/postimages/limoni/ie.jpg
"Hey, this CSS layout stuff is fantastic", I'm thinking to myself, "so much better than tables - so much more control".
And then, "Hmm, I wonder what it looks like in Moz?"
http://www.websitearchitecture.co.uk/watson/postimages/limoni/moz.jpg
"Oh dear - I spoke too soon. Ah, but Opera..."
http://www.websitearchitecture.co.uk/watson/postimages/limoni/opera.jpg
I don't have an emoticon for crying - I looked for one and I'm going to get one soon because I'm going to need it.
Now, we've had this argument before. I say, "IE just does what you want, it's logical and it's forgiving - the kind of browser you wouldn't mind taking down the pub on a Friday evening." And Francis says, "Ah, yes but it's wrong - it's no use having friends who flatter you, you need friends who tell you the truth!" - or was that my Mum?
Anyway, you can't tell me that in this particular case, IE is wrong. The code is simple and logical - by-the-book even. And IE just does what it says on the tin. But Moz is that "sign everything in triplicate" sort of friend, the stickler - the one that gives you a tin of pink paint when you asked for green just because the label was incorrectly printed.
I feel you are sensing my frustration.
Needless to say, a table layout version of the same page looked identical in all 3 browsers. So, I have 3 options:
1. Stick with tables (give in and avoid the whole object of the exercise)
2. Stick with what I've got (IE looks fine so f*** the others)
3. Or spend days tweaking, trawling through forums and generally beating myself up about it.
Hmm, tough choice.
Now, I'm an open minded sort of person and I have a natural curiosity for all things new. I'm also never happier than when I'm learning new skills. None of this, however, is any help when approaching that most vexed of topics: CSS layout.
I am convinced of the fact that CSS is the right way forward for the page layout of web pages and I will even concede that tables were just a convenient interloper - a handy tool that never was designed for that purpose.
I have a number of web design projects on at the moment and one of them is a very simple site for a friend of mine who wants to advertise a house in Italy. That's just background. I decided that it would be a good idea to work this site up entirely with CSS - it's a simple site - can't be THAT difficult.
I start from first principles and I design a simple layout:
http://www.websitearchitecture.co.uk/watson/postimages/limoni/page.gif
...and here's the relevant CSS:
#wrapper {
width:80%;
position:relative;
background-color:#DAEDFF;
border:2px solid #466C91;
margin:2em auto 2em auto;
padding:8em 2em 2em 2em;
}
#head {
position:relative;
width:100%;
float:both;
}
#content {
position:relative;
float:right;
width:auto;
}
#nav *{
position:relative;
float:left;
width:100px;
}
.title {
padding-bottom:2em;
}
It all looks perfectly logical. Here's the relevant HTML:
<body>
<div id="wrapper">
<div id"head">
* <img src="images/title.gif" width="290" height="33" alt="" class="title" />
</div>
* <div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="gallery.html">Photo Gallery</a></li>
</ul>
* </div>
* <div id="content">
<p>The hamlet of Montefiorile is in the heart of the Tuscan hills, surrounded by woods, olive groves and Chianti Classico vineyards which provide the wonderful foods and wines of the area. Scenic walks in the woods can be followed by a refreshing swim in the hamlet’s pool.</p>
* </div>
</div>
</body>
So far, everything is looking fine and dandy. The page previews correctly in Dreamweaver and IE displays the page just as you would expect given the clear and logical code:
http://www.websitearchitecture.co.uk/watson/postimages/limoni/ie.jpg
"Hey, this CSS layout stuff is fantastic", I'm thinking to myself, "so much better than tables - so much more control".
And then, "Hmm, I wonder what it looks like in Moz?"
http://www.websitearchitecture.co.uk/watson/postimages/limoni/moz.jpg
"Oh dear - I spoke too soon. Ah, but Opera..."
http://www.websitearchitecture.co.uk/watson/postimages/limoni/opera.jpg
I don't have an emoticon for crying - I looked for one and I'm going to get one soon because I'm going to need it.
Now, we've had this argument before. I say, "IE just does what you want, it's logical and it's forgiving - the kind of browser you wouldn't mind taking down the pub on a Friday evening." And Francis says, "Ah, yes but it's wrong - it's no use having friends who flatter you, you need friends who tell you the truth!" - or was that my Mum?
Anyway, you can't tell me that in this particular case, IE is wrong. The code is simple and logical - by-the-book even. And IE just does what it says on the tin. But Moz is that "sign everything in triplicate" sort of friend, the stickler - the one that gives you a tin of pink paint when you asked for green just because the label was incorrectly printed.
I feel you are sensing my frustration.
Needless to say, a table layout version of the same page looked identical in all 3 browsers. So, I have 3 options:
1. Stick with tables (give in and avoid the whole object of the exercise)
2. Stick with what I've got (IE looks fine so f*** the others)
3. Or spend days tweaking, trawling through forums and generally beating myself up about it.
Hmm, tough choice.