CSS/Divs and Firefox problems

[Gibson98]

Hi,

I am putting together a site for someone but have run into a few problems

The web address is epictmedia.com and here are the problems i'm having:

If you look at the webpage in firefox you can see that the text is overlapping the white cell box and also there is a little thin grey line list above the white cell box and welcome image.

If i view this in IE 6 and 7 it appears ok.

Please could someone tell me what im doing wrong

Any help would be fantastic!
Many thanks
Joe

[Centauri]

"This site is down for maintenance."

...................................

[Gibson98]

Hi,

Sorry about that! should be back up :)

Many thanks
Joe

[Kravvitz]

1) The first step in debugging should always be making sure that your code is valid.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

2) Two things are causing that.

2a) That mysterious gap under images and embedded objects (http://garyblue.port5.com/webdev/object-gap.html)
Images, Tables, and Mysterious Gaps (http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps)

2b) Many elements have default padding and/or margins and browsers differ on their defaults for these.
I recommend that you read No Margin For Error (http://www.search-this.com/2007/03/12/no-margin-for-error/) and Starting with CSS: revisited (http://kurafire.net/log/archive/2005/07/26/starting-css-revisited).

3) I suggest you learn how semantics apply to X/HTML. (http://www.dynamicsitesolutions.com/html/semantic-markup/) Semantics is really a very important subject when it comes to X/HTML.

[Gibson98]

Hi,

Thanks alot i shall validate it all etc and then come back if I have the same problem :)

Cheers
Joe

[Centauri]

Agree with Kravvitz on all points, although I would reverse the order of points 2 and 3...

[Kravvitz]

@Gibson98 You're welcome :)

@Centauri I'm under the impression that some people don't read my whole post if they don't think I'm actually addressing their question. :( There are so many people who want web pages that "just work" no matter how many problems the pages have.

[Gibson98]

Hey again!

I have done what you have said the validation solved alot of the problems so thanks alot :)

Heres the funny thing though...Its workng fine in firefox now but not IE lol and advice for that or is it just a matter of fiddling?

Many thanks again!
Joe

[Gibson98]

Hey again,

No worries i have sorted the problem!

Thanks alot for all your help though
Many thanks
Joe

[Centauri]

You should be able to remove the nested tables completely from the content area, leaving behind the content and divs, and this should fix the side breakout of the content border - the tables appear to be doing nothing, and are definitely not useful here.

Block display on the images in the left side panel will probably get rid of the gaps.

[Gibson98]

Hi,

Yeah i wish i could but they are part of the CMS program im using lol! thats my next task lol

Anyway thanks alot :)

More questions to ask about buttons but ill start another post!

Cheers
Joe