Prototype and help!

[David]

After much hacking and tweaking, I now have a prototype page for the new CADTutor design. The page layout is based on Skidoo Too with some additions and quite a few omissions. It looks identical in Firefox and Opera and is only marginally different (can you spot it?) in IE. The original Skidoo Too included some non-compliant CSS hacks, which I've removed as I thought compliance was more important than pixel perfection.

Any comments on the layout, colour scheme, navigation function etc. would be greatly received.

Help&#33; because I have a nice border-bottom for <h1> that displays in Firefox and Opera but doesn&#39;t display in IE. I just can&#39;t work out why because I&#39;ve used the exact same code on other projects and it&#39;s worked fine. There must be some weird interaction going on - but what is it?

http://www.watest.co.uk/cadtutor/links/

[francis]

Did you get this sorted? Have you tried removing the word medium from the style declaration and replacing it with a numerical value? &#39;Medium&#39; is valid CSS but maybe it&#39;s an IE thing - I must admit that I&#39;ve never seen it before, so maybe it&#39;s not used because doesn&#39;t work. If it&#39;s not that, I&#39;ll have another go.

I&#39;m liking the colour scheme and layout which also works in Safari.

[David]

Thanks for that Francis, I don&#39;t have a Mac so I hadn&#39;t tested on Safari.

The underline thing is weird. Makes no difference whether I use "medium" or "3px". I used exactly the same CSS on the Websitearchitecture site and it worked fine. There must be some interaction with something else going on. The problem is only with IE. Opera and Firefox render as expected.

[David]

Even more weird. I just added another <h1> tag to the same page, same container. The second one renders correctly (as per the CSS) but the first one does not. Font-family and font-color are being rendered but the colours are not being applead to the background or the border although the border does create the space.

[David]

OK - I have a solution.

The problem is the result of a render bug in IE6 and happens when a spacer div with a clear attribute is used below floating divs (as in the Skidoo Too layout). The solution is to add position: relative; to the declaration for headings and all is well.

See this evolt article for details.

[francis]

Spacer/clearing divs - so old fashioned&#33; Seriously, have a look at this article on PIE about clearing without using structural markup - it&#39;s rather fine and works well.

[David]

All very clever but it seems to me that this sort of workaround (and the required hack) are built on sand. What happens when render engines are updated and become more compliant? The whole house of cards falls down. I want a site that will be as future-proof as possible, not one that demonstrates how clever I am with current browsers. OK, the structural markup is wrong (theoretically) but it&#39;s a massive improvement over tables etc.

I think I&#39;ll be sticking with those clearing divs for now. I do sometimes wonder whether those CSS geeks oughtn&#39;t just pull their head out of their arses and get pragmatic for a change. Oh, did I really say that?

More importantly, I want code that I will understand when I come back to it in 2 years time.

[francis]

The standards compliant way (using CSS generated content to force a block level clearing element onto the page) will stand you in good stead for years as IE7 apparently won&#39;t have CSS generated content (ggrr). So, that&#39;ll be IE7.5/8, then - another 2/3/4/5 years along... The IE fixes will be fine - if you&#39;re worried about them, just use Conditional Comments, which is what MS want as all to do as of now as a way of filtering out IE hacks. Just set the comment to [lteIE 6] and pull in the CSS.

As for code you can understand - I just comment it with stuff like:

/* IE double margin hack, see PIE */ - I know what the hack is, and on what site the fix is listed on.

[David]

Of course, I know you are right Francis but it seems to me that pointing the finger at clearing divs is a bit weird when, in fact there are lots of divs in most layouts whose only function is to keep other divs in place. In many layouts, content is often nested 3 divs deep. Bottom line: CSS2 does not adequately allow the composition of page layouts. In a perfect world, there would be one div per content area, just like (dare I say it) table cells.

[David]

OK, that&#39;s it&#33; I&#39;ve now spent much too long tweaking and sculpting this. So, I&#39;d be very grateful for any final comments before I deploy it.

It&#39;s almost pixel perfect between IE and Firefox. I can&#39;t work out why FF has more space above the topnav than IE and I can&#39;t work out why IE has more space below the search button than FF but I&#39;m prepared to put up with that.

Thanks