As the orders on the hosting side of work have been down the last fortnight, we’ve decided to take action and revamp one of our two web site hosting sites.
Well, I’ve ended up revamping it as the version done by a co-worker wasn’t quite -erm- I’m not sure, it just didn’t have the “umpf” factor. Anyway, after 10 hours of work I’ve completed it. It’s 95% CSS, XHTML Transitional and it looks quite good (in Internet Explorer and Mozilla!). It was a bit difficult getting things just right due to the various bugs in Internet Explorer: whenever you design a website, remember the following:
Put the DOCTYPE in the page FIRST! If you don’t have one in, Internet Explorer runs in “buggy” mode, put one in and it then changes the rendering model to be closer to the standard as used by Mozilla – but it’ll change how the site looks.
Be careful of “Float”. I’ve used the CSS float: setting to get some of the page positioning just right, but depending if it’s used or not effects how the elements render on the page (adding it double the size of some of the menus I was using it one). Totally unexpected, and probably another Internet Explorer bug.
Page sizes differ in browsers. I’ve set the width of the “main section” of the page to 100%: in Internet Explorer, it looks good and it fills 100% of the browser window (as expected). In Mozilla, however, it seems to fill 101% so you’ve got a very very tiny horizontal scroll area.
DIV and SPAN are different. Yeah, yeah – use “DIV” for divisions of the page (it automatically inserts linebreaks) and use SPAN for “inline” sections. However, the differences go deeper then that – the “width” setting doesn’t seem to work correctly on Spans and there are a few other differences.
Oh well, it’s all done now and I’ve sent the URL of the test site to my co-workers for their comments: fingers crossed!