Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Odstęp pomiędzy tabelami dla IE i FF
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
Redakcja
2.03.2005, 15:17:50
Jakiś czas temy pzerzuciłem się z tabel na divy i coraz bardziej tego załuję. Nie ma żadnych książek na temat XHTMl w moich księgarniach, nie ma żadnych kursów, itp. Od tygodnia siędzię nad jednym projektem i mam już dość. Jestem mocno wkur... tym, że IE i Fire Fox całkiej róźnie wyświetlają style CSS! To jest przecież śmieszne, aby przeglądarki w XXI w nie miały ustalonego jednego standardu. A jeżeli już jest taki standard, to jest na prawde do niczego!

Bardzo proszę o pomoc! Nie mogę zrobić odstępu wynoszącego równe 5 pix od szarej tabeli z newsem, dwoma kolumnami z katalogiem i linkami. Próbowałem na wiele sposób. I albo jest odstęp na IE, a wtedy nie ma na FF sad.gif I odwrotnie! Nie można zrobić takiego samego odstępu na obu przeglądarkach!

Zobaczcie również kolumnę z lewej strony. Pod IE jest odstęp od stopki, a pod FF nie ma!

Bardzo proszę o pomoc, bo nie chciałbym wyrzucić do kosza tego projektu. Bardzo mi na nim zalezy, ale ja już nie ma na to sił i wiedzy...

Adres: http://wirtualnepomorze.pl/test/

Moim zdaniem Fire Fox to przelądarka do d... Póki projekt był prosty, to strona wyglądała tak samo na obu przeglądarkach. Jak tylko troszeczkę się skomplikował to na FF zaczeły sie problemy. Nie da się zrobić strony działąjącej idealnie po IE i Fire Foxa! A planuję stworzyć serwis dla wszystkich. Wiadomo jednak, że więcej osób ma IE i to własnie głównie pod nią musi strona wyglądać najlepiej. Nie rozumiem, jak przeglądarki moga mieć róźne standary. Aby idealnie wyglądały, to strona musi być przeładowana grafiką, aby layout był ciekawy lub odwrotnie: można użyć tylko zwykłych tabel.
nospor
2.03.2005, 15:24:57
Powiem ci tylko tyle:
To IE jest do d... . To ona żadnych standardów nie trzyma. Wszystko co działa na ff lub operze, nie zawsze będzie działać dobrze na IE. Niestety w takim przypadku trzeba albo się pogodzić z rezultatem, albo strasznie kombinować.

edit: a tak na marginesie: jakiś błąd js wyskakuje ci na stronce
Redakcja
2.03.2005, 17:17:11
Uprościłem moją stronę WWW, aby pokazać przykład. Proszę mi powiedzieć dlaczego IE uwzględnia parametr: margin-top: 5px, a Fire Fox nie? Nie lubię tego Fire Foxa sad.gif Super przeglądarka, ale popieprzona obsługa CSS sad.gif

