[html]Problem z IE Opcje

[Kirke]

Hmm... Chyba większość początkujących ma ten problem... Napisanie strony pod ff czy operę nie sprawia mi większych trudności, ale kiedy przyszło do IE... Okazało się, ze moja strona na zajęcia informatyki wygląda na ie po prostu okropnie ;/ Cały layout przesuwa się na lewo i wogóle ignoruje mój css.. Nie mam pojęcia jak to rozwiązać więc proszę o pomoc...

Stronę można obejrzeć tutaj

Będę bardzo wdzięczna za jakiekolwiek wskazówki co z tym zrobić

[Ar2r]

Próbowałaś wycentrować głównego diva (align)? Nie mogę tego znaleźć.

[Kirke]

To są jedyne atrybuty dla głównego div'a.

[HTML] pobierz, plaintext 
div#main {
    width: 780px;
    height: 100%;
    margin: 0;
    margin: auto;
}
[HTML] pobierz, plaintext 

[Ar2r]

Wobec tego spróbuj

[HTML] pobierz, plaintext 
<div id="main" align="center">
[HTML] pobierz, plaintext 

[mike]

Wobec tego spróbuj

[HTML] pobierz, plaintext 
<div id="main" align="center">
[HTML] pobierz, plaintext 

Nie ma takiego atrybutu dla elementów <div /> jak align.

Rozwiązanie:

Kod

body {
    background-image: url('images/tlo-fiolet.png');
    background-repeat: repeat-x;
    margin: 0px;
    font-family: sans-serif;
    font-size: 11px;
    color: #595959;
    /* dodaj: */
    text-align: center;
}

div#main {
    width: 780px;
    height: 100%;
    margin-top: 0px;
    margin: auto;
    /* dodaj: */
    text-align: left;
}

Taki mały trik na badzIEwIE

[drPayton]

1. Taki zapis jest bez sensu:

[HTML] pobierz, plaintext 
div#main {
width: 780px;
height: 100%;
margin: 0;
margin: auto;
}
[HTML] pobierz, plaintext 

Najpierw dajesz margines na 0, potem na auto. Centruje się dając 0 dla top/bottom i auto dla left/right, czyli:

[HTML] pobierz, plaintext 
margin:0 auto;
[HTML] pobierz, plaintext 

Ale to i tak nie zadziała dla IE. Centrowanie u Ciebie pod IE działa (sprawdzałem pod IE7) natomiast co do rozjeżdżania się kolumn, tu trzeba odpowiednio zadziałać floatami i marginesami. IE jest znany z dość, hmmm, nietypowego określania marginesów.

[Kirke]

Ok. dziękuję Udało się wycentrować
Zostało mi jeszcze rozjeżdżające się menu i menu, które wogóle odjeżdża w galerii...
A poza tym nie jestem pewna czy lightwindow działa.. ;/

[mike]

Zostało mi jeszcze rozjeżdżające się menu i menu, które wogóle odjeżdża w galerii...

Uzyj dla ul#menu_inner tych samych reguł opisujących marginesy i paddingi, których użyłaś w ul#menu.

[drPayton]

To nic nie da. Problemem jest zbyt duży (dla IE) padding-left dla ul#menu

added:
I sama szerokość tegoż ul#menu też
Dla IE po prostu te elementy nie mieszczą się obok siebie przy narzuconej szerokości 780px dla div#main

Ten post edytował drPayton 13.11.2007, 22:53:31

[Kirke]

Występuje także taki problem...
Zupełnie nie wiem jak to powinno wyglądać żeby ie to odpowidznio interpretowało.. Męczę się z tym wszystkim już od 7 godzin.. ;(

[mike]

Jest taki bardzo popularnu bug w IE, który polega na dublowaniu wartości marginesów dla elemenów, którym nadano foat.
I cibie ul#menu ma własnie float: right;
Są dwa rozwiązania:
1. Zastosować Conditional comments i stworzyc oddzielny arkusz styli dla IE, w którym wartości margnesów bedą dwa razy mniejsze. Jak pomnoży to wyjdzie tyle samo co w FF/Opera
2. Dorzuć do ul#menu wpis display: inline;

Sposób 2 nie zawsze jest dobry bo czasem dorzucenie tego nam coś rozwali. W tym przypadku powinno być OK.
Generalnie ja polecam 1.

[Kirke]

Hmmm.. Nie jestem w stanie stwierdzić czy nareszcie wszystko wygląda tak jak powinno, ponieważ nie ładują się żadne obrazki (przynajmniej u mnie ;/)...

[--kuba--]

wrzuc cale menu pomiedzy <div id="menuHolder"> </div> i podmien kilka klas w CSS na:

[HTML] pobierz, plaintext 
div#menuHolder {
	float: right;
	width: 158px;
	background-image: url('images/menu2.png');
	background-repeat: no-repeat;
}
 
ul#menu {
	margin: 50px 0 0 20px;
	padding: 0;
}
 
ul#menu li {
	list-style: none;
	margin: 0px;
	padding: 2px 0 2px 0;
}
 
ul#menu_inner {
	margin: 0;
	padding: 0 0 0 23px;
	list-style: circle;
}
[HTML] pobierz, plaintext 

[-Gość-]

poprawione dwie klasy

[HTML] pobierz, plaintext 
ul#menu li {
	margin: 0px;
	padding: 2px 0 2px 0;
}
 
ul#menu_inner {
	margin: 0;
	padding: 0 0 0 23px;
	list-style: circle;
}
[HTML] pobierz, plaintext 

[--kuba--]

sorry to te jednak:

[HTML] pobierz, plaintext 
ul#menu {
	margin: 50px 0 0 20px;
	padding: 0;
	list-style: none;
}
 
ul#menu li {
	margin: 0px;
	padding: 2px 0 2px 0;
}
[HTML] pobierz, plaintext 

[Kirke]

Ostatnie odpowiedzi bardzo mi pomogły, dziękuję ;*
Chyba ostatnie pytanie: jak sprawić aby inne obrazki wyświetlały się na środku? Miałąm z tym problem nawet pod inne przeglądarki.. ;/

[--kuba--]

tak nei bardzo rozumiem gdzie na srodku

[Kirke]

Na środku diva tresc.

I wyszło jeszcze jedno pytanie: czy tabelka w galerii jest za szeroka i jak to zmienić? (Nie jestem w stanie tego sprawdzić, ponieważ używam linuxa )

[--kuba--]

zeby zawartosc diva byla na srodku daj:
text-align: center;

a w tabeli zmien <table cellpadding="0" cellspacing="0" width=""> i daj width na szerokosc jaka trzeba ale jesli jakias fota bedzie wieksza niz powinna i tak rozepchnie tabele w prawo wiec ustaw moze stala szerokosc dla kazdej komorki <td> i dodaj overflow: hidden;

[--kuba--]

a text pod zdjeciem obejmij w jakies tagi np <span></span> i ustaw jakis rozmiar dla tego tekstu bo w IE bedzie wiekszy niz na inncyh przegladarkach