My table gets padding even when i use padding:0; in my css

[helpmeplease]

Hello
I hope someone can help me with this problem.
I use a css to style a table.
In this table i have background images and images in the td field.
I want the cells to go togheter with the height and width i specify and no border, margin or padding.

But i get some kind of padding in the bottom of the cells..this i do not want.



My code you can see here:
And my page: http://www.ticket24.no/template/blue/

	<table class=topptable>
		<tr class=tr01>
			<td class=tr01td01><img src="emptycell.png" alt="ticket24.no"></td>
			<td class=tr01td02><img src="topp01splitt.png" alt="ticket24.no"></td>
			<td class=tr01td03><img src="emptycell.png" alt="ticket24.no"></td>
			<td class=tr01td04><img src="topp01splitt.png" alt="ticket24.no"></td>
			<td class=tr01td05><img src="emptycell.png" alt="ticket24.no"></td>
		</tr>
		<tr class=tr02>
			<td class=tr02td01><img src="topp02bilde.jpg" alt="ticket24.no"></td>
			<td class=tr02td02><img src="topp02splitt.png" alt="ticket24.no"></td>
			<td class=tr02td03><img src="topp02logo.png" alt="ticket24.no"></td>
			<td class=tr02td04><img src="topp02splitt.png" alt="ticket24.no"></td>
			<td class=tr02td05><img src="emptycell.png" alt="ticket24.no"></td>
		</tr>
		<tr class=tr03>
			<td class=tr03td01><DIV style="margin-left: 36px; color: #FFFFFF; font-weight: bold; font-family: arial;">Velg arrangement</DIV></td>
			<td class=tr03td02><img src="topp03splitthvit.png" alt="ticket24.no"></td>
			<td class=tr03td03><img src="emptycell.png" alt="ticket24.no"></td>
			<td class=tr03td04><img src="emptycell.png" alt="ticket24.no"></td>
			<td class=tr03td05>
<!-- SKRIVER UT BOKSEN OVER HØYRE LINKER -->
				&nbsp;
			</td>
		</tr>
		<tr class=tr04>
			<td class=tr04td01>
<!-- SKRIVER UT VENSTRE MENYER -->
				<DIV style="margin-top: 25px;">
					<?PHP include("print_sidemeny.php"); ?>
				</DIV>
			</td>
			<td class=tr04td02><img src="emptycell.png" alt="ticket24.no"></td>
			<td class=tr04td03>
	<!-- SKRIVER UT BILLETTENE -->
				<DIV style="margin-top: 40px; margin-left: 5px; margin-right: 5px;">
				<?PHP
					if($go == "show_consert") include("./show_consert.php");
					elseif($go == "fraktinformasjon") include("./fraktinformasjon.php");
					elseif($go == "betalingsinformasjon") include("./Betalingsinformasjon.php");
					elseif($go == "om") include("./OmTicket24.php");
					elseif($go == "show_product") call_user_func('MakeTicket', $pid);
					elseif($go == "checkout") include("./checkout.php");
					else include("home.php");
				?>
				</DIV>
			</td>
			<td class=tr04td04><img src="emptycell.png" alt="ticket24.no"></td>
			<td class=tr04td05>
<!-- SKRIVER UT HØYRE LINKER -->
				&nbsp;
			</td>
		</tr>
	</table>

.topptable{table-layout: fixed; width: 100%; border-collapse:collapse; border-spacing:0;}
.topptable td {padding: 0px; margin: 0px;}
.topptable .tr01{height: 15px}
.topptable .tr01td01{width: 257px; min-width: 257px; max-width: 257px; background-image: url(topp01hvit.png); background-repeat: repeat-x}
.topptable .tr01td02{width: 1px; min-width: 1px; max-width: 1px}
.topptable .tr01td03{width: 384px; min-width: 384px; max-width: 384px; background-image: url(topp01blue.png); background-repeat: repeat-x}
.topptable .tr01td04{width: 1px; min-width: 1px; max-width: 1px}
.topptable .tr01td05{width: auto; background-image: url(topp01hvit.png); background-repeat: repeat-x}

.topptable .tr02{height: 126px;}
.topptable .tr02td01{}
.topptable .tr02td02{}
.topptable .tr02td03{}
.topptable .tr02td04{}
.topptable .tr02td05{background-image: url(topp02bakgrunn.png); background-repeat: repeat-x;}

.topptable .tr03{height: 27px;}
.topptable .tr03td01{background-image: url(topp03arrangement.png); background-repeat: no-repeat;}
.topptable .tr03td02{}
.topptable .tr03td03{vertical-align: top}
.topptable .tr03td04{}
.topptable .tr03td05{}

[helpmeplease]

I probably should mention that this padding problem doesn't occur in explorer. But i have this problem in opera, firefox and netscape.

[helpmeplease]

I see that it probably is to much code to read trough, but can anyone answere this:
In this code how can i use css to get the cells just the size of the picture and no padding. In opera i get padding in the bottom even when i use paddin: 0; margin:0;

<table class=table1class>
<tr class=tr01>
<td class=tr01td01>some picture here</td>
</tr>
</table>

[mwinter]

Your layout has more serious issues than a little unwanted spacing.

Take a look at an example that shows a totally different approach.

A few things to remember for the future:

• Never, ever, use the font element. If there isn't a semantic in-line element available, use a span.
• Provide meaningful alt attributes, with empty (alt="") values for purely decorative images. Look at your page with images disabled. Seeing (or hearing, for aural browsers or screen readers) 'Ticket24.no' about thirty times is worse than useless. It's positively harmful. You omitted alt attributes on your image submission buttons, by the way.
• Use external style sheets, not inline declarations.
• Don't specify font sizes in pixel units. Use percentages (no lower than 85% of default).
• Length attributes in HTML (like width and height in img elements) do not have units like in CSS. They are either pixels (just numbers), percentages (followed by percent symbol [%]), or proportional units (followed by asterisk [*]), depending on the attribute and the element in question.

Mike

[helpmeplease]

Thank you very much for the help. I am looking into what you wrote about what to fix on my webpage.