Doing HTML and CSS – What I have learnt today (and a bit before)

I am working so hard on getting the new Travel Generation website ready for the guys to put the travel planner into. Because it is my pet project I am determined to do as much of the HTML and CSS preparation as possible – and also because Mat who normally specialises in our front-end stuff is extremely busy at the moment that I don’t dare distract him. So it is with that spirit of intrepidness that i have today sorted out a number of little annoyances with regard to cross browser HTML and CSS that i had to search the web for and felt that getting the answer was not that easy. Even then I might have the answer wrong as I have dragged some of them kicking and screaming from old forum posts or difficult to read technical blogs. The biggest achievements for me today has been sorting out how to make a site look good in Internet Explorer as well as Firefox, Safari (and therefore Chrome as they use the same rules) and Opera. The reason I have this trouble is because I use a Mac and I don’t run a Windows operating system on it through any emulator or parallels etc. So I do all my HTML/CSS in Firefox and then when I finally look at it in IE it is a mess. Here some rules that might go a little way to helping avert this – they have for me.

Firstly, it was well over 18 months ago that Michael Gall kindly pointed out to me the importance of always trying to apply a style to the most mast element. Living by this rule has made an enormous difference to how everything renders when I start to compare it cross-browser. By this I mean, say you have the following typical web page structure:

<div id=”overall”>

<div id=”header>

Header stuff like logo etc in here

</div>

<div id=”mainContent”>

Content stuff in here

</div>

<div id=”footer”>

</div>

</div>

Until I learned the golden rule of putting the styling on the most master element you could easily have found that I would have put a left and right margin on the header, mainContent and footer divs in order to get them all to sit in on a page. If I say had a border round the overall page and then an internal spacing of say 20px I inadvertently could have been found to put margins on the internal divs to get this spacing. What I now completely understand is that if I simply added padding to the outside overall div the internal divs would be moved away from the border by the desired 20px without any need to put any spacing style on the outside of those three internal blocks of content.

It seems pretty pointless to even highlight this here – but once your page gets much more complex it really makes a very big difference that you are not changing multiple lines of CSS – in fact you don’t even have multiple lines of CSS – and everything lines up nicely. Also, something that seems to take quite awhile to sink in – is that adding padding to an element in fact increases that elements size. If you want you whole page – your overall div – to be 950px wide and you add a left and right padding of 10px, you need to set your overall div width as 930px. The measurement of an element is taken from the inside where the content actually starts.

Another thing that I have become a religious fanatic for (and it has really paid dividends to) use the validator for your HTML and CSS provided by W3C.org; that is the World Wide Web Consortium – who are responsible for developing and encouraging web browser to apply to web standards. At http://validator.w3c.org you can type in your URL or upload the page directly from your computer and find out if you are using standards specific HTML/CSS. This does not necessarily mean that your site will look good in all browsers (IE in particular is poor at keeping to web standard specifications in the way code is rendered) – but it does set you in good stead and I have found that it picks up mistakes as you go – such as leaving divs open or a good one for me is not applying a width to a floating element. If you can sort out all the silly mistakes before you start comparing the site across many browsers you are starting one step ahead and you will not end up spending time scratching your head about the browser rules when in fact it was simply messy code creating your problems.

Another good rule is only set an elements position as absolute if it is within an element that has set height. Once again saves a hell of an unnecessary mess with margins and padding.

But the biggest hurdle I think I have overcome so far today has been learning how to tell IE to consider a second CSS file as well as your primary one. To make IE consider an another CSS file the following lines can be inserted in between the <head></head> tags of your page:

<!–[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”stylesIE.css” />
<![endif]–>

<!–[if IE 7]>
<link rel=”stylesheet” type=”text/css” href=”stylesIE.css” />
<![endif]–>

I am sure there is a shortcut in which you don’t need to put both rules – but I could not find one that I could make work. The reason for doing the extra CSS file is too add all the extra lines of CSS needed to make the site look right in IE (or remove lines as the case may be). I have simply adding extra lines of detail where I needed them to augment my main CSS file. In particular, I have added a number of lines for different coloured <a> tags. In the design I have been working on there are different menus throughout the page and they are not all the same colour. In Firefox etc I simply used the inherit style to add the colour of the content that they link was working in. This worked an absolute treat within my design. However, the inherit style is not recognised in IE so I have had to go through the whole page adding the appropriate colour to each link or section of links in the separate IE CSS. Unfortunately, once you do this you will also have to add separate a:hover styles for each link within particular ids or classes. By doing this in a separate style sheet I was able to keep my very easy to use very clear, everything on the master element, style sheet for all browsers and add a handful of lines of code to my IE only style sheet that likewise is easy to update.

Finally, from what I have trawled through I understand that the hover attribute added to any element is only valid if the doctype is set to strict. I think most of the sites I have butchered before Mat has come and cleaned them up I set the doctype to transitional which gives me a little more forgiveness for some errors and ignorance. Nonetheless, I have discovered that writing HTML/CSS to “strict” web standards has not been that great a deal and is perhaps why when I started debugging cross browser there was really no issues – it has all been a relatively painless process.

So, I know this is a very abnormally geeky post for me and for most of you who can see right through my thin veil of pretending to be more than just a hack I apologise – but I do hope you appreciate that i am actually quite proud of the code i have written this time. The main page is by no means small or uncomplicated and while I have done the CSS and HTML for many Xebidy (and before) websites it has always taken a number of hours for the real-developers to make them work cross-browser. Today it took me less than an hour to sort out the new Travel Generation site in IE and I attribute that to my new found pedantic approach to the “Gally master element rule”.