Responsive Webdesign - Darstellung falsch

Matlox

Mitglied
Hallo liebe CSS´ler,
ich möchte mich gerne mehr mit Responsiven Webdesig in HTML und CSS befassen.

Ich bin das Tutorial von Grid durchgegangen und das klappt auch soweit ganz gut, nur mag der Internet Explorer mal wieder nicht mitspielen.

rdigt
(https://pl.vc/rdigt)

Wie man sieht, ist im Firefox alles wie ich will und im Internet Explorer verschiebt sich ein DIV nach unten, doch warum?

INDEX.html
HTML:
<!DOCTYPE html>
<html>
<head>

<title>TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="css/grid.css">

</head>

<body>

<div class="head">
  <div class="row clearfix">
    <div class="headcolumn half">
      TESTLINK TESTLINK TESTLINK TESTLINK TESTLINK TESTLINK TESTLINK TESTLINK
    </div>
  </div>
</div>

<div class="container">
  <div class="row clearfix">
    <div class="column fourth">
      TEST2
    </div>
    <div class="column half">
      TEST2
    </div>
    <div class="column fourth">
      TEST2
    </div>
  </div>
</div>

</body>
</html>

GRID.css
CSS:
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box;mbox-sizing: border-box; background-color:#070C0A;}
html {font: 100%/1.5 "Open Sans", sans-serif;font-weight: 400;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;}

@media (min-width: 40rem) {html { font-size: 112%;}}
@media (min-width: 64rem) {html { font-size: 120%;}}

body {background-color: #fff; color: #555; padding: 0; margin: 0;}

.head {margin: 0 auto; max-width: 100%; width: 100%; margin-bottom:50px;}
.headcolumn {padding: 0; margin: 0; background-color:#555555;}

@media (min-width: 40rem) {
.headcolumn {margin: 0; padding-left: 1rem; padding-right: 1rem;}
.headcolumn.full { min-width: 100%; }
.headcolumn.two-thirds { min-width: 66.7%; }
.headcolumn.half { min-width: 50%;}
.headcolumn.third { min-width: 33.3%; }
.headcolumn.fourth { min-width: 25%; }
.headcolumn.flow-opposite { float: right; }
}

.container {margin: 0 auto; max-width: 100%; width: 90%; border-style: dotted; border-width: 5px;}
.column {padding: 0; margin: 0; background-color:#F2F2F2; border-style: double; border-width: 5px; }

@media (min-width: 40rem) {
  .column {
    float: left;
    margin: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .column.full { width: 100%; }
  .column.two-thirds { width: 66.7%; }
  .column.half { width: 50%; }
  .column.third { width: 33.3%; }
  .column.fourth { width: 25%; }
  .column.flow-opposite { float: right; }
}


.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

Vielen Dank für eure Hilfe.
Lg Matlox
 
im Internet Explorer verschiebt sich ein DIV nach unten, doch warum?
Der Grund ist doch auf dem Bild deutlich zu erkennen o_O

Die Frage hätte daher eher lauten müssen, warum IE alle drei Blöcke breiter darstellt, als die übrigen Browser.

Und spätestens hier wäre Dir dann auch in den Sinn gekommen, dass die prozentuale Definition/Zuordnung der Breiten unterschiedlich interpretiert wird.

Ausgangspunkt ist die Klasse .container mit width:90%. Die Summe der drei darin eingebetteten Blöcke ergibt aber als Mindestbreite 100%.

Firefox, Chrome, usw. mögen es noch so umsetzen, und 2*25% + 50% von 90% rechnerisch ermitteln, IE hingegen beharrt auf den 100%.

[edit]Tipp-Ex[/edit]
 
Zuletzt bearbeitet:
Der Grund ist doch auf dem Bild deutlich zu erkennen o_O

Die Frage hätte daher eher lauten müssen, warum IE alle drei Blöcke breiter darstellt, als die übrigen Browser.

Und spätestens hier wäre Dir dann auch in den Sinn gekommen, dass die prozentuale Definition/Zuordnung der Breiten unterschiedlich interpretiert wird.

Ausgangspunkt ist die Klasse .container mit width:90%. Die Summe der drei darin eingebetteten Blöcke ergibt aber als Mindestbreite 100%.

Firefox, Chrome, usw. mögen es noch so umsetzen, und 2*25% + 50% von 90% rechnerisch ermitteln, IE hingegen beharrt auf den 100%.

[edit]Tipp-Ex[/edit]

Hallo SpiceLab,
danke schon einmal für deine Hilfe.

Das gleiche hab ich mir auch gedacht, ist aber nicht die Lösung.
Ich habe nun den .container auf width: 100%; gesetzt, nun passiert das gleiche nur in groß.

Lg Matlox

csst2bgrfy8q9.jpg
(http://www.fotos-hochladen.net/view/csst2bgrfy8q9.jpg)
 
Zuletzt bearbeitet:
Das gleiche hab ich mir auch gedacht, ist aber nicht die Lösung.
Ich habe nun den .container auf width: 100%; gesetzt, nun passiert das gleiche nur in groß.
Kommando zurück - hab vorhin in Deinem CSS einen Tippfehler übersehen :oops:
CSS:
mbox-sizing: border-box;
kennt IE nicht.

Dafür aber
CSS:
box-sizing: border-box;
Womit padding u. border nicht mehr zu width addiert werden, wie's gedacht ist.
 
Zurück