Forum Moderators: not2easy
If you missed the first post, then it can be found here [webmasterworld.com]
Well, after all the excitement of the first day it became glaringly obvious that I was going to get transfixed by this CSS stuff, in exactly the same fashion as I had been caught up by this web design business.
It looks like Stickys next step is actually diving into the CSS page template
Spot on!
The CSS Page Template ;)
Time to get your hands dirty
So then, I'd got a general idea of how I wanted my site to look and (more importantly,) feel from the sketches I had drawn - and, from reading a few articles, I had soon realised that what I wanted to do (and a heck of a lot more) was possible using CSS.
I had decided to start right at the very beginning. Even though I had touched on CSS in the past - to style fonts and the-like, I thought it best to pretend I knew absolutely nothing about CSS - which, to be honest, wasn't far from the truth anyway. So, with a copy of Dave Raggett's Introduction to CSS [w3.org] open I began to read and learn.
First things first, from reading many posts on WebmasterWorld, it became obvious that whatever I was going to do with my stylesheet, it was a good idea to make all the code in an external 'script' - so I needed to find out how to include a link in my documents to this script. Nice and easy this bit:
<link type="text/css" rel="stylesheet" href="stylesheet.css">
This way, if I wanted to change the design of my site at a later date, I would only have to change the 1 stylesheet, instead of changing all the values in the individual pages! Cool!
So, now I had the link to my uber cool stylesheet, I just had the small matter of writing said uber cool stylesheet.
At this point I decided to try and get some sort of list of "commands" or "functions" that CSS used to try and help me along my way. I found this one [glassdog.com] which is also printer friendly too. It outlines the major definitions used in CSS, what they do and even better - just how to use them! A quick press of the print button and we had ourselves the start of our stylesheet! As a sidenote, if you know of a better one than this, then please let me know. Thanks
Now, I forget who said this in past but I read somewhere that great web designers design their own code. The best - copy and adapt that code. Not sure if I totally agree on this point, but for the sake of learning, it really is the best method. See what someone else has done, copy and paste it, then play around with it until you've got something you like!
I had decided that for my site it was going to be best to have a 3-column layout with a row at the top, spanning the three columns.
Oh look [glish.com], a template for a three column page designed entirely with cross browser (or almost) CSS goodness! A little CTRL-C and a CTRL-V later and we had ourselves some columns. It's really important here to stress that you shouldn't just go off, copy someone's design, alter it slightly and be happy with your end product. By all means copy the code and adjust it to suit your means, but READ the code - and UNDERSTAND it. This way you'll LEARN from what you're doing, and be able to write your OWN code in the future which somebody else will want to copy one day! </preaching>
In the past, I had never really cared for cross-browser compatibility. I know! Heracy! But the majority of my sites were being viewed on a university campus where just about every machine has MSIE 5.5 installed and no one bothers using other browsers - so I hadn't really needed to. However, this new site was going to be put in a wider domain and so I had to seriously think about writing my code carefully so that it looked "good" in as many browsers as possible.
You'll notice from that 3-column template link above that in MSIE the borders aren't quite lined up properly, although in Opera and Netscape they are. So this was my first hurdle. My name's Richard. Apparently, one of the things about us Richard's is that we're perfectionists - so very true. Even though it was only 1 pixel out, I still wanted to find out why it was all good in Opera/Netscape and all-not-so-good in MSIE.
A quick look at the (well commented) code brought up the following:
IE5x PC mis-implements the box model...
The Box Model. Hmm. I had heard of this. What was it again ... I needed a refresher. A quick trip to the W3.org CSS Box Model page [w3.org] sorted me out and I knew what was going on again now... the comment continues...
...Because of that we sometimes have to perform a little CSS trickery to get pixel-perfect display across browsers. The following bit of code was proposed by Tantek Celik, and it preys upon a CSS parsing bug in IE5x PC that will prematurely close a style rule when it runs into the string "\"}\"". After that string appears in a rule, then, we can override previously set attribute values and only browsers without the parse bug will recognize the new values. So any of the name-value pairs above this comment that we need to override for browsers with correct box-model implementations will be listed below.
I'll be honest, I had to read it about 10 times to understand what was going on, but from what I eventually gathered, MSIE is fairly pants at reading CSS code, whereas other browsers are not-so-pants. We need to write two versions of the same code - one for MSIE and one for the other browsers, but we have to hide the separate bits of code from each other using the string "\"}\"". Please correct me if I'm way off here guys and gals!
All seems well and good then. Now I had to learn how to adjust the width/position by 1pixel. A further reading of the code...
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 201px;
margin-right:201px;
}
html>body #centercontent {
margin-left: 201px;
margin-right:201px;
}
Well, from what I understood, because of the poor implmentation of the box model, the two margin-left: and margin-right: values should be different! So a quick play around (more about trial-and-error later) brought me to this code...
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 200px;
margin-right:200px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-top: 7px;
margin-top: -5px;}
html>body #centercontent {margin-left: 201px;
margin-right:201px;
margin-top: 0px;
}
as you can see, the first instance of margin-left: and margin-right: have been altered from 201px to 200px. Now, if we have a look in our different browsers we should see some perfectly lined up columns! Yay!
You'll also see that in that second bit of code I've added some padding-left: , padding-right: etc etc - a quick look at the box model, and a look at that stylesheet reference link I gave you earlier will help you see what I've done if you don't understand.
Trial and error
Because I never do get it right the first time around
As much as I try to understand (in full) the code I write, sometimes it's a little tricky to visualise what a 1px adjustment will have on the page. I also find it difficult to visualise which margin to adjust if I want things moved in a certain way - something I am hoping will come with experience and will get easier the more code I write. So, instead of sitting there for hours pondering which margin to adjust, I play around with the values in the stylesheet. Adjusting them by small amounts until it looks "right." Then, once I've done that I'll look at the code and try to understand exactly what I've done and why what I've done has altered the appearance. This way even though initially I don't understand what I'm doing, I'll end up with the right result - and eventually understand how I got there :)
Another point I noticed around the "trial and error" area is to do with cross-browser compatibility. As I'm sure you know, different browsers interpret CSS differently - and indeed different versions of CSS differently. This means that unless you are either very very skilled, or just plain lucky, it isn't really possible to have the page look exactly the same in all the different browsers out there. So, after realising that unfortunately I wasn't very very skilled (which didn't take long :) ) I decided that I would have to play around with hacks and work arounds and generally just find a compromise. Even though I'm a Richard - and hence a perfectionist - I'm still open to compromise :)
So, now, I've got the bare bones of my template set up and I've tinkered with it a little. Now we need to really (and to quote my favourite Math teacher) "get on and do" - something which I'll leave for Day 3.
Thoughts? Comments? Ideas? Rants? You know what to do!
Thank you to all who commented in the previous thread [webmasterworld.com] - It's nice to have some encouragement when you first start out on a long journey!
I'm still really enjoying doing this, I hope you are enjoying reading it. Hey! Even if you're not finding what I'm blabbing on about interesting or helpfull, you can always laugh at my bad spelling, punctuation and prose :) hehe
Cheers,
Sticky
You might want to add a media="screen" or media="all" attribute in that link to your stylesheet.
IE5.5 and IE6 will both get the box model correct if you use a proper doctype - so my advice is to forget about the nasty tantek hack and just use a proper doctype that includes the URL.
W3C Valid Doctype list [w3.org]
I personally recommend HTML4.01 Strict.
Great post again stickledene!
To be honest I'm not sure if I should keep putting these updates in new threads or continue them in the original one.
Either way make sure that in the end you have a thread which will have a Summary of your whole progress. Keep up the good work :)
I'll be honest, I had to read it about 10 times to understand what was going on, but from what I eventually gathered, MSIE is fairly pants at reading CSS code, whereas other browsers are not-so-pants. We need to write two versions of the same code - one for MSIE and one for the other browsers, but we have to hide the separate bits of code from each other using the string "\"}\"". Please correct me if I'm way off here guys and gals
Hehe, the Box model hack(s), Yeah I remember that I came across those a couple of times before I understood what that fuss was all about. You are not alone. :)
However after experimenting around with Tantek Celiks BoxModelHack, the Simplified-Box-Model-Hack (SBMH) and the Modified-Simplified-Box-Model-Hack (MSBMH), I draw a conclusion for me that instead of applying messy and unreadable hacks to my stylesheets, I would just try to create designs/layouts where I do not get in the situation of having to need need them. How? Well the problem arises, when you use boxes with fixed widths and margins/paddings. So if you only use one of them at any given time for a single box, you are fine. And in a lot of situations (but not always), I have found that I had some outer element that I could attach the fixed width to, and I just applied the paddings to the (other) inner elements etc.
So yes, you have to be aware and understand the Box Model Problems in WinIE5.x (and a couple newer browsers in quirks mode), but you don't have to use style sheet hacks. IMHO.
I am totally new to CSS so this is really good reading. Keep it up!
