ďťż

[html]tabele po dodaniu doctype się rozjeżdżają...

       

Podstrony


telcocafe

Witam!
Mam stronę www o kodzie: <html> <head> <title>Gastrologia dziecięca, pediatria - dr n. med. X X</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="styl.css" type="text/css"> </head> <body bgcolor="#b7cbe4" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- Save for Web Slices (layouts.psd) --> <center><br><br><table id="Tabela_01" width="800" height="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#73A4E1"> <tr> <td> <img src="images/gl.png" width="39" height="30" alt=""></td> <td width="722" height="30" colspan="2" bgcolor="#73A4E1"> &nbsp;</td> <td> <img src="images/gp.png" width="39" height="30" alt=""></td> </tr> <tr> <td width="39" height="131" bgcolor="#73A4E1"> &nbsp;</td> <td colspan="2"> <img src="images/header.png" width="722" height="131" alt=""></td> <td width="39" height="131" bgcolor="#73A4E1"> &nbsp;</td> </tr> <tr> <td width="800" height="40" colspan="4" bgcolor="#73A4E1"> &nbsp;</td> </tr> <tr> <td width="39" height="363" bgcolor="#73A4E1"> &nbsp;</td> <td valign="top"><!--menu box--><table border="0" cellpadding="0" cellspacing="0" bgcolor="#73A4E1"> <tr><td><a href="index.php" target="_self" onmouseover="nad('glowna');" onmouseout="poza('glowna');"> <img id="glowna" src="images/glowna.png" width="160" height="46" border="0" alt=""></a></td></tr> <tr> <td width="160" height="27" bgcolor="#73A4E1"> &nbsp;</td> </tr> <tr> <td> <a href="index.php?link=omnie" target="_self" onmouseover="nad('omnie');" onmouseout="poza('omnie');"> <img id="omnie" src="images/omnie.png" width="160" height="46" border="0" alt=""></a></td> </tr> <tr> <td width="160" height="28" bgcolor="#73A4E1"> &nbsp;</td> </tr> <tr> <td> <a href="index.php?link=kontakt" target="_self" onmouseover="nad('kontakt');" onmouseout="poza('kontakt');"> <img id="kontakt" src="images/kontakt.png" width="160" height="46" border="0" alt=""></a></td> </tr> <tr> <td width="160" height="170" bgcolor="#73A4E1"> &nbsp;</td> </tr></table> <!--/menu box--></td> <td id="content" width="562" height="363" bgcolor="#73A4E1" valign="top"> <center><big><b>Rejestracja telefoniczna:</b> +48 000 000 000<br> od poniedziałku do piątku w godzinach 12-18<br> <b>E-mail:</b> aa[małpka]bb.cc</big><br> <i>Uwaga! Zastąp "[małpka]" znakiem "@" w powyższym adresie.</i></td> <td width="39" height="363" bgcolor="#73A4E1"> &nbsp;</td> </tr> <tr> <td> <img src="images/dl.png" width="39" height="36" alt=""></td> <td width="722" height="36" colspan="2" bgcolor="#73A4E1"> &nbsp;</td> <td> <img src="images/dr.png" width="39" height="36" alt=""></td> </tr> </table><table border="0" width="750"><tr> <td align="left"><small>&copy; Copyright by dr n. med. X X</small></td> <td align="right"><small><a href="http://www.moja_strona.pl/" target="_blank">designed by Piotr94</a></small></td> </tr></table></center> <!-- End Save for Web Slices --> <!--scripts--> <script type="text/javascript" language="Javascript"> <!-- function nad(co){ var napis=document.getElementById(co); napis.src='images/'+co+'_h.png'; } function poza(co){ var napis=document.getElementById(co); napis.src='images/'+co+'.png'; } //--> </script> <!--/scripts--> </body> </html>
Wszystko jest ok ( http://www.piotrek94...org/doct/ok.jpg ), jednak po dodaniu na samej górze znacznika Doctype:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> tabela się rozjeżdża i na dole pojawiają się nieestetyczne linie ( http://www.piotrek94.../doct/error.jpg ) zaznaczone na rysunku ( http://www.piotrek94...oct/error_z.jpg ). Nie mam zielonego pojęcia jak się to dzieje, strona jest w gruncie rzeczy wygenerowana z Adobe Photoshop CS4...
Bardzo proszę o pomoc, z góry dzięki ;-)
Użytkownik piotr94 edytował ten post 15 październik 2009, 15:51


Nie używaj tabelek ani generatorów wysiwyg, to nie będziesz miał takich problemów. Pełna kontrola, to własna wiedza.
Problem tkwi w wysokości komórki. Nadaj dolnym komórkom wysokość i pozbędziesz się problemu. Możesz też usunąć wysokość tabeli i to też pomoże.
Użytkownik andrzej_aa edytował ten post 15 październik 2009, 16:00
wywalenie wysokości tabeli nie pomogło, a dolne komórki mają nadaną wysokość...
//edit
patrzyłem na height obrazków ;)

nadałem wysokość komórką, wywaliłem height tabeli i dalej kicha...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Gastrologia dziecięca, pediatria - dr n. med.</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="styl.css" type="text/css"> </head> <body bgcolor="#b7cbe4" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- Save for Web Slices (layouts.psd) --> <center><br><br><table id="Tabela_01" width="800" border="0" cellpadding="0" cellspacing="0" bgcolor="#73A4E1"> <tr> <td height="30"> <img src="images/gl.png" width="39" height="30" alt=""></td> <td width="722" height="30" colspan="2" bgcolor="#73A4E1"> &nbsp;</td> <td height="30"> <img src="images/gp.png" width="39" height="30" alt=""></td> </tr> <tr> <td width="39" height="131" bgcolor="#73A4E1"> &nbsp;</td> <td colspan="2"> <img src="images/header.png" width="722" height="131" alt=""></td> <td width="39" height="131" bgcolor="#73A4E1"> &nbsp;</td> </tr> <tr> <td width="800" height="40" colspan="4" bgcolor="#73A4E1"> &nbsp;</td> </tr> <tr> <td width="39" height="363" bgcolor="#73A4E1"> &nbsp;</td> <td valign="top"><!--menu box--><table border="0" cellpadding="0" cellspacing="0" bgcolor="#73A4E1"> <tr><td><a href="index.php" target="_self" onmouseover="nad('glowna');" onmouseout="poza('glowna');"> <img id="glowna" src="images/glowna.png" width="160" height="46" border="0" alt=""></a></td></tr> <tr> <td width="160" height="27" bgcolor="#73A4E1"> &nbsp;</td> </tr> <tr> <td> <a href="index.php?link=omnie" target="_self" onmouseover="nad('omnie');" onmouseout="poza('omnie');"> <img id="omnie" src="images/omnie.png" width="160" height="46" border="0" alt=""></a></td> </tr> <tr> <td width="160" height="28" bgcolor="#73A4E1"> &nbsp;</td> </tr> <tr> <td> <a href="index.php?link=kontakt" target="_self" onmouseover="nad('kontakt');" onmouseout="poza('kontakt');"> <img id="kontakt" src="images/kontakt.png" width="160" height="46" border="0" alt=""></a></td> </tr> <tr> <td width="160" height="170" bgcolor="#73A4E1"> &nbsp;</td> </tr></table> <!--/menu box--></td> <td id="content" width="562" height="363" bgcolor="#73A4E1" valign="top"> <?switch($_GET['link']){ case 'omnie': include('sites/'.$_GET['link'].'.php'); break; case 'kontakt': include('sites/'.$_GET['link'].'.php'); break; default: include('sites/index.php'); break; }?> </td> <td width="39" height="363" bgcolor="#73A4E1"> &nbsp;</td> </tr> <tr> <td height="36"> <img src="images/dl.png" width="39" height="36" alt=""></td> <td width="722" height="36" colspan="2" bgcolor="#73A4E1"> &nbsp;</td> <td height="36"> <img src="images/dr.png" width="39" height="36" alt=""></td> </tr> </table><table border="0" width="750"><tr> <td align="left"><small>&copy; Copyright by dr n. med.</small></td> <td align="right"><small><a href="http://www..pl/" target="_blank">designed by Piotr94</a></small></td> </tr></table></center> <!-- End Save for Web Slices --> <!--scripts--> <script type="text/javascript" language="Javascript"> <!-- function nad(co){ var napis=document.getElementById(co); napis.src='images/'+co+'_h.png'; } function poza(co){ var napis=document.getElementById(co); napis.src='images/'+co+'.png'; } //--> </script> <!--/scripts--> </body> </html>
Użytkownik piotr94 edytował ten post 17 październik 2009, 07:11
Aha, więc wystarczy tylko vertical-align na middle ustawić dla obrazów w stopce.

P.S. Nie używaj fontu Comic Sans MS, bo jest beznadziejny. Ani przydatny, ani elegancki.

// Edytowano
@niżej: Ale na innych stronach jest ;)
Użytkownik andrzej_aa edytował ten post 15 październik 2009, 20:28


ale na tej stronie nie ma takiego fontu ;-)
@wyżej: wiem że jest, na swojej stronie zmienię, bo na razie nie mam czasu jej dokończyć (widać zresztą po tym jak wygląda grafika na niej)A co do innych - najważniejsze żeby klient się cieszył ;-P
Użytkownik piotr94 edytował ten post 17 październik 2009, 07:12
dalej po dodaniu doctype wszystko się rozjeżdża...
tak to wygląda po usunięci tła tabeli: http://www.piotrek94...t/error_tlo.jpg

Pisałem już, byś dodał vertical-align: middle dla obrazów.

dodałem i NIC...

Więc czemu mój przykład działa?

ale tam nie ma grafik....
spróbuję jeszcze raz to wszystko poustawiać ;-P

To co, że nie ma. Otwórz w Chrome, Operze czy IE, a zobaczysz, że jest, jak powinno być.
Zmieniłem teraz przykład, usunąłem tło i wstawiłem dwie wersje - pierwsza (Twój przykład) i druga (mój przykład z vertical-align: middle dla obrazów).
Użytkownik andrzej_aa edytował ten post 20 październik 2009, 15:44
  • zanotowane.pl
  • doc.pisz.pl
  • pdf.pisz.pl
  • nvm.keep.pl

  • Sitedesign by AltusUmbrae.