[HTML][CSS]Grafika pozycjonowana w tabeli Opcje

[Chrom]

Witam,
Proszę powiedzie dlaczego w IE grafika wyświetlana jest prawidłowo a w Firefoxie menu po lewej stronie rozjeżdża się? Próbuję ustalić wymiary zarówno w stylach jak i w html-u.

[HTML] pobierz, plaintext 
echo"<table border=\"0\" width=\"759\" cellspacing=\"0\" cellpadding=\"0\"  style=\"background-image: url('image/$col"."tlo.jpg'); width: 759px; margin: auto; text-align: center;\">
		<tr>
			<td rowspan=\"2\" colspan=\"2\"><img src=\"image/$col"."1.jpg\" width=\"177\" height=\"200\" border=\"0\" alt=\"[]\" /></td>
			<td colspan=\"2\"><img src=\"image/$col"."2.jpg\" width=\"582\" height=\"125\" border=\"0\" alt=\"[]\" /></td>
		</tr>
		<tr>
			<td><img src=\"image/$col"."3.jpg\" width=\"125\" height=\"75\" border=\"0\" alt=\"[]\" /></td>
			<td style=\"background-image: url('image/$col"."4.jpg'); height: 75px; width: 457px; border: 0px;\" hight=\"75\" width=\"457\" border=\"0\"><p style=\"text-align: left; font-size: 20px;\">Amatorska hodowla: $hodowla </p></td>
		</tr>
		<tr>
			<td rowspan=\"9\" style=\"background-image: url('image/$col"."5.jpg'); background-repeat: repeat-y;\" width=\"37\" border=\"0\" ></td>
			<td width=\"140\" height=\"27\" border=\"0\"><a href=\"index.php\" name=\"Strona Główna\"><p style=\"text-align: left; padding: 5px 0px 5px 13px; font-size: 15px bold;\">Odnośnik 1</p></a></td>
			<td width=\"582\" height=\"200\" rowspan=\"11\" colspan=\"2\" style=\"background-image: url('image/tlo'.'$col.jpg')\"> 
			</td>
		</tr>
		<tr>
			<td><img src=\"image/$col"."7.jpg\" width=\"140\" height=\"10\" border=\"0\" alt=\"\" /></td>
		</tr>
		<tr>
			<td width=\"140\" height=\"27\" border=\"0\"><a href=\"index.php\"><p style=\"text-align: left; padding: 5px 0px 5px 13px; font-size: 15px bold;\">Odnośnik 2</p></a></td>
		</tr>
		<tr>
			<td><img src=\"image/$col"."9.jpg\" width=\"140\" height=\"10\" border=\"0\" alt=\"\" /></td>
		</tr>
		<tr>
			<td><a href=\"index.php\"><p style=\"text-align: left; padding: 1px 0px 2px 14px;font-size: 12px;\">Annabel<br  /><small style=\"font-size: 8px;\">Canis Terra</small></p></a></td>
		</tr>
		<tr>
			<td><img src=\"image/$col"."11.jpg\" width=\"140\" height=\"10\" border=\"0\" alt=\"\" /></td>
		</tr>
			<tr>
			<td><a href=\"index.php\"><p style=\"text-align: left; padding: 1px 0px 2px 14px;font-size: 12px;\">Annabel<br  /><small style=\"font-size: 8px;\">C T</small></p></a></td>
		</tr>
		<tr>
			<td><img src=\"image/$col"."11.jpg\" width=\"140\" height=\"10\" border=\"0\" alt=\"\" /></td>
		</tr>
		<tr>
			<td><a href=\"index.php\"><p style=\"text-align: left; padding: 5px 0px 5px 13px;\">Odnośnik</p></a></td>
		</tr>
		<tr>
			<td colspan=\"2\"><img src=\"image/$col"."15.jpg\" width=\"178\" height=\"111\" border=\"0\" alt=\"[]\" /></td>
		</tr>
		<tr>
			<td colspan=\"2\"></td>
		</tr>
	</table>";
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
td a:link, td a:visited {
	display: block;
	width: 140px;
	margin: 0px;
	padding: 0px;
	background: #403c16 url("image/n6.jpg");
	color: #FFF;
	border: 0px;
	text-decoration: none;
}
 
td a:hover {
	background-color: #86af78;
	background-image: url("image/n14.jpg");
	color: #009;
	margin: 0px;
	padding: 0px;
	text-decoration: none;
}
[HTML] pobierz, plaintext 

[Kreton]

Nie chce mi się sprawdzać i strzelam, ale ustaw dla obrazków display: block a powinny odstępy zniknąć.

Jeżeli interesuje Cie przyczyna: IE traktuje od razu obrazki jako elementy blokowe, co jest niezgodne z zaleceniami W3C. Firefox i Opera tratują poprawnie obrazki jako elementy liniowe, czyli tak samo jak tekst. Zobacz, że pod każdą linijką tekstu pojawia się mała przerwa aby kolejne linie tekstu nie nachodziły na siebie. Dlatego pod obrazkiem poojawia sie przerwa.

O ile dobrze pamiętam możesz także uzyć vertical-align: bottom. Możesz takze uruchomić tryb prawie standardowy używając XHTML 1.0 Transitional.

BTW: Nie wysyłaj takich śmieci natsępnym razem. Daj wygenerowany HTML i link do strony.

Ten post edytował Kreton 25.07.2008, 17:32:34