Debugging Help

First post! Ya...

Hi,

I would class myself as a beginer and am at the debugging phase of our club web site, Testing Server, there are three main issues I can't get my head around.

1. #bodywrapper, has a height of 100%, so why is it not filling the page (Safari, Firefox), it works if I define a height in pixels, but i don't really want to do that as the content may need to be higher the specified height.
2. h2 is not applied when viewed through a browser (All browsers).
3. p.footer is not applied when veiwed through a browser (All browsers).

This image gives an idea of how it looks in Dreaweaver CS3, and what I am aiming for in all browsers.

Picture_1.jpg

Also, any advise on anything to do with the site would be very welcome, especially tips for improving my CSS skills. I seem to have most problems with IE, so de-bugging tips would help enormously.

Thanks in advance

1. You may be running into problems of uncleared floats. This is a common reason for content to "spill out" of the container (where the background is). This can be fixed by adding the CSS "clear: both" to the last element in your box.

To start with, validate your code. You have 20 errors. The error messages can be quite intimidating; ask here for help if you don't know how to fix them.


2. & 3. Perhaps you're overriding the styles with another rule.

Note that Dreamweaver offers only a preview, and not a particularly good one. What matters is how your website looks/functions in browsers.

Hi,

I've been working on this since yesterday and I have got the error's down to two which I just can't get my head around, can you offer any advise?

I still have the layout issues I originally had, I have tried various things to get it to work but without joy, any advise would be gratefully received right now as it's starting to drive me nut's!!

The 2 errors are quite simple ... just add an alt attribute with alternate text for the image (VERY short description)

As for the layout issues

1- Remove the display: block on #pagewrapper

2- add overflow: hidden; to #bodywrapper - see the FAQ from the Creative Coding : I have a wrapper and 2 floating divs but my border from my wrapper doesn't "wrap" around the floating div?

Note that you should use empty alt text for purely decorative images: alt=""

For instance, blind people don't want to hear, "picture of a sunset" or "picture of a confident businesswoman", when they are on a site that sells cars.