Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Problem z wyświetlaniem strony w xhtml po FF, Bardzo proszę o pomoc!
MarcinL
post
Post #1





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 16.05.2005

Ostrzeżenie: (0%)
-----

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="">&raquo; Żużel: Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">&raquo; Żużel: Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">&raquo; Piłka nożna: Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">&raquo; Koszykówka: Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">&raquo; Siatkówka: Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">&raquo; Żużel: Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">&raquo; Żużel: Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">&raquo; Ż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="">&raquo; Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">&raquo; Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">&raquo; Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">&raquo; Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">&raquo; 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="">&raquo; Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">&raquo; Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">&raquo; Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">&raquo; Tomasz Gollob wygrał Pomorsk± Ligę!</a><br />
<a href="">&raquo; 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 &copy; 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}

Ten post edytował MarcinL 16.05.2005, 21:58:04
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 3)
revyag
post
Post #2





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

Ostrzeżenie: (0%)
-----

Po pierwsze umieszczaj kod zawsze w bbcode, bo strasznie się takie coś czyta snitch.gif
Jeśli chodzi o problem to zrób tak:
po znaczniku zamykającym diva #prawa daj 
[HTML] pobierz, plaintext 
  1. <br style="clear:both" />
[HTML] pobierz, plaintext

Tak będzie to wyglądać:
[HTML] pobierz, plaintext 
  1. <div id="lewa">
  2. ....
  3. ....
  4. </div>
  5. <div id="prawa">
  6. ....
  7. ....
  8. </div><br style="clear:both" />
[HTML] pobierz, plaintext

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}


--------------------
-------------

------
Go to the top of the page
+Quote Post
dr_bonzo
post
Post #3





Grupa: Przyjaciele php.pl
Postów: 5 724
Pomógł: 259
Dołączył: 13.04.2004
Skąd: N/A

Ostrzeżenie: (0%)
-----

Co do IE i FF: wg. mnie najlatwiej stworzyc osobny szablon pod IE i dolaczac go warunkowo:
[HTML] pobierz, plaintext 
  1. <link rel="stylesheet" type="text/css" href="style-screen.css" media="screen" />
  2.             <!--[if IE]><style type="text/css">@import "style-screen-msie.css";</style><![endif]-->
[HTML] pobierz, plaintext

<!--[if IE]>...<![endif]--> ie traktuje takie KOMENTARZE jak instrukcje warunkowa smile.gif (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'.


--------------------
Nie lubię jednorożców.
Go to the top of the page
+Quote Post
MarcinL
post
Post #4





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 16.05.2005

Ostrzeżenie: (0%)
-----

Serdecznie dziękuję! Pomogło! A teraz wydaje się to takie proste tongue.gif
Go to the top of the page
+Quote Post
« Następny starszy · HTML \ XHTML · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 19.08.2025 - 05:27
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn