Hallo zusammen,
ich bastle gerade eine Webseite. Auf den gängigen Browsern (Chrome, Firefox, InternetExplorer11, Edge) passt alles, allerdings gibts z. B. im InternetExplorer im Kompatibilitätsmodus (InternetExplorer8) das Problem, dass er ganz was anderes anzeigt. Die borderbox ist total verschoben und wird ganz wo anders angezeigt.
Gibts da irgendeinen Trick, wo ich nur dieses Problem beheben kann ohne alles ändern zu müssen?
Quasi ne kleine Abfrage, falls IE8 dann mach das....
Wäre super, wenn mir hier jemand weiterhelfen könnte.
LG Simone
ich bastle gerade eine Webseite. Auf den gängigen Browsern (Chrome, Firefox, InternetExplorer11, Edge) passt alles, allerdings gibts z. B. im InternetExplorer im Kompatibilitätsmodus (InternetExplorer8) das Problem, dass er ganz was anderes anzeigt. Die borderbox ist total verschoben und wird ganz wo anders angezeigt.
Gibts da irgendeinen Trick, wo ich nur dieses Problem beheben kann ohne alles ändern zu müssen?
Quasi ne kleine Abfrage, falls IE8 dann mach das....
Wäre super, wenn mir hier jemand weiterhelfen könnte.
LG Simone
HTML:
<div id="container">
<div class="backgrounds">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<div class="column">
<h2>Weinseminar für Einsteiger <br /></h2>
<h4>20.1/24.2/31.3.2017</h4>
<p>TEXT</p>
</div>
<br /> <br />
<div class="column">
<h2>Weinseminar für Profis <br /></h2>
<h4>20.1/24.2/31.3.2017</h4>
<p>TEXT</p>
</div>
<br /> <br />
<div class="column">
<h2>Weinseminar für den Rest <br /></h2>
<h4>20.1/24.2/31.3.2017</h4>
<p>TEXT</p>
</div>
<div style="clear:both;"></div>
</div>
CSS:
div { box-sizing:border-box; -moz-box-sizing:border-box; }
/* column container */
#container {
margin:0 -2.1666%;
position:relative;
}
/* column layout */
.column {
position:relative;
float:left;
width:95%;
margin:0 2.1666%;
padding:1.0em;
color:#5e5e5e;
}
.column h4{
font-style:italic; font-size:1em; color:#C0C0C0; margin:0 0 0.5em 0;
}
.column h2{
text-decoration:underline;color:#C0C0C0;
}
.column p {
color:#C0C0C0;
}
/* background container */
.backgrounds {
position:absolute;
width:100%;
height:100%;
}
/* background columns */
.backgrounds .column {
height:100%;
background: #5e5e5e;
border-radius:10px;
}