3 CSS Issues, including a float problem in IE6

Hi,

I have been working my way through the awesome 'Beginning CSS Web Development' by Simon Collison (highly recommended). I have also been studying and using other recourses online too. I am now toying with CSS and have created the following test page:

http://www.consumer-review.org.uk/test_lorum_ipsum.html

I am pretty happy with it in Firefox 2. However problems are:

1) In IE6 the two floating elements don't appear where they should - they jump around the page and sometimes the content of them doesn't appear at all! Is there a simple code fix for this?

2) In Firefox 2 the links in the footer don't seem to be accessible, the pointer icon simply doesn't change to allow you to click!

3) In IE7 the titles/anchors that you jump to from the top of the page don't highlight. They do in Firefox! Is is possible for IE7 to highlight?

I have been playing with this page for ages, there is probably plenty of redundant / clumsy code in the CSS sheet. Apologies for that - will neaten up when understand a bit more! I will also speed up the page loading.

Thanks for any code suggestions / advice / assistance anyone can give.

Kind regards

Theo.

Hi Theo:
The first issue I see is with the #top div. The image is 100% width but it is not filling up the area needed in #liquid-round1 . (Problem in IE6) I would suggest you change those to a specific pixel width.

It's also possible that the .centercontent div is popping out the right margin on the #liquid-round1 because you do not have a width specified for that either. It's difficult for me to say exactly because very few widths are actually specified so I don't know which is correct and which is incorrect.

As far as the top links (anchors) not hovering in IE7, I believe it is because you have some css in the head portion of the code. Those will get priority over the other css in the external style sheet. So either delete those in the head or restyle them.

The footer links are working in FF2. Maybe you need to clear your cache or something? Perhaps I misread the question. But I see a pink hover on the footer links and they clicked just fine.

I saved the best for last... the floating boxes.
Again, I believe it's the % you used for width. Since you have .center-content in another place, you will have to rename that div so it's a different size as the big one above. Here is a tutorial that might help you sort those floated boxes.

Did I miss anything?

Edit: Check the validation here.. you have a few other issues that might be causing your grief.