Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
[css] Problem z IE - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [css] Problem z IE (/thread-css-problem-z-ie)

[css] Problem z IE - Webski - 01-02-2012

Witam!

Mam problem z css: napisany kod działa elegancko ale tylko na Firefoxie. Na IE niestety wszystkie elementy przesuwają się na inne miejsca. Czy da się to ogarnąć tak żeby efekt był taki sam na obu przeglądarkach (najlepiej oczywiście także na Chromie itp.)

Kod:
Kod:
body {
    margin: 0;
    background-color:  white;
    padding: 10px;
}

div#container {
    position: relative;
    min-height: 400px;
    border: 3px solid #555555;
    max-width: 1150px;
    min-width: 750px;
    margin: auto;
    background-color:  green;
}

div#first-column,
div#third-column {
    position: absolute;
    top: 0;
    bottom: 0;
    border: 1px solid #808080;
    background-color: blue;
    width: 170px;
    margin: 238px 20px 13px 20px;
    padding: 10px 0px 0px 0px;
}

div#first-column {
      left:0;
      height: 210px;
}

div#third-column {
     right: 0;
     height:  260px;
}

div#second-column {
     position: absolute;
     background-color: blue;
     top: 0;
     bottom: 0;
     border: 1px solid #808080;
     width: 170px;
     height: 163px;
     margin: 470px 20px 13px 20px;
     padding: 10px 0px 0px 0px;
}

div#newsletter {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  border: 1px solid #808080;
  background-color: blue;
  color:  #FFCC00;
  width:  170px;
  height: 118px;
  margin: 520px 20px 13px 20px;
  padding: 5px 0px 0px 0px;
}

div#content {
    margin: 238px 205px 13px 205px;
    background-color: blue;
    min-height: 392px;
    border: 3px solid #555555;
    padding: 5px 15px 5px 15px;
}

div#header,
div#footer {
    margin: auto;
}

div#header {
    position: absolute;
    top: 0;
    background-color: red;
    border-bottom: none;
    width: 1140px;
    height: 225px;
    margin: 5px;
}

div#footer {
    border-top: none;
    color: snow;
    background-color: blue;
    height: 20px;
    width: 1150px;
}


RE: [css] Problem z IE - Ancik - 01-02-2012

Poczytaj trochę o CSS. Używaj floatu do pozycjonowania elementów.

RE: [css] Problem z IE - Webski - 06-02-2012

Generalnie to na Firefoxie wygląda to tak:
[Obrazek: f36c335c45c447e0med.jpg]

Na IE:
[Obrazek: 5da5e5f77e4100b5med.jpg]

Kombinuję w każdą stronę i nie wychodzi... Jakieś pomysły?

RE: [css] Problem z IE - Kartofelek - 06-02-2012

Pewnie sprawdzasz na staroświeckim IE. A on miał problemy z box-model (poczytaj w google).
Po pierwsze stare IE nie wspiera min-height. Aby to zasuportować po prostu użyj dla IE height. On taki blok automatycznie rozciągnie. Użyj do tego albo komentarzy waunkowych albo gwiazdki: *height:....px; Dodatkowo przez wadliwą obsługę box-model paddingi są inaczej kalkulowane niż w normalnych przeglądarkach, stąd musisz to tak samo jak z poprzednią właściwością skorygować.