Inny wyglad w Linuksie, inny w Windows, CSS - rowne kolumny Opcje

[a600user]

Haj po swietach, dosiego roku itp ;-)

Tym razem mam dziwny problem, ktorego sam nie rozwiaze. Moge uzyc innego rozwiazania, jak np. tabelka, ale (1) nie chce i (2) ciekawi mnie, dlaczego tu jest blad.
Otoz zrobilem layout na divach w stylu DIV_1 jako naglowek na 100% szerokosci na gorze, ponizej DIV_2 jako kolumna lewa i DIV_3 jako kolumna prawa. To jest OK. I teraz zapragnalem pod ta zawartoscia umiescic po lewej stronie szary pasek (o szerokosci DIV_2), a po prawej tekst o szerokosci DIV_3 - ale tak, by obie "kolumny" rozszerzaly tak samo, gdy tylko jedna z nich bedzie dluzsza. Znany temat - Faux Columns, inne hacki w stylu przykrywanie i przesuwanie wartsw... Ja postanowilem zrobic cos a'la Faux Columns - czyli postanowilem dwie dodatkowe "kolumny" zawrzec w warstwie nadrzednej z ustanowionym obrazkiem tla o wysokosci 1px (z lewej szary pasek, po prawej kolor tla strony), ktory powtarzany w pionie dawalby zludzenie dwoch kolumn.
No i tak tez zrobilem. Problem jest taki, ze na Linuksie, gdzie robie strone, wszystko wyglada OK - zarowno pod Firefoksem 3.6.13), Opera, jak i Chromium. Problem pojawia sie z Windowsem... jak zwykle ;-) uzywam VirtualBoksa i na nim mam XPka oraz Win7 z 4 przegladarkami: Firefox, MSIE8, Opera, Chrome - zadna z tych przegladarek za cholere nie wyswietla tego szarego paska. Odswiezalem strony, wlaczalem systemy na nowo - nic nie pomaga. Lacze sie oczywiscie ze swoim localhostem.
Dla pewnosci wrzucilem strone na serwer publiczny i polaczylem sie z innego komputera z Windows - tam paska rowniez nie widac. Wkurzajace.

Jak pisalem - moge sobie zrobic tabelke, ale nie w tym rzecz. Prosze o kogos bardziej doswiadczonego o wytlumaczenie - gdzie tkwi przyczyna takiego zachowania ? Bo roznice miedzy przegladarkami to zna chyba kazdy - ze co innego w MSIE, co innego w Firefoksie, ale zeby te same przegladarki pod roznymi systemami

Oto kod.

PHP:

[PHP] pobierz, plaintext 
echo ('<DIV id="container">');
 echo (' <DIV id="div_1">');
 echo ('  <DIV id="logo"><IMG SRC="gui/1-01.png" BORDER=0 ALT="logo"></DIV>');
 echo ('  <DIV id="name"><IMG SRC="gui/1-02.png" BORDER=0 ALT="company name"></DIV>');
 echo ('  <DIV id="gray_filler_1"></DIV>');
 echo ('  <DIV id="tel"><IMG SRC="gui/1-03.png" BORDER=0 ALT="telephone"></DIV>');
 echo ('  <DIV id="bar"><IMG SRC="gui/1-04.png" BORDER=0 ALT="horizontal bar"></DIV>');
 echo (' </DIV>');
 echo (' <DIV id="div_2">');
 echo ('  <DIV id="left_part"><IMG SRC="gui/2-01.png" BORDER=0 ALT=""></DIV>');
 echo ('  <DIV class="menu_left"><IMG SRC="gui/2-02.png" BORDER=0 ALT=""></DIV>');
 echo ('  <DIV class="menu_left"><A HREF="index.php"><IMG SRC="gui/2-03-home.png" BORDER=0 ALT=""></A></DIV>');
 echo ('  <DIV class="menu_left"><IMG SRC="gui/2-04.png" BORDER=0 ALT=""></DIV>');
 echo ('  <DIV class="menu_left"><A HREF="about.php"><IMG SRC="gui/2-05-about.png" BORDER=0 ALT=""></A></DIV>');
 echo ('  <DIV class="menu_left"><IMG SRC="gui/2-06.png" BORDER=0 ALT=""></DIV>');
 echo ('  <DIV class="menu_left"><IMG SRC="gui/2-07-gallery.png" BORDER=0 ALT=""></DIV>');
 echo ('  <DIV class="menu_left"><IMG SRC="gui/2-08.png" BORDER=0 ALT=""></DIV>');
 echo ('  <DIV class="menu_left"><IMG SRC="gui/2-09-services.png" BORDER=0 ALT=""></DIV>');
 echo ('  <DIV class="menu_left"><IMG SRC="gui/2-10.png" BORDER=0 ALT=""></DIV>');
 echo ('  <DIV class="menu_left"><IMG SRC="gui/2-11-contact.png" BORDER=0 ALT=""></DIV>');
 echo ('  <DIV class="menu_left"><IMG SRC="gui/2-12.png" BORDER=0 ALT=""></DIV>');
 echo (' </DIV>');
