Spazmów z margin historia moja :) Opcje

[Yacho]

mam sobie strone w ktorej jest troche elementow stricte statycznych (menu itp itd) po czym nastepuje div o id contyent ktory jest generowany statycznie.... problem polega na tym ze chciabym aby rozmiar i polozenie tego diva nie bylo zalezne od tego co jest w srodku - moze procz wysokosci ktora moze byc oczywiscie dynamiczna - konkretnie problem polega na tym ze :

w div#content dodaje element fieldset - ustawiam mu margin top 10 px iii.... 10 px przesuwa sie div#content

obrazowo wyglada to tak :
http://cake.100tka.net/items/add

pod IE zachowuje sie ok a pod FF jest dupa zimna (o ironio losu).

Link do styli :
http://cake.100tka.net/css/style.css


Jesli ktos procz rozwiazania moglby napisac mi ze dwa trzy zdania dlaczego... bylbym niezmiernie wdzieczny

[jarrod]

coś ci z tym kodowaniem nie wyszło...

FF i IE różnie interpretuję padding w elementach.
Dla IE jeżeli masz div o height:100px i padding:10px to ten div nadal ma 100 px szerokości a padding jest liczony do wewnątrz diva.
Inne przeglądarki interpretują to inaczej. Padding jest liczony na zewnątrz elementu czyli element ma już 120px (bo lewa + prawa po 10px). Aby na ff nadal było 100 px musisz odjąć 20px z paddingu od szerokości i ustawić 80px.

Można sobie z tym poradzić opakowując wszystko w jednego diva o szerokości 100px a w niego dać następnego diva o szerokości 80 px i marginesie po lewej i prawej na 10 px. Wówczas przeglądarki nie zinterpretują tego inaczej.

[Yacho]

no dobrze ale to jest konstrukcja typu:

[HTML] pobierz, plaintext 
<div>
<fieldset>
<!-- tu cos --!>
</fieldset>
</div>
[HTML] pobierz, plaintext 

i teraz ustawiam dla fieldseta margin (nie padding !) i przesuwa mi sie div.... a przeciez fieldset jest wewnarz diva - obojetnie czy liczymy margin do wewnatrz fieldseta czy na zewnatrz ten div nie ma prawa sie ruszyc !

co do kodowania to szukam dobrego konwertera

Ten post edytował Yacho 31.10.2006, 19:26:58

[LBO]

Wszystlp tp wina box modelu w IE :/

Przydatny link

[Yacho]

ten link nadal nie odpowiada na moje pytanie... panowie jeszcze raz mam taka strukture jak powyzej i daje :

[HTML] pobierz, plaintext 
fieldset {
margin-top=20px;
}
[HTML] pobierz, plaintext 

i nie obchodzi mnie box model - nie obchodzi mnie czy ten margin bedzie na zewnatrz fieldsetu czy wewnatrz - on nie aplikuje sie do fieldsetu a do DIVA - odleglosc pomiedzy divem a fieldsetem jest 0. albo ja czegos nie kumam - bo moim zdaniem nie wazne czy margin jest na zewnatrz czy wewnatrz - ale powinien byc dopisany do fieldsetu - a nie jest !

Inne przeglądarki interpretują to inaczej. Padding jest liczony na zewnątrz elementu czyli element ma już 120px (bo lewa + prawa po 10px). Aby na ff nadal było 100 px musisz odjąć 20px z paddingu od szerokości i ustawić 80px.

no dobrze wiec mam div a w nim mam fieldset - fieldset ma powiedzmy 200 px + 20 margin top mamy 220 - wiec div (w ktorym umieszczony jest fieldset) powinien sie przedluzyc do 220 i pomiescic fieldset

tymczasem kiedy wrzuce do diva fieldset dodam mu margin top to div przesuwa sie w dół (i to jest poprawne gdybym divowi dawał margin - ale daje fieldsetowi !)

Ten post edytował Yacho 31.10.2006, 19:49:14

[jarrod]

sprawdź:

[HTML] pobierz, plaintext 
<div style="height:220px;border:1px blue solid;margin:0px;padding:0px;">
<fieldset style="height:200px; padding:0; margin:20px 0 0 0; border:1px #c00 solid;">tre&para;ć fieldseta
</fieldset>
</div>
[HTML] pobierz, plaintext 

[LBO]

Dobra, zerknąłem.. a dlaczego dajesz fieldset

Kod

margin-top: 1em;

? Daj div#content

Kod

padding-top: 1em;

i po sprawie.

edit:
Oczywiście

Kod

fieldset {
    /* ... */
    margin-top: 1em; /* To skasuj */
    /* ... */
}

Ten post edytował LBO 31.10.2006, 20:39:15

[jarrod]

co za różnica??

[LBO]

Taka, że działa jak chce autor topicu. Podepnij sobie do jego źródła ten CSS:

Kod

* { margin: 0; padding: 0; }
body {
    margin : 0px;
    padding : 0px;
    background : #dddddd;
    color : #000000;
    text-align: center;
    width: 100%;
}

div#content {
    width: 771px;
    margin: 0 auto; /* Skrócony zapis Yacho'wego: 0px auto 0px auto; */
    background: white;
    padding: 0px;
    padding-top: 1em;
    text-align: left;
    border: 1px solid gray; /* Tutaj też skróciłem zapis */
    border-top: none;
}

label {
    float: left;
    width: 14em;
}

fieldset {
    margin-left: 2em;
    padding: 0px;
    border: none;
}

Ten post edytował LBO 31.10.2006, 20:53:19

[Yacho]

no tak - z tym ze ja to pisze na CMSa i nie chce wplywac na styl strony za pomoca div#content - dlaczego ? dlatego ze user bedzie miec mozliwosc dostepu do wlasnych elementow html - takich jak fieldset, nie bedzie miec mozliwosci modyfikowania div#content, zreszta fieldset jest osobnym elementem i chce zeby stanowił sam o sobie - wg mnie ten margin jak najbardziej powinien dzialac - nie wiem czemu nie działa :/

Jarrod - jaka jest roznica pomiedzy tym co mam a tym co ty napisałes ? zadna poza definiowaniem height dla fieldsetu - a ja niezbyt chce to robic....

Ten post edytował Yacho 31.10.2006, 21:06:49

[LBO]

no tak - z tym ze ja to pisze na CMSa i nie chce wplywac na styl strony za pomoca div#content - dlaczego ? dlatego ze user bedzie miec mozliwosc dostepu do wlasnych elementow html - takich jak fieldset, nie bedzie miec mozliwosci modyfikowania div#content

Bedzie miał

Kod

fieldset {
        /* ... */
    margin-top: -1em;
        /* ... */
}

niweluje efekt

[Yacho]

no tak ale to nie rozwiazuje mojego problemu ;p

[LBO]

Yyyyy, jak nie? Coś nowego wyskoczyło, bo u mnie na firefoxie wygląda teraz tak samo jak na IE.

[Yacho]

dodałem margin-top: -1

i jest kasza !

http://cake.100tka.net/items/add

EDIT - poddalem sie i uzylem padding - i działa ...

Ten post edytował Yacho 1.11.2006, 02:17:57

[gekon]

IE przechodzi w tryb Quirks jeżeli definicja typu dokumentu (DOCTYPE) nie jest w jednej linii (nawet jeżeli normalnie ustawiałaby Standards mode), a widzę, że tak właśnie jest wstawione. Nie sprawdzałem, ale może pomoże i będziesz mógł użyć marginesów.

[Yacho]

ale wina nie lezy po stronie IE a po stronie FireFoxa