Tryb drzewa | Tryb normalny

Webski · 01-02-2012 04:29

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;

}

Ancik · 01-02-2012 05:53

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

kornell · 03-02-2012 17:14

bawiłem się trochę tym kodem, ale mam problem : daj mi markup .
Jak chcesz żeby to wyglądało?

Webski · 06-02-2012 04:33

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

Na IE:

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

**Kartofelek** · 06-02-2012 15:58

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ć.