?>
 <DIV id="div_3">
  <IMG SRC="gui/3-01.png" BORDER=0 ALT="main picture">
 </DIV>
 <DIV id="footer">
  Link do mojej strony
 </DIV>
[PHP] pobierz, plaintext 

CSS:

[PHP] pobierz, plaintext 
* { /* usuniecie marginesow i paddingu */
        margin: 0px;
        padding: 0px;
	border: 0px;
}
html, body {color: #e0e0e0; font-size: 12px; font-family: Verdana, Tahoma, Arial; background-color: #000000;}
 
#container {position: relative; margin-left: auto; margin-right: auto; width: 1000px; border: 0px; overflow: hidden;}
 
#div_1 {position: relative; display: block; left: 0px; top: 0px; width: 1000px; height: 98px;}
#logo {position: absolute; left: 0px; top: 0px; width: 188px; height: 88px;}
#name {position: absolute; left: 188px; top: 0px; width: 248px; height: 86px;}
#bar {position: absolute; left: 188px; top: 86px; width: 812px; height: 5px;}
#tel {position: absolute; right: 0px; top: 60px; width: 131px; height: 26px;}
#gray_filler_1 {position: absolute; left: 10px; top: 88px; width: 178px; height: 10px; background-color: #0e0e0e;}
 
#div_2 {position: relative; left: 0px; top: 0px; width: 188px; min-height: 387px;}
#left_part {position: absolute; left: 0px; top: 0px; width: 10px; height: 387px;}
.menu_left {position: relative; left: 10px;}
 
#div_3 {position: absolute; left: 188px; top: 98px; width: 812px;}
 
#footer {background-image:url('/gui/div_bkg.png'); background-repeat:repeat-y; padding-left: 193px; padding-right: 5px; 
	padding-top: 50px; text-align:center; font-family: Verdana; font-size: 7pt; color: #808080; line-height: 200%;}
[PHP] pobierz, plaintext 

P.S.
Probowalem bez slasha w #footer - wtedy obrazek znika i na linuksie. Probowalem tez zmieniac sam obrazek (jakby Win nie czytal PNG) - kolory, na JPEGa - bez zmian, ta warstwa po prostu sie nie pokazuje w Windows, co widac po zmienionym kolorze drugiej "kolumny", a raczej nie widac tego koloru pod Windowsem... WebDeveloper dla Firefoksa pokazuje, ze warstwa ma numer 22 i ze jest ostatnia, wiec nie jest niczym przykryta. Probowalem DIVa #footer wyrzucac poza #container i pozycjonowac osobno - to samo, rece opadaja - tekst z #footera jest OK, a tla nie ma...

OK, rozwiazalem temat. Caly dzien mi zeszlo, co za kila. Pisze, bo moze komus sie przyda ;-)
background-image: url(../gui/div_bkg.png);


Ten post edytował a600user 29.12.2010, 23:10:18