Jak zniwelować 1px odstep elementów div internet explorer


(userrpl) #1

Witam. Jak się pozbyć odstępu między graficznymi ramkami w firefoxie, oraz operze wszystko wygląda dobrze natomiast w IE6 jest nie do przyjęcia. Poniżej screeny.

Tak wyświetla IE6.

explorerc.png

A tu poprawnie firefox.

firefoxji.png

div#tresclewa {

width: 213px;

height: 367px;

float: left;

display: inline;

background: url('fg_03.jpg');

}


div#tresc {

width: 514px;

margin: 0 250px 0 213px;

height: 367px;

background: url('fg_04.jpg');

}

(Jacek705) #2

To jest właśnie IE6 :slight_smile: ja to zatuszowałem kolorem tła div'a nadrzędnego, ale może jest jakiś inny sposób :stuck_out_tongue:


(GediMaster) #3

Ustawiasz 'display: inline' na elemencie z włączonym opływaniem? Przy opływaniu element zawsze otrzymuje domyślnie 'display: block'. Usuń 'display: inline' :).


(userrpl) #4

Niestety nie pomogło usunięcie właściwości display :frowning: . Nie ma jakiegoś sensownego hacka na taki błąd?


(GediMaster) #5

Masz link do strony? Jak nie, to wklej kod HTML. CSS też mile widziany :slight_smile:


(userrpl) #6

(GediMaster) #7

A tak próbowałeś?

div#tresclewa {

width: 213px;

height: 367px;

float: left;

background: url(fg_03.jpg);

}


div#tresc {

width: 514px;

height: 367px;

float: left;

background: url(fg_04.jpg);

}

(userrpl) #8

Po dodaniu float tresc wyrzuca poza tło body.


(GediMaster) #9

Którą treść wyrzuca, bo nie rozumiem ;]? Mógłbyś to spakować w zip i dać do ściągnięcia? Poza tym co chciałbyś uzyskać i dlaczego to takie sztywne wymiary. Ma coś być po prawej i pod spodem tych dwóch divów?


(userrpl) #10

pod spodem ma być druga część treści natomiast po prawej menu. A wyrzuca "tresc" po dodaniu float: left jest poniżej "tresclewa"

a tu link do paczki:

http://hotfile.com/dl/48123171/3218623/images.rar.html


(GediMaster) #11
html, body {

margin: 0;

padding: 0;

}

body {

width: 980px;

height: 700px;

background: silver url(Bez-nazwy-1.jpg) no-repeat;

}

div#top {

width: 980px;

height: 164px;

background: yellow url(fg_01.jpg);

}

#menu {

width: 253px;

height: 367px;

float: right;

background-color: pink;

}

div#tresclewa {

width: 213px;

height: 367px;

float: left;

background: gray url(fg_03.jpg);

}


div#tresc {

width: 514px;

height: 367px;

float: left;

background: green url(fg_04.jpg);

}

div#tresc2 {

height: 169px;

clear: both;

background-color: white;

}

i układ DIV:

MENU

LEWA

TREŚĆ

TREŚĆ 2
[/code]

Kolory teł dodałem testowo, aby widzieć. Zobacz, czy o to chodzi. Poza tym nie wiem czemu to tak na sztywno ma być i czemu nie wycentrowane w poziomie ;].


(userrpl) #12

Tu możesz dokładnie zobaczyć mój projekt:

http://hotfile.com/dl/48123171/3218623/images.rar.html


(GediMaster) #13

Pasuje mój sposób :). Ja nie widzę problemu, żeby nie zrobić jak chcesz, ale masz niedopasowane grafiki, no i trochę jednak inaczej trzeba się za to zabrać. Czy rzeczywiście musi to być takie sztywne? Chodzi mi o to, czy strona ma mieć 980px/700px, szczególnie zadaną wysokość? Nie lepiej jak będzie się rozciągać w dół w zależności od ilości treści?

PS

Czy wygląd ma być taki jak na obrazku "Bez nazwy 22 kopia.jpg"?


(userrpl) #14

Nie musi być takie sztywne dałem takie ponieważ wrzuciłem tam tło do podglądu projektu. Tak całość ma wyglądać tak jak na obrazku "Bez nazwy 22 kopia.jpg"


(Anddezr+Dobreprogramy Pl) #15

Na samym początku resetuje się wszystko tak, żeby we wszystkich przeglądarkach było jednakowo.

http://meyerweb.com/eric/tools/css/reset/


(GediMaster) #16

@userrpl

W tym kształcie, co proponowałeś nie można w pełni zrobić takiego layoutu jak tylko wykonać go "na sztywno", bo żeby layout się rozciągał na wysokość, trzeba by odpowiednio wykonać grafiki. Ale częściowo wykonałem taki layout z tych grafik, co podrzuciłeś w pliku :).

Nie jest to "mistrzostwo świata", ale masz jakąś tam bazę do dalszej pracy :). Menu zrobione tylko na wygląd, bo pewnie planujesz zrobić, aby obrazki zmieniały się też na :hover, ale nie miałem już czasu.

Tutaj możesz podejrzeć i pobrać plik: LINK!

Jak Ci się spodoba, to pomogę w miarę wolnego czasu :wink:.

Pozdroofko,


(Jacek705) #17

@GediMaster sprawdzałeś pod IE6? Tam się potrafią różne dziwne rzeczy dziać :slight_smile:


(GediMaster) #18

Sprawdzałem, bo posiadam MSIE6. Jest dobrze, ale musi być plik msie.css. Nie chciałem hacków ładować do głównego css :). W zasadzie znam IE6 jak własną matkę, ale czasem i tak potrafi zaskoczyć :stuck_out_tongue_winking_eye:. Nie mniej w tym przypadku póki się czegoś nie zepsuje, powinno być ok 8) .


(userrpl) #19

Świetnie :smiley: powrócił mi zachęt do dalszej pracy :slight_smile: dziękuje GediMaster przeanalizuje cały kod i sprawdzę co tam wyczarowałeś :wink: