dziwne interpretacja parametru margin-top oraz znacznika P

[rex]

FF odsuwa od siebie divy po dodaniu parametru margin-top.

http://www.ps6.webd.pl/fftest/test2.html



Generalnie zastosowanie divów w FF jest o wiele bardziej pracochłonne i męczące niż w IE.

[Tomek]

1. pozamykaj divy - masz nie wszystkie pozamykane. Wynik z walidatora (niestety - błędne kodowanie wyklucza sprawdzenie online)

# Error Line 152, Column 6: end tag for "DIV" omitted, but its declaration does not permit this.

</BODY>

✉

* You forgot to close a tag, or
* you used something inside this tag that was not allowed, and the validator is complaining that the tag should be closed before such content can be allowed.

The next message, "start tag was here" points to the particular instance of the tag in question); the positional indicator points to where the validator expected you to close the tag.
# Info Line 135, Column 0: start tag was here.

<div id="linetop"><div id="innertop"><div id="test"><img src="gfx/topleft.png"><

2. masz nieprawidłowo osadzony styl - proponuję zerknąć do specyfikacji HTML bądź dowolnego kursu CSS
3.

Generalnie zastosowanie divów w FF jest o wiele bardziej pracochłonne i męczące niż w IE.

Bzdura jakich mało. IE nie obsługuje prawidłowo divów, ma problemy z najprostszą sprawą czyli prawidłowym box-modelem. Jest to podstawowy bug tej przeglądarki. Kod HTML ma być możliwy do zastosowania dla każdej przeglądarki, nie osobno dla IE i dla Fx (a co Konq?). Proponuję poczytać troszkę o tworzeniu layoutów bez tabel (google -> css only layout). Wtedy zobaczysz że prawdziwy problem to IE... to co jest banalne w każdej innej przeglądarce, w tej wymaga wielu dziwnych rozwiązań.

[rex]

1. Divy są pozamykane

Dla porównania

ps6.webd.pl/fftest/test2.html
ps6.webd.pl/fftest/test2a.html

W test2a jest ten sam kod tylko dodanych więcej przejść do nowej lini

2. Osadzenie stylu w ten sposób nie powinno stwarzać problemów ale dodałem deklarację

3. Póki co najwięcej problemów mam właśnie z FF.
Parametr margin powoduje rozjeżdzanie divów.

Wersja uproszczona ps6.webd.pl/fftest/test6.html i dalej ten sam problem.

[rex]

Jedyny sposób by spowodować przesunięcie elementu jest ustawienie

margin:0px; padding: pożądana wartość;

W IE wystarczy poprostu ustawić margin i nie przysparzać sobie dodatkowego kodu.

[Tomek]

hm... jedno padding więcej przy tej ilości divów cię ratuje?
IMO jest to błąd spowodowany klasycznym boxmodelem - omawiany 1000x w sieci
co do 1 - kierowałem się walidatorem, który wywala właśnie taki błąd
3. - to że tobie źle idzie, nie oznacza że to Fx ma problemy - wierz mi gdyby IE choć po części tak dobrze interpretował CSS jak Fx... nie miałbyś tego problemu !

ps - zerknij też tutaj - nie czyścisz float: http://www.mozillapl.org/forum/about-28486.html

[rex]

Jeżeli robię coś błędnie to jak zastosować ten boxmodel prawidłowo bez użycia wskazanej przeze mnie wyżej metody ?

[Tomek]

1. http://kurs.browsehappy.pl/CSS/BoxModel
http://blog.yano.ws/2006/07/12/box-mode ... low-kilka/
google -> box model. Poczytaj jeszcze troszkę o czyszczeniu float (linka dostałeś)
2. ok - troszkę inaczej - bo patrzę na ten twój lay i zaczynam się zastanawiać który element wg ciebie jest źle. Możesz podać konkretnie który element sprawia ci problem? Wtedy będzie łatwiej troszkę. Jakbyś dodał jeszcze zrzut ekranu jak to ma wg ciebie wyglądać byłoby nieźle.
3. hm... a może to efekt divitis? Troszkę za dużo tam tych divów... tak jakbyś tabelkę przerabiał na div... Właśnie przez tą ilość divów jest dość ciężko wychwycić błąd.
4. zastosowana przez ciebie metoda... jeśli rozwiązuje problem jest dobra (przy uwzględnieniu pkt. 3)

[Gość]

Co do modelu boxowego to sprawdzę wszystko dokładnie.
Wydaje mi się, że w tym przypadku czyszczeniu floatów jest zbędne choć też sprawdzę to jeszcze raz.

Link do screena z FF i IE

http://www.ps6.webd.pl/fftest/ff.png

http://www.ps6.webd.pl/fftest/ie.png

Rożnicę widać gołym okiem więc chyba nie muszę tłumaczyć w czym rzecz.

[helios]

FF odsuwa od siebie divy po dodaniu parametru margin-top.

Nie rozumiem, o co Ci chodzi. Strona wyświetla się właściwie. Jak nie chcesz odstępu u góry, to nie używaj w kodzie "margin-top: 10px". Jeżeli problemem jest Internet Explorer, to ja Ci niestety nie pomogę.

[rex]

Chodzi mi o to, że:
1. Nie muszę stosować marginu by divy były odchylone od siebie wystarczy znacznik p
2. Margin stosuje wewnątrz diva dla znacznika p czemu więc rozsuwa divy a nie odsuwa znacznika p od diva

[Grzesiek W]

mam ten sam problem - zaskakujace jest jedynie to, ze DIV jesli jest pusty, to wyswietlany jest ok... jesli zacznie sie tekstem, to tez..

ale jak zaczynam w DIVie od np <h1>, albo od <ul>, to niezaleznie od deklarowanych padding, margin itp div w FF zyskuje 10px margines...
DLACZEGO???

Kod: Zaznacz cały

mam ten sam problem - zaskakujace jest jedynie to, ze DIV jesli jest pusty, to wyswietlany jest ok... jesli zacznie sie tekstem, to tez..

ale jak zaczynam w DIVie od np <h1>, albo od <ul>, to niezaleznie od deklarowanych padding, margin itp div w FF zyskuje 10px margines...
DLACZEGO???

[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<title> Impresariat BLUE </title>
<style type="text/css">
body {
   background-color: #000;
   padding: 0px;
   margin: 0px;
   font-family: Arial;
   font-size: 13px;
   font-variant: small-caps;
   }
   
div {
   padding: 0px;
   margin: 0px;
}
   
#wrapper {
   width: 780px;
   height: 550px;
   background-color: #FFF;
   margin: auto;
   margin-top: 10px;
}

#container {
   width: 50%;
   height: 100%;
   float: right;
   background-color: #F00;

}

#spacer {
height: 60%;
width: 45px;
font-size: 1px; /* to make sure width is not overridden */
padding: 0;
margin: 0;
background-color: blue; /* visual effect only */
}

#menu {
   width: 60%;
   height: 40%;
   background-color: #0F0;
   color: black;
   margin: 0;
   }
</style>
</head>
<body>
 <div id="wrapper">
  <div id="container">
   <div id="spacer"><h1>MENU</h1></div>
      <div id="menu">
   <h1>MENU</h1>
    <ul>
     <li><a href="wizaz.html">Kurs wizazu</a></li>
     <li><a href="wizaz.html">Kurs wizazu</a></li>
     <li><a href="wizaz.html">Kurs wizazu</a></li>
    </ul>
   </div>
  </div>
 </div>
</body>
[/code]

[rex]

Dodając tą linię do kodu wszystko już jest w porządku

<h1 style="margin:0; padding:10px">MENU</h1>

Na razie to załatwia sprawę ale dalej zastanawiam się co jest nie tak ?

[rumsztyk]

przede wszystkim rex musisz posłuchać tomaśka (dziwnie się odmienia) i przy deklaracji strict dla html poprawnie pozamykać divy albo wykasować deklarację aby przeglądarki przechodziły w tryb quirks wtedy będziesz miał większą "kompatybilność", choć to rozwiązanie nieeleganckie.
Układ polegający na kilku zagnieżdżonych w sobie divach i deklarowaniu margin dla każdego z nich (lekko na chybił trafił) powoduje, że nawet trudno taki układ przetestować aby Ci pomóc gdyż prościej go przerobić.
Główne założenia (jeżeli pozostaniesz przy strict).
Nie podawałbym text-align: center w body.
To nie służy do środkowania elementów układu strony a jedynie zawartości elementów blokowych w których znajduje się tekst choć oczywiście nie jest to niezgodne ze standardami.
W body zadeklarowałbym jedynie kolor tła i czcionkę najlepiej w procentach lub po prostu font-size: small a następnie kontrowałbym wielkość czcionki dla elementów które zawierają już tekst przy pomocy % lub em, to pozwoli użytkownikom głupIEj przeglądarki na dowolną modyfikację wielkości czcionki.
Ustawiłbym JEDEN główny pojemnik dla zawartości całej strony za pomocą width: 680px i margin: auto ewentualnie margin: 10px auto - daje 10px od dołu i góry a po bokach auto czyli wyśrodkowuje układ trzymający całość treści strony na środku.
Następnie po kolei umieszczałbym elementy div zgodnie z kolejnością jaką chcesz uzyskać na stronie (bez zagnieżdżania).
Dzięki temu uzyskasz bardziej elegancki (przejrzysty układ),
łatwiej będzie można zerknąć i Ci pomóc,
nie będziesz walczył z dziedziczeniem dla zagnieżdżonych elementów.
Osobiście kibicuję - jestem fanem gimpa
Jeżeli dalej będziesz miał kłopot a posłuchasz tomaśka podeślę Ci gotową regułę do wyśrodkowania bardzo webmastersko-elegancką ale...
musisz wykazać dobrą wolę.
Reasumując
Ten układ osobiście porzuciłbym lub wszedł w tryb quirks


//tomasiek
Pewnie nie uwierzysz ale jesteś jednym z niewielu który to prawidłowo odmienił