Extra white (background) space around header/logo on Firefox but not IE

I recently made a basic web page for job purposes using dreamweaver 8 (I am a beginner at this). After running into all sorts of problems with the site looking different on different browsers and screen resolutions, I settled on a basic table design: 800px wide logo/header image on top (first row), table width=100%, columns/rows under logo have most text/links in them + one image.

The problem is that I get about 5px extra white space (background) above and below the image on Firefox, but not on Internet Explorer. That is, if I set the top/bottom margins, borders, padding, etc. to 0, then they are 0 on IE, but roughly 5px on Firefox. How can I get rid of the extra space? If impossible, how can I add extra space to IE display without affecting Firefox display, so that the site would look the same on both browsers?

Also: I checked it with a W3C validation tool (no errors), using Dreamweaver's browser compatibility check tool (no issues), and I've done the usual google searches (no luck). This is not a big issues, but it's bothering me, and I though someone here must have run into this before and figured out a solution. Thanks in advance.

 

Can you give us a link to your webpage if you have it on a server.
If not, we need to see some code. Save your page as index.html then upload here as a .zip file.
Or you can place on a free web host like this one here. Then give us the link so we can see what's going on.

 

I was going upload sample code without the personal info, but when I tried to replicate it with the same layout, but blank graphics for pictures and meaningless text, the problem didn't reoccur. Comparing my sample page to the actual page I found the problem. Turns out I had <p></p> tags around the logo/header, which apparently Firefox picked up on, but IE didn't. Anyway, problem solved. Thanks.

 

Well the first problem is that you are using tables to begin with. With XHTML and CSS 2.0 it is usually more appropriate to use CSS Styles as apposed to tables, it cuts way down on the problems that you are describing. The second problem is you are defining your table width with a %, which is usually not a good idea. Try insted setting it to the width of your banner.

Your third problem, not showing us atleast a snippet of the code. I am in a good mode today because I got off work early for bad weather, so if you post what you are trying to do, I will fix it using the 3 things I described above, XHTML, CSS, and pulling it out of a table. You could use that as an example and go from there.

 

i understand CSS is better, but the tables approach was easier and faster for me to get the desired result using info i could find on the web.

Okay, I appreciate the help. for future reference here's the main page, with personal details removed (in red) - the original problem was fixed:

That's the main page with my with just my pic, name and several links to relevant info; everything in the center. When you click on the links it takes you to similar pages, except a small pic and the links are on the left (all smaller), and the info relevant to the clicked link is displayed on the rest of the page. I used 100% width, so that people with wider screens can see everything on one page, and so that scrolling would be unnecessary.

p.s. this may not be the latest/cleanest code, but in terms of appearance on the web it's current.

 

<table width="100%" height="0" border="0" cellpadding="0" cellspacing="0" cols="0"
<td colspan="3"><div align="center">
<img src="logo.jpg" width="800" height="56" align="center" valign="center" />
</div></td>

Try changing align= to center and add valign too. delete cellpadding all together and save.