[css] Layout na divach - na IE legnie

0

Witam. Stworzyłem layout na divach. Na Operze i Firefoksie wszystko jest OK, czyli TAK. Niestety na IE się rozwala - wyglada to wtedy TAK :(

Oto kod CSS:

body {
  font: 8pt verdana;
  margin: 0px;
}

#all {
  width: 768px;
  margin: 0px;
}

#top {
  background: url(img/logo.jpg) no-repeat;
  height: 20px;
  padding-left: 360px;
  padding-top: 75px;
  width: 408px;
}

#szukaj {
  left: 584px;
  top: 57px;
  float: left;
  vertical-align: bottom;
  position: relative;
}

#header {
  border: 1px #cacaca solid;
  border-bottom: 0px;
  background-color: #fafafa;
  padding: 2pt;
  width: 401px;
}

I kod HTML:
<center>

<form action="index.php?show=szukaj" method="post"> <input type="text" name="zapytanie" size="22" /> <input type="submit" value="Szukaj" /> </form>
</center> ```

Wiecie co zrobić, żeby na IE wygladało tak jak na FF/Operze? [???]

0

dla pól szukaj / wpisz fraze podaj może wysokość bo tak się skazujesz na wartość domyślną w przeglądarce
padding podawaj może w px a nie w pt
jeśli podajesz padding to w ie się dodaje do szerokości zamiast być "w", jeśli nie podasz odpowiedniego doctype
daj może do styli
form {display: inline}

0

Hmm...
Próbowałem dwoma sposobami: jeden z nich to:
#szukaj {
float: right;
vertical-align: bottom;
position: relative;
}
[...]
<form action="index.php?show=szukaj" style="top: 55px;position: relative" method="post">
<input type="text" style="top: 16px;position: relative" name="zapytanie" />
<input type="submit" style="top: 16px;position: relative" value="Szukaj" />
</form>

[padding zmieniłem na px :)]

W obu (zaprezentowałem jeden) przypadkach w IE jest dobrze, a za to w FF/Operze formularz najeżdża na belkę z menu... :(
0
Adamo napisał(a)

jeśli podajesz padding to w ie się dodaje do szerokości zamiast być "w", jeśli nie podasz odpowiedniego doctype

Własnie ze IE jest "w" czyli tak jak każdy sie spodziewa, a dziwnie sie zachowuja przegladarki zgodne ze standardem (dodaja padding do szerokosci).. imho to najwiekszy bezsens jaki wymyśliło w3c.

dowód: http://www.quirksmode.org/css/box.html - byc moze to jest własnie rozwiazanie problemu

ps. wydaje mi sie ze doctype nie ma tu zadnego znaczenia

//zgadzam się z tym całkowicie - akurat wersja 'standardowa' jest całkowicie nieprzemyślana, wbrew logice i bardzo uciążliwa - M

0

Sam DOCTYPE ma sporo do rzeczy - IE przełącza się w zależności od Doctype na różne tryby i różnie interpretuje box-model.

Co do tego, który box-model jest lepszy, to jest to temat na taką samą dyskusję jak ta o tym, czy wyrzucenie "target" z dokumentacji strict było dobrym posunięciem. Kilkanaście stron dyskusji bez jednoznacznego wniosku.

0

Bez doctype to niepotrzebnie nawet robisz na div'ach bo rownie dobrze mozesz robic na tabelkach. To po piwersze. Po drugie jezeli juz na divach to daj sobie spokoj ze znacznikiem center - i tu rowniez mozesz wszystko walnac po staremu w tabelki.

0
Kooba napisał(a)
Adamo napisał(a)

jeśli podajesz padding to w ie się dodaje do szerokości zamiast być "w", jeśli nie podasz odpowiedniego doctype

Własnie ze IE jest "w" czyli tak jak każdy sie spodziewa, a dziwnie sie zachowuja przegladarki zgodne ze standardem (dodaja padding do szerokosci).. imho to najwiekszy bezsens jaki wymyśliło w3c.

no no wiem, tylko się pomyliłem, myślałem o czym innym a pisałem jeszcze myśl sprzed 2 minut i tak wyszło ;P

0

To ja was pocieszę, że w CSS3, które już za 15 lat będzie obsługiwane przez IE ;) będzie zdaje się przełączanie box-model na content-box i "normalny" w naszym rozumieniu.

Bo wy nie wiecie, że jak się mierzy długość pojemnika, to nam chodzi o długość zawartości? ;D

0
Ktos napisał(a)

To ja was pocieszę, że w CSS3, które już za 15 lat będzie obsługiwane przez IE ;) będzie zdaje się przełączanie box-model na content-box i "normalny" w naszym rozumieniu.

to już działa przecież, wystarczy dać:

  • Mozilla i pochodne: -moz-box-sizing: border-box;
  • Opera: box-sizing: border-box;
  • IE: DOCTYPE nie w pierwszej lini pliku
    i dziala tak samo dla wszystkich, no i normalnie ;)
0
piechnat napisał(a)

to już działa przecież, wystarczy dać:

  • Mozilla i pochodne: -moz-box-sizing: border-box;
  • Opera: box-sizing: border-box;
  • IE: DOCTYPE nie w pierwszej lini pliku
    i dziala tak samo dla wszystkich, no i normalnie ;)

Już się sam pogubiłem :p Dałem to co powiedziałeś do #szukaj, a #sukaj i formularz wyglądajątak jak zaprezentowałem ostatnio, i jakoś nie idzie nic... BTW: próbowałem też inaczej ale coś chyba źle... Możesz powiedzieć w takim razie do czego to wkleić? :)

maniek_2 napisał(a)

Bez doctype to niepotrzebnie nawet robisz na div'ach bo rownie dobrze mozesz robic na tabelkach. To po piwersze. Po drugie jezeli juz na divach to daj sobie spokoj ze znacznikiem center - i tu rowniez mozesz wszystko walnac po staremu w tabelki.

zniknął [green] W zamian dałem do #all: margin: 0 auto;

0
Coldpeer napisał(a)

Już się sam pogubiłem :p Dałem to co powiedziałeś do #szukaj, a #sukaj i formularz wyglądajątak jak zaprezentowałem ostatnio, i jakoś nie idzie nic... BTW: próbowałem też inaczej ale coś chyba źle... Możesz powiedzieć w takim razie do czego to wkleić? :)

ja to nadaje w CSS ogolnie wszystkim divom, ale to nic nie da bo twoj problem jest z czym innym zwiazany, chodzi o polaczenie position: relative i float: left, nigdy nie widzialem takiego polaczenia, pomyslowe, ale IE zachowuje sie tak jak by float nie bylo, tzn uwzglednia puste miejsce ktore poprzednio zajmowal ten kontener, mysle ze powinienes sprobowac to zrobic inaczej, albo poczekac na kogos kto zna jakies rozwiazanie...

1 użytkowników online, w tym zalogowanych: 0, gości: 1