Witam Szanownych użytkowników tego forum!
Mam wielki problem z moją pierwsza stroną w XHTML przy zastosowaniu div-ów zamiast tabel. Otóż zrobiłem tak jak nauczyłem się na podstawie wielu kursów. Jednak pomomio prawidłowego kodu strona pod IE wygląda ładnie, natomiast pod Fire Foxem prezentuje się mizernie.
Pod Mozilla FireFoxem:
- poszczególne rubryki nie są nachodzą na siebie (pewnie dla tego, że FF i IE inaczej obsługują padding i marging; ale jak to skorygować?)
- rubryki zawarte są w divie id=wlasciwe, w którym jest szare tło; jednak te tło w FF końzy się po 2 pixelach :9
Bardzo proszę o pomoc co mam poprawić, aby ta strona wyglądała tak samo jak pod IE? Nie ma sensu tworzenia jej tylko po FF skoro większość osób korzysta jeszcze z IE. Jednak zależy mi, aby równiez pod FF ładnie się to prezentowało.
Link: http://sport24.info.pl/test/
KOD HTML:
<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<title>SPORT24.info.pl - piłka nożna, piłka ręczna, koszykówka, rugby, hokej, żużel, quady</title>
<link rel="stylesheet" type="text/css" href="images/style.css" />
<?xml-stylesheet type="text/css" href="images/style.css" ?>
</head>
<body>
<div id="strona">
<div id="naglowek">
<div id="logo"><a href="index.php"><img src="images/logo.jpg" alt="SPORT24.info.pl" /></a></div>
<div id="reklama"><a href=""><img src="images/reklama.jpg" alt="R.E.K.L.A.M.A" /></a></div>
</div>
<div id="menu">
<div id="pozycje">
<a href="index.php">serwis informacyjny</a> |
<a href="pokaz.php?kat=wydarzenia">piłka nożna</a> |
<a href="pokaz.php?kat=sport">koszykówka</a> |
<a href="pokaz.php?kat=rozrywka">żużel</a> |
<a href="pokaz.php?kat=turystyka">gry sportowe</a>
</div>
<div id="zakonczenie1"></div>
<div id="zakonczenie2"></div>
<div id="zakonczenie3"></div>
</div>
<div id="wlasciwa">
<div id="lewa">
<div class="tabela">
<div class="tabela_tytul">Informacje z kraju i ze ¶wiata</div>
<div class="tabela_tresc"><p><img src="images/foto.jpg" align="left" vspace="2" hspace="2" style="border: 1px solid #EEEEEE"><b>30 sekund do startu...</b><br /><br />Co czuje i my¶li zawodnik, kiedy znajduje się na torze, do startu pozostało 30 sekund, a z jego motocyklem jeszcze walcz± mechanicy? Zapytali¶my o to Tomasza Chrzanowskiego, który wła¶nie tak± sytuację zaliczył w meczu Lotos Gdańsk - Unia Tarnów.</p><p><a href="">czytaj dalej</a></p></div>
</div>
<div class="tabela">
<div class="tabela_tresc"><p style="text-align: left">
<a href="">» Żużel: Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">» Żużel: Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">» Piłka nożna: Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">» Koszykówka: Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">» Siatkówka: Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">» Żużel: Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">» Żużel: Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">» Żużel: Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
</p></div>
</div>
</div>
<div id="prawa">
<div class="tabela">
<div class="tabela_tytul">Serwis żużlowy</div>
<div class="tabela_tresc">
<a href="">» Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">» Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">» Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">» Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">» Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
</div>
</div>
<div class="tabela">
<div class="tabela_tresc"><img src="images/foto1.jpg" align="center" vspace="2" hspace="2" style="border: 1px solid #EEEEEE"><img src="images/foto2.jpg" align="center" vspace="2" hspace="2" style="border: 1px solid #EEEEEE"><img src="images/foto2.jpg" align="center" vspace="2" hspace="2" style="border: 1px solid #EEEEEE"></div>
</div>
<div class="tabela">
<div class="tabela_tytul">Serwis piłkarski</div>
<div class="tabela_tresc">
<a href="">» Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">» Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">» Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">» Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">» Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
</div>
</div>
<div class="tabela">
<div class="tabela_tresc"><img src="images/foto1.jpg" align="center" vspace="2" hspace="2" style="border: 1px solid #EEEEEE"><img src="images/foto2.jpg" align="center" vspace="2" hspace="2" style="border: 1px solid #EEEEEE"><img src="images/foto2.jpg" align="center" vspace="2" hspace="2" style="border: 1px solid #EEEEEE"></div>
</div>
</div>
</div>
<div id="stopka">
<div id="linia1"></div>
<div id="linia2"></div>
<div id="info">Copyright © 2005 NETTIX</div>
</div>
</body>
</html>
KOD CSS:
body {margin: 0px; font-family: Verdana; font-size: 11px; color: #000000; text-align: center; background-color: #FFFFFF}
p {text-align: justify}
a {text-decoration: none; font-weight: normal; color: #B90D0D}
a:hover {text-decoration: none; font-weight: normal; color: #CA0F0F}
span {font-weight: bold}
select, input {width: 400px; height: 20px; font-family: Verdana; font-size: 10px; border: solid 1px #979797}
textarea {width: 400px; height: 100px; font-family: Verdana; font-size: 10px; border: solid 1px #979797}
#strona {margin: 0 auto; padding: 0px; width: 780px}
#naglowek {margin-top: 5px; padding: 0px}
#naglowek div#logo {float: left; width: 290px; text-align: left}
#naglowek div#logo img {border-width: 0px}
#naglowek div#reklama {float: right; width: 490px; text-align: right}
#naglowek div#reklama img {width: 480px; height: 48px; border: 1px solid #EEEEEE}
#menu {clear: both; margin-top: 2px; border: 1px solid #EEEEEE; background: #F7F7F7}
#menu a {text-decoration: none; font-weight: bold; color: #000000}
#menu a:hover {text-decoration: underline; font-weight: bold; color: #808080}
#menu div#pozycje {padding: 4px}
#menu div#zakonczenie1 {padding-top: 1px; background: #EE1515}
#menu div#zakonczenie2 {padding-top: 1px; background: #B90D0D}
#menu div#zakonczenie3 {padding-top: 1px; background: #CA0F0F}
#wlasciwa {margin-top: 3px; height: 100%; vertical-align: top; border: 1px solid #EEEEEE; background: #F7F7F7}
#wlasciwa div#lewa {float: left; width: 500px}
#wlasciwa div#prawa {float: right; width: 278px}
#stopka {clear: both; margin-top: 3px}
#stopka img {vertical-align: middle; border-width: 0px}
#stopka div#linia1 {padding-top: 3px; background: #B90D0D}
#stopka div#linia2 {margin-top: 2px; padding-top: 1px; background: #EE1515}
#stopka div#info {padding: 4px}
.tabela {margin: 5px; width: 100%; border: 1px solid #EEEEEE; background: #FFFFFF}
.tabela_tytul {padding: 2px; width: 100%; color: #FFFFFF; font-weight: bold; text-align: left; background: #B90D0D}
.tabela_tresc {padding: 2px; width: 100%; background: #FFFFFF}
Pełna wersja: Problem z wyświetlaniem strony w xhtml po FF
Po pierwsze umieszczaj kod zawsze w bbcode, bo strasznie się takie coś czyta 
Jeśli chodzi o problem to zrób tak:
po znaczniku zamykającym diva #prawa daj
Tak będzie to wyglądać:
W klasach opisujących tabele usuń style opisujące szerokość, tu jest problem bo ustawiasz dla tabeli margin i dajesz jej szerokość 100%, co daje dziwne efekty potem.
Jeśli chodzi o problem to zrób tak:
po znaczniku zamykającym diva #prawa daj
Tak będzie to wyglądać:
W klasach opisujących tabele usuń style opisujące szerokość, tu jest problem bo ustawiasz dla tabeli margin i dajesz jej szerokość 100%, co daje dziwne efekty potem.
Kod
.tabela {margin: 5px; border: 1px solid #EEEEEE; background: #FFFFFF}
.tabela_tytul {padding: 2px; color: #FFFFFF; font-weight: bold; text-align: left; background: #B90D0D}
.tabela_tresc {padding: 2px; background: #FFFFFF}
.tabela_tytul {padding: 2px; color: #FFFFFF; font-weight: bold; text-align: left; background: #B90D0D}
.tabela_tresc {padding: 2px; background: #FFFFFF}
Co do IE i FF: wg. mnie najlatwiej stworzyc osobny szablon pod IE i dolaczac go warunkowo:
<!--[if IE]>...<![endif]--> ie traktuje takie KOMENTARZE jak instrukcje warunkowa
(sa mozliwe rozne kombinacje - IE 5.000, IE gt 4.5 itd -- musisz gdzies poszukac, ale samo IE powinno wystarczyc) i dodaje dodatkowy arkusz styli 'style-screen-msie.css' (jako drugi!!!) ktory NADPISZE wszystkie (lub tylko niektore) definicje styli z 'style-screen.css'.
<!--[if IE]>...<![endif]--> ie traktuje takie KOMENTARZE jak instrukcje warunkowa
(sa mozliwe rozne kombinacje - IE 5.000, IE gt 4.5 itd -- musisz gdzies poszukac, ale samo IE powinno wystarczyc) i dodaje dodatkowy arkusz styli 'style-screen-msie.css' (jako drugi!!!) ktory NADPISZE wszystkie (lub tylko niektore) definicje styli z 'style-screen.css'.
Serdecznie dziękuję! Pomogło! A teraz wydaje się to takie proste 
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.