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 (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 (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)? (http://www.epd-qs-solutions.com/contactus.htm)

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 http://www.dynamicdrive.com/forums/images/buttons/edit.gif 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 (http://www.google.com/analytics/sv-SE/#utm_source=se-ha-sv-google_brand_goog_analytics&utm_medium=ha&utm_campaign=sv&utm_term=google+analytics). Here's a good tutorial to get you started:
http://css-tricks.com/video-screencasts/31-introduction-to-google-analytics/ (http://css-tricks.com/video-screencasts/31-introduction-to-google-analytics/)

Good luck with your site!

[Demonolith]

Cheers for the positive feedback :D, 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 (http://www.webdevout.net/articles/beware-of-xhtml) Transitional and also doesn't validate (http://validator.w3.org/check?uri=http%3a%2f%2fwww.epd-qs-solutions.com%2fcontactus.htm) (switch to HTML Strict and use the validator (http://validator.w3.org/) 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 (http://www.webdevout.net/articles/beware-of-xhtml) Twey posted, it's very important information for any web designer.

[Twey]

Fx3.0.5. I think it's a resolution thing rather than a browser issue — I get the same result in Opera. I'm running at 1600×1200.

[Snookerman]

Interesting, I didn't know the resolution could affect the page. Are you sure it's not because of your custom scrollbars?

[Twey]

I don't have custom scrollbars.

[bluewalrus]

Too snookerman's statement of using Google analytics that's more specific to your users and I would recommend it but for simple breakdown of where all web users are you can go here http://www.w3schools.com/browsers/browsers_display.asp .

[Twey]

That's hardly 'all web users' — it's collected from W3Schools' log files, so it's specific to W3Schools' clients.

[bluewalrus]

Oo. Didn't know that, although I did find it hard that they could find all users info.

[Twey]

It's garnered by Javascript, which means that they don't account for non-JS users. Additionally, knowing the quality of code and information that comes out of W3Schools, I wouldn't be surprised if their scripts were less than reliable.