The middle section is absolutely placed so if I close my browser window smaller the content overlaps the left column and proceeds to disappear off the left side of the monitor and is unreachable even via scrollbar. Very few users have their browsers maximised at all times. there is also a massive gap in the middle of the page for some reason.
That is the purpose of my current excercise. If you think the page you looked at is bad, you should have seen the rubbish with which I started. :eek:
We all have to start somewhere so don't take the comments to heart
The challenge I've got here is: how do I learn to do it properly? I've gone through several online "courses" and have gone through a number of books on css and xhtml. The problem with this, is that it lacks interaction. When I don't quite understand a detail (or worse, when I THINK I understand it, but have got it wrong) I am reduced to trial and error. Any thoughts on this will be greatly appreciated.
Yes, it can be hard to sift through everything you need when you get started and you will make many mistakes along the way but trial and error and patience are all virtues as well as listening to what others may say.
You seem to be hung up on xhtml for some reason when in fact its a non issue here because you are not using real xhtml anyway but pretend xhtml which is basically just html as pointed out by other sabove. You don't need real xhtml for web pages unless you are doing advanced things as mentioned in the link Ralph posted. I've never used real xhtml and I build 2 or 3 site templates a week.
You can use the xhtml doctupe but you will be serving it as text/html. That's why I still stick with html4.01 because I don't need to pretend its xhtml.
The doctype will have nothing to do with your issues apart form the validity of the tags that you use inside. If you have a valid doctype (strict or transitional) then the page will render in standards mode (or almost standards mode for some browsers when using transitional). There are very minor differences between the rendering of strict and transitional but most would not notice them. The main difference is that in transitional you can use the deprecated tags and attributes I mentioned above.
If you don't have a doctype at all or have a broken doctype then your page will render in quirks mode and the display will be vastly different in IE.
This is the new testpage xhtml-page
Again, I am not seeing a difference in IE. What is it that you see is wrong in IE and right in other browers?
However, until you make the page valid (110 errors) you can't really start to bug hunt because invalid code is handled differently by browsers anyway so you need to rectify that first.
Don't use breaks to make space as that is not what they are for. Breaks are for creating line-breaks in things like addresses, poems, form controls etc and not just to make space or paragraphs. Breaks are also invalid as direct children of the body anyway.
If you have a long list of links then use a list.
Don't make the anchor text bigger on hover as that makes the whole page jump and I wouldn't be surprised if it caused epileptic fits as it is very disconcerting and again virtually unusable as the text jumps out of the way and you lose your place.
Look at using a max-width as the page is too wide on my 27" mac and unreadable. Use a suitable max-width with a margin:auto to center the content.
Don't use spans when you should have used a p element. Spans are for inline fragments and again can't be direct children of the body. Use html appropriately with logical heading structure, p elements for paragraphs and phrases. List for lists etc. usually there is an appropriate html element for the job concerned and when none fits the purpose a generic div can be used for block elements and then span for inline elements.
Hope that helps