+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: tabela inaczej wygląda w różnych przeglądarkach (/thread-tabela-inaczej-wyglada-w-roznych-przegladarkach)
tabela inaczej wygląda w różnych przeglądarkach - faust - 25-01-2012
Witam,
mam taki dziwny problem, zrobiłem stronę pizzerii (menu w formie tabeli). W Google chrome i safari strona wygląda tak jak powinna, w Firefox ucina kawałek tabelki, że nie widać ponad jednej pizzy w operze tak samo natomiast w IE również obcina ale już trochę mniej. Problem ten nie występował natomiast kiedy nie zastosowałem formatowania czcionki (line-height) oraz padding. Męczę się już z tym dosyć długo. Proszę o pomoc mogę przesłać kod html oraz css jeśli będzie potrzebny
RE: tabela inaczej wygląda w różnych przeglądarkach - Ancik - 25-01-2012
Najlepiej wsadź to tutaj, ewentualnie na jakiś serwer i podeślij adres.
RE: tabela inaczej wygląda w różnych przeglądarkach - faust - 25-01-2012
Kod HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<meta name="robots" content="index,follow,all" />
<meta name="revisit-after" content="10 Days" />
<meta name="description" content="Pizzeria Laguna zaprasza na oryginalną włoską pizzę w Toruniu. Dowieziemy do Ciebie gorącą pizze zawsze na czas." />
<meta name="keywords" content="pizzeria torun, pizzeria laguna, pizza z dowozem, pizzerie toruń, kuchnia włoska, pizza, Toruń" />
<title>Pizzeria Laguna w Toruniu - pizza z dowozem, sałatki, napoje. Zapraszamy!!!</title>
<link href="style.css" media="screen" rel="stylesheet" type="text/css" />
<meta name="google-site-verification" content="gEPUg4RWtwcA3f3mSR8CYISqb6braC7L-ZHtCyrVri8" />
</head>
<body>
<div id="main_wrapper">
<div id="logo">
<div id="logo_inner">
<a href="index.html"><img src="n3.png" alt="Laguna"/></a>
</div>
</div>
<div id="main_menu">
<div id="main_menu_inner">
<ul>
<li><a href="pizza.html">Pizza</a></li>
<li><a href="tortellini.html">Tortellini</a></li>
<li><a href="spaghetti.html">Spaghetti</a></li>
<li><a href="salatki.html">Sałatki</a></li>
<li><a href="promocje.html">Promocje</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
</div>
<div id="bigcontent">
<div id="bigcontent_inner">
<div id="content">
<div id="content_inner">
<img class="jedzenie" src="pizza.gif" alt="pizza"/>
<img class="zamowienia" src="1.gif" alt="zamowienia" />
<p>Do każdej pizzy <strong>dwa sosy gratis</strong> w pojemniku lub na pizzy:<br /> <span>pomidorowy, czosnkowy, pikantny, ketchup, majonez</span></p>
<br /><p><strong>Dowóz gratis</strong> przy zamówieniu powyżej 10,00 zł</p>
<table>
<thead>
<tr>
<td></td>
<td>pizza</td>
<td>mała <br />26cm</td>
<td>duża<br />32cm</td>
<td>familijna<br />42cm</td>
<td>mega<br />52cm</td>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Margherita
<br /><span>sos, ser</span></td>
<td>7,00</td>
<td>9,00</td>
<td>15,00</td>
<td>22,00</td>
</tr>
<tr>
<td>2.</td>
<td>Funghi <br /><span>sos, ser, pieczarki</span></td>
<td>8,00</td>
<td>10,00</td>
<td>16,00</td>
<td>23,00</td>
</tr>
<tr>
<td>3.</td>
<td>Vesuvio <br /><span>sos, ser, szynka</span></td>
<td>8,00</td>
<td>10,00</td>
<td>16,00</td>
<td>23,00</td>
</tr>
<tr>
<td>4.</td>
<td>Capricciosa <br /><span>sos, ser, szynka, pieczarki</span></td>
<td>10,00</td>
<td>12,00</td>
<td>18,00</td>
<td>25,00</td>
</tr>
<tr>
<td>5.</td>
<td>Tropicana <br /><span>sos, ser, szynka, ananas</span></td>
<td>10,00</td>
<td>12,00</td>
<td>18,00</td>
<td>25,00</td>
</tr>
<tr>
<td>6.</td>
<td>Neapolitana <br /><span>sos, ser, szynka, pieczarki, papryka</span></td>
<td>11,00</td>
<td>13,00</td>
<td>20,00</td>
<td>27,00</td>
</tr>
<tr>
<td>7.</td>
<td>Americana <br /><span>sos, ser, kurczak, bekon, kukurydza,<br /> cebula, papryka, pepperoni</span></td>
<td>12,00</td>
<td>15,00</td>
<td>25,00</td>
<td>34,00</td>
</tr>
<tr>
<td>8.</td>
<td>Salami <br /><span>sos, ser, salami, papryka, cebula</span></td>
<td>11,00</td>
<td>13,00</td>
<td>20,00</td>
<td>28,00</td>
</tr>
<tr>
<td>9.</td>
<td>Pepperoni <br /><span>sos, ser, salami pikantne, oliwki, cebula,<br /> papryka, pepperoni</span></td>
<td>12,00</td>
<td>15,00</td>
<td>23,00</td>
<td>31,00</td>
</tr>
<tr>
<td>10.</td>
<td>Royal <br /><span>sos, ser, kurczak, ananas, rodzynki</span></td>
<td>11,00</td>
<td>13,00</td>
<td>21,00</td>
<td>29,00</td>
</tr>
<tr>
<td>11.</td>
<td>Primavera <br /><span>sos, ser, pieczarki, cebula, kukurydza,<br />
papryka, oliwki</span></td>
<td>11,00</td>
<td>14,00</td>
<td>22,00</td>
<td>29,00</td>
</tr>
<tr>
<td>12.</td>
<td>Quattro Stagioni <br /><span>sos, ser, szynka, pieczarki, cebula, oliwki</span></td>
<td>12,00</td>
<td>14,00</td>
<td>21,00</td>
<td>28,00</td>
</tr>
<tr>
<td>13.</td>
<td>Rimini <br /><span>sos, ser, szynka, pomidor, cebula bazylia</span></td>
<td>11,00</td>
<td>13,00</td>
<td>20,00</td>
<td>28,00</td>
</tr>
<tr>
<td>14.</td>
<td>Rodos <br /><span>sos, ser, szynka, czarne oliwki, ser feta</span></td>
<td>11,00</td>
<td>13,00</td>
<td>20,00</td>
<td>28,00</td>
</tr>
<tr>
<td>15.</td>
<td>Pescatore <br /><span>sos, ser, tuńczyk, kukurydza, cebula</span></td>
<td>12,00</td>
<td>14,00</td>
<td>23,00</td>
<td>28,00</td>
</tr>
<tr>
<td>16.</td>
<td>Quattro Formaggi <br /><span>sos, ser: mozzarella, rokpol, feta, edamski</span></td>
<td>12,00</td>
<td>15,00</td>
<td>24,00</td>
<td>33,00</td>
</tr>
<tr>
<td>17.</td>
<td>Toscana <br /><span>sos, ser, kurczak, pomidor, kukurydza</span></td>
<td>11,00</td>
<td>14,00</td>
<td>22,00</td>
<td>32,00</td>
</tr>
<tr>
<td>18.</td>
<td>Mexicana <br /><span>sos, ser, kiełbasa, tabasco, czosnek,<br />
fasola, kukurydza, papryka</span></td>
<td>12,00</td>
<td>15,00</td>
<td>24,00</td>
<td>32,00</td>
</tr>
<tr>
<td>19.</td>
<td>Laguna <br /><span>sos, ser, owoce morza, oliwki, pomidor</span></td>
<td>12,00</td>
<td>15,00</td>
<td>24,00</td>
<td>31,00</td>
</tr>
<tr>
<td>20.</td>
<td>Polska <br /><span>sos, ser, kiełbasa, boczek, pieczarki,<br /> cebula, pomidor</span></td>
<td>12,00</td>
<td>15,00</td>
<td>23,00</td>
<td>32,00</td>
</tr>
<tr>
<td>21.</td>
<td>Pizza Stawki <br /><span>sos, ser, 7 składników do wyboru</span></td>
<td>13,00</td>
<td>16,00</td>
<td>26,00</td>
<td>36,00</td>
</tr>
<tr>
<td>22.</td>
<td>Romeo i Julia <br /><span>1/2 sos, ser, salami, pepperoni, cebula
<br />1/2 sos, ser, szynka, pieczarki, kukurydza</span></td>
<td>12,00</td>
<td>15,00</td>
<td>25,00</td>
<td>34,00</td>
</tr>
<tr>
<td>23.</td>
<td>Domowa <br /><span>sos, ser, kiełbasa, szynka, cebula, ogórek konserwowy</span></td>
<td>12,00</td>
<td>14,00</td>
<td>22,00</td>
<td>29,00</td>
</tr>
<tr>
<td>24.</td>
<td>Pizza Toruń <br /><span>sos, ser, kurczak, pieczarki, oliwki, kukurydza, cebula</span></td>
<td>12,00</td>
<td>15,00</td>
<td>25,00</td>
<td>34,00</td>
</tr>
<tr>
<td>25.</td>
<td>Mammamia <br /><span>sos, ser, szynka, salami, pieczarki, cebula</span></td>
<td>12,00</td>
<td>14,00</td>
<td>22,00</td>
<td>29,00</td>
</tr>
<tr>
<td>26.</td>
<td>London Pizza <br /><span>sos, ser, kurczak, bekon, czosnek, kukurydza</span></td>
<td>12,00</td>
<td>15,00</td>
<td>24,00</td>
<td>33,00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer_inner">
<p>© Copyright <a href="http://www.pizzerialaguna.pl" title="pizzerialaguna.pl">Laguna 2012</a></p>
<img class="wifi" src="wifi.gif" alt="wifi" />
</div>
</div>
</div>
</body>
</html>
Kod CSS
* {margin:0; padding:0;}
body {text-align:center;
background-color:#a1121b;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
}
#main_wrapper {
width:840px;
margin-top:25px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
#logo_inner, #header_inner, #main_menu_inner, #content_inner, #bigcontent_inner, footer_inner {overflow:hidden;}
#logo_inner {height: 250px; width:840px;}
#logo_inner2 {overflow:hidden;}
#logo_inner2 {height:140px; background-image:url(naglowek2.gif);}
#main_menu {background-color:#f9d61a;}
#main_menu_inner {height:50px; width:800px;}
#footer {background-color:#332c2c; clear:both;}
#footer_inner {width:800px; height:40px;}
#footer_inner p {font-size:.8em; padding-top:10px; padding-left:10px;}
#footer_inner a {color:#FFFFFF; text-decoration:none;}
#footer_inner a:hover{text-decoration:underline;}
#bigcontent { background-color:#b3272f;}
#bigcontent_inner {width:840px; height:1620px; overflow:hidden;}
#content {margin-left:20px; margin-right:20px; margin-top:20px; background-color:#a2242a; }
#content_inner {
width:800px;
height:1590px;
overflow:hidden;
}
#bigcontent2 { background-color:#b3272f;}
#bigcontent_inner2 {width:840px; height:600px; overflow:hidden;}
#content2 {margin-left:20px; margin-right:20px; margin-top:20px; background-color:#a2242a; }
#content_inner2 {
width:800px;
height:500px;
overflow:hidden;
}
#content_inner p span {font-size:.9em;}
.cel {font-size:1.3em; margin-top:5px; color:#feecb3;}
.cel2 {font-size:1em; margin-left:25px; color:#FFF; line-height:1.4;
}
.wifi {float:right; margin-right:-20px; margin-top:-15px;}
a {color:#67c725; text-decoration:none;}
p {color:#FFFFFF; font-size:1em;}
h2 {color:#FFFFFF; margin-left:15px;}
.jedzenie {float:left; margin-right:15px; margin-left:10px; margin-top:10px; margin-bottom:10px;}
.zamowienia{ float:right; margin-right:10px;}
table {width:800px; border-collapse:collapse;}
table thead {
background: #f9d61a;
color:#000;
font-weight:bold;
}
table tbody {
background: transparent;
color: #feecb3;
}
table tbody td span {color:#FFF; font-size:.9em;}
table tbody tr:nth-child(even) {
background: #a2242a;
}
table tbody tr:nth-child(odd) {
background: #b3272f;
}
table tbody tr:hover {
background:#000;
}
table tbody td { line-height:1.3em; padding-bottom:3px; padding-top:3px;}
#main_menu ul {
display: block;
list-style: none;
margin-left:85px;
margin-top:5px;
border:2px solid #000;
border-width:2px 0;
float:left;
}
#main_menu li {
float:left;
width:116px;
font-size:1em;
}
#main_menu ul a:link, ul a:visited {
text-decoration: none;
display: block;
text-align: center;
color:#FFF;
padding:6px;
background-color:#b3272f;
border-right:2px solid #000;
text-decoration:none;
font-size:1.1em;
text-transform:uppercase;
text-shadow: 2px 2px 2px #000;
}
#main_menu li:first-child a {
border-left:2px solid #000;
}
#main_menu ul a:hover {
background-color:#a2242a;
}
#main_menu ul a:active {
background:#e35a00;
color:#fff;
}
RE: tabela inaczej wygląda w różnych przeglądarkach - Kartofelek - 25-01-2012
Pamiętaj też o wykorzystaniu atrybutów cellspacing="0" cellpadding="0" dla table. W kilku przeglądarkach ratuje to życie
Wiem że w teorii nie powinno się już z tego korzystać, ale praktyka jest inna.