Problem with tables in Firefox

[Demonolith]

I'm guessing this is a pretty common problem, but for some strange reason I'm getting more space between a header and some text in a webpage.

I'm using tables.

http://www.epd-qs-solutions.com/contactus3.htm

The problem shows itself in Firefox but it appears as I want it to in Internet Explorer.

Thanks for taking the time to read this!

Niall

[Snookerman]

You should never use tables for layout, take a look at this article:
http://hotdesign.com/seybold/everything.html

However, you problem is because of the <h1> tag since it has different margin values in different browsers. Try adding this to your css:

h1 {
margin: 0;
}

Good luck!

[Twey]

Better, start your stylesheet with a

* {
  padding: 0;
  margin: 0;
}

and set them all manually.

[Snookerman]

@Twey - Yeah, I used to think so too, but I looked into that a bit and it turns out hard resets can screw up form elements, take a look at this thread:
http://www.dynamicdrive.com/forums/showthread.php?t=40542
If you don't have any form elements though I think it's just fine.

@Demonolith - I suggest you also take a look at that thread since there are some links to css resets which get rid of the different margins and paddings that browsers have. You might not need everything but it should be helpful.

Good luck!

[Twey]

I've never encountered this, I have to say. Either way, it's easy to add padding/margins back in explicitly for those elements if one does come across them.

[Demonolith]

Thanks for the help. In the end I had to redesign the layout a little. Still with tables though, I'm still not confident enough to make the leap to CSS but I'm working on it, I'll have a read through the link you posted.

Kind of off topic, but what do you think of the layout of the page (despite the bad habit of using tables)?

Can you please mark this thread as Resolved Twey (the option to isn't there for me)?

Niall

[Snookerman]

You're welcome, glad to help! You can go to your first post in this thread, click then click Go Advanced and add the Resolved prefix to the thread title. The edit button does disappear sometimes though, but the mods will fix it for you in that case.

Regarding the layout: I think it looks nice, just one tip: you can use more space if you want since most users nowadays have larger screens. Of course, this depends on the audience you are targeting. To check what screen sizes your users have I suggest Google analytics. Here's a good tutorial to get you started:
http://css-tricks.com/video-screencasts/31-introduction-to-google-analytics/

Good luck with your site!

[Demonolith]

Cheers for the positive feedback , this was a site I'd started about a year ago. I've been asked to create a site for another client and I'll try to steer away from using tables in favour of CSS on it.

[Twey]

The layout looks broken to me: http://i41.tinypic.com/smdlj5.png. Additionally, it uses pseudo-XHTML Transitional and also doesn't validate (switch to HTML Strict and use the validator during development to make sure your markup isn't broken), and I hate the images you've used — they make me think of mucus or something equally unpleasant.

It does scale well with different font sizes, though.

[Snookerman]

@Twey - What browser are you using? I tested it in Fx3, IE6-8, Op9.63 and Chrome and it was fine in all. I'm on win xp.

@Demonolith - Read the article Twey posted, it's very important information for any web designer.