<?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>WirtualnePomorze.pl - portal regionalny</title>
<style type="text/css">
body {margin: 0px; padding: 0px; font-family: Verdana; font-size: 11px; color: #000000; text-align: center; background-color: #FFFFFF}
p {font-size: 11px; text-align: justify}
a {text-decoration: none; font-weight: normal; color: #000000}
a:hover {text-decoration: none; font-weight: normal; color: #000080}
span {font-size: 11px; font-weight: bold}
textarea, select, input {width: 200px; height: 20px; font-size: 11px; border: solid 1px #979797}
input.submit {width: 100px; height: 20px; font-size: 11px; font-weight: bold; color: #FFFFFF; border: solid 2px #FFFFFF; background-color: #D6D982}

#strona {margin: 0 auto; margin-top: 5px; padding: 0px; width: 780px}
#naglowek {margin-top: 5px; margin-bottom: 5px}
#naglowek div#naglowek_lewa {float: left; width: 400px; text-align: left}
#naglowek div#naglowek_lewa img {width: 400px; height: 55px; border-width: 0px}
#naglowek div#naglowek_prawa {float: right; width: 380px; text-align: right}

#menu {clear: both; margin-top: 5px; 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#menu_linki {padding: 4px}
#menu div#menu_zakonczenie1 {padding-top: 1px; background: #F9CC78}
#menu div#menu_zakonczenie2 {padding-top: 1px; background: #FFAC2B}
#menu div#menu_zakonczenie3 {padding-top: 1px; background: #FCBC51}
#menu div#menu_zakonczenie4 {padding-top: 3px; background: #ECEBF2}

#wlasciwa {margin-top: 5px; width: 780px}
#wlasciwa div#wlasciwa_lewa {float: left; width: 225px}
#wlasciwa div#wlasciwa_prawa {float: right; width: 550px}

#box_pom {margin-top: 5px; padding: 1px; border: 1px solid #F9C065; background: #FFFFFF}
#box_pom a {text-decoration: underline; font-weight: normal; color: #000080}
#box_pom a:hover {text-decoration: none; font-weight: normal; color: #0000FF}
#box_pom div#box_pom_nazwa {padding: 3px 5px 3px 5px; font-family: Tahoma; font-size: 11px; font-weight: bold; text-align: left; border-bottom: 1px solid #EFEDA1; background: #FFF7BE}
#box_pom div#box_pom_wstep {padding: 5px; font-size: 10px; text-align: justify; background: #FCFDE5}
#box_pom div#box_pom_wstep img {margin-right: 5px; width: 70px; height: 70px; border: solid 1px #000000}
#box_pom div#box_pom_tresc {padding: 10px; text-align: left; line-height: 14px; background: #FCFDE5}
#box_pom div#box_pom_tresc img {margin-right: 5px; width: 11px; height: 9px; vertical-align: baseline; border: 0px}
#box_pom div#box_pom_pokaz {padding: 5px; text-align: right; background: #FCFDE5}

#box_data {padding: 5px 15px 0px 5px; text-align: right}

#stopka {clear: both; margin-top: 5px;}
#stopka img {vertical-align: middle; border-width: 0px}
#stopka div#stopka_linia1 {padding-top: 3px; background: #C4E4FD}
#stopka div#stopka_linia2 {padding-top: 2px; background: #FFFFFF}
#stopka div#stopka_linia3 {padding-top: 1px; background: #FFAC2B}
#stopka div#stopka_linki {padding: 4px; text-align: center}
</style>
</head>
<body>
<div id="strona">
<div id="naglowek">
<div id="naglowek_lewa">logo</div>
<div id="naglowek_prawa">banner reklamowy</div>
</div>
<div id="menu">
<div id="menu_linki">
<a href="index.php">Strona główna</a>
</div>
<div id="menu_zakonczenie1"></div>
<div id="menu_zakonczenie2"></div>
<div id="menu_zakonczenie3"></div>
<div id="menu_zakonczenie4"></div>
</div>
</div>

<div id="strona">
<div id="wlasciwa">
<div id="wlasciwa_lewa">
<div id="box_pom">
<div id="box_pom_nazwa">Serwis informacyjny Pomorza</div>
<div id="box_pom_tresc">cos tam jest</div>
<div id="box_pom_pokaz">cos tam jest</div>
</div>
</div>
<div id="wlasciwa_prawa">
<div id="box_data">Dzi¶ jest <span>2 marca 2005 r.</span> Imieniny <span>Heleny i Pawła</span>.</div>
</div>
</div>
</div>

<div id="strona">
<div id="stopka"><div id="stopka_linia1"></div>
<div id="stopka_linia2"></div>
<div id="stopka_linia3"></div>
<div id="stopka_linki">Copyright &copy; 2005</div>
</div>
</div>
</body>
</html>
hmmm
2.03.2005, 18:39:31
nie podam ci linka, bo nie chce mi sie szukac, ale ostatnio ktos na html/xhtml lub css (ktores z tych - chyba tongue.gif) podawal, jak wybrnac z czegos takiego.
otoz zrobil plik ze stylami dla wszystkich przegladarek z wyjatkiem IE, a potem dodal linijke nizej juz w naglowku strony html, aby dla IE byl dodawany jeszcze jeden plik css, ktory bedzie nadpisywal wartosci z tamtego.

czyli - dwa pliki css winksmiley.jpg
sf
2.03.2005, 19:52:42
Najpierw piszesz: margin: 0 auto, a potem margin-top! To nie firefox ani CSS jest popieprzony tylko skłaniałbym ten epitet w Twoją stronę. Zobacz w manualu jaka jest różnica między margin i margin-top.
Redakcja
2.03.2005, 20:02:25
Wiem, że margin-top i margin nie powinny być obok siebie. Wstawiłem to, bo chciałem coś sprawdzić i zapomniałem usunąć smile.gif
bela
2.03.2005, 20:19:00
Gdzie są moderatorzy ?

Znajomość BBCodu się kłania.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.