I have produced a css layout that works perfectly well and exactly the same in chrome, safari, firefox & opera, but IE hates my layout - all versions of IE hate my layout - and I have no idea why. It incoherently splays my layout throughout the view port. Mainly it seems to have trouble centering my divs and handling my footer. It also is displaying the body of text off the page into oblivion creating a large body of white space to the right for no apparent reason.
Does anyone know what’s going wrong here? If you could help me out it’s appreciated.
IE’s Display:
All other modern browsers:
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="_stylesheets/emstyles.css">
<title>ARTICLE TITLE</title>
<!-- String -->
</head>
<body>
<div id="backnav">
<ul>
<li><a href="Page1/">Page1</a></li>
<li><a href="Page2/">Page2</a></li>
<li><a href="Page3/">Page3</a></li>
<li><a href="Page4/">Page4</a></li>
<li><a href="Page5/">Page5</a></li>
<li><a href="Page6/">Page6</a></li>
<li><a href="Page7/">Page7</a></li>
</ul>
<!-- Unordered list of Links--></div>
<div id="wrapper">
<div id="contents">
<div id="searchwrapper">
<h1>Website Logo<!-- String --></h1>
<div id="searchbar">
<input type="text" id="searchfield">
<input type="image" src="_images/searchbutton.png" id="searchbutton" alt="Search">
</div>
</div>
<div id="catnav">
<ul>
<li><a href="cat1/"><img src="_images/catnav1.png"></a></li>
<li><a href="cat2/"><img src="_images/catnav2.png"></a></li>
<li><a href="cat3/"><img src="_images/catnav3.png"></a></li>
</ul>
<!-- Unordered list of Image-Links 238x77--></div>
<div id="title">
<h1>ARTICLE TITLE</h1>
<h1></h1>
</div>
<div id="pagenav">
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul>
</div>
<div id="mainimage"><img src="_images/mainimage.png"><!-- Image 800x320 --></div>
<div id="textbody">
<h1></h1>
<p class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae nibh dui, nec vulputate massa. Donec a metus quis lectus aliquam feugiat sit amet ut justo. Nulla lacinia orci enim, eget vestibulum dui. Vivamus diam velit, varius sed faucibus sed, rhoncus a elit. Proin urna nisi, feugiat quis posuere pellentesque, ultrices nec quam. Curabitur at tortor orci, ut vehicula orci. Nullam consequat consectetur adipiscing. Nulla facilisi. Aliquam ultrices blandit neque, vel vestibulum risus pulvinar eu. Proin at mi sit amet mi rutrum ornare. Duis condimentum, tortor eget cursus condimentum, nisi eros dapibus massa, at faucibus ligula purus aliquet velit. Mauris eu lectus vel velit tristique rutrum a eu urna.</p>
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non ultricies lacus. Aliquam posuere imperdiet massa eget auctor. Quisque bibendum purus vel sem eleifend sagittis. Sed in mattis purus. Etiam non nisl risus, tempor accumsan erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lorem massa, porta a auctor in, consectetur in massa. Sed mollis tincidunt odio eget scelerisque. Donec elementum lorem vitae magna congue porttitor. In elementum erat id sapien tempor id malesuada augue pharetra. Sed ornare dignissim porta. Vestibulum nibh ligula, ultrices id feugiat a, bibendum quis sapien.</p>
<h1>Heading 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper dignissim risus id faucibus. Nunc semper interdum nulla, vitae commodo est rhoncus vitae. Duis augue nisi, tincidunt at tempor eu, dignissim sit amet velit. In hac habitasse platea dictumst. Donec semper eros in felis tincidunt egestas nec eget tortor. Donec scelerisque iaculis iaculis. Pellentesque vitae sapien suscipit ipsum adipiscing vestibulum. Sed sit amet turpis a libero elementum pulvinar ac id mi.</p>
<p>Etiam tempus nibh eget lectus hendrerit id pulvinar libero convallis. Donec eu mattis metus. Curabitur tincidunt tortor eu metus volutpat eu convallis metus vestibulum. Suspendisse sollicitudin leo sed erat tincidunt eu tincidunt elit viverra. Phasellus eleifend neque at tortor aliquet tempor. Fusce turpis libero, laoreet id volutpat sit amet, dapibus ut purus. Mauris tellus metus, pellentesque at posuere at, luctus vel sapien. Nam auctor imperdiet accumsan. Nunc blandit pellentesque ornare. Nullam pulvinar nunc sit amet tellus consequat vitae ultricies lectus cursus. Aliquam ac elit libero. Vestibulum mi nisl, sollicitudin eu pulvinar vel, condimentum in ipsum.</p>
<h2>Sub-Heading 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis urna sit amet nulla congue in gravida mi pellentesque. Aliquam vitae sem aliquet arcu faucibus dictum eget in odio. Sed ullamcorper dui et purus tincidunt non ullamcorper nisi commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas, tortor a mattis ullamcorper, erat tellus tincidunt lacus, in scelerisque nibh ante vel nunc. In a tortor in elit malesuada venenatis eu et arcu. In hac habitasse platea dictumst. Sed nec iaculis mi. In feugiat tincidunt mollis. Pellentesque ut vestibulum ante. Sed hendrerit leo a eros tempor semper. Donec ultricies nunc sed dolor suscipit convallis. Aliquam erat volutpat. Suspendisse in risus non tellus feugiat laoreet at sed magna. Etiam blandit est nulla, ac gravida risus. Quisque tincidunt risus non lacus blandit imperdiet. </p>
<h2>Sub-Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere iaculis lacus, sed posuere magna viverra id. Maecenas in erat libero. Morbi ipsum elit, scelerisque ut tincidunt vel, varius eu magna. Maecenas erat nisl, tristique ut lobortis sit amet, venenatis viverra tortor. Fusce consequat scelerisque massa, a porta erat venenatis eu. Morbi imperdiet vulputate metus, non dignissim est imperdiet vitae. Duis risus massa, luctus suscipit elementum ut, elementum vel lectus. Nullam sed libero eu mauris egestas molestie. Praesent dapibus orci ac nisi mattis hendrerit. Donec in arcu est. Aenean risus diam, iaculis a pellentesque sit amet, interdum in ante. Vestibulum eget urna libero. Mauris luctus, nisl quis viverra condimentum, diam eros mollis enim, quis consequat lectus orci nec ipsum. Donec eget elementum nulla.</p>
<h1>Heading 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus dui vitae risus semper volutpat. Phasellus eu placerat nibh. Nunc consectetur pretium dui et lobortis. Donec molestie hendrerit iaculis. Curabitur id nunc lacus, ut cursus magna. Nullam auctor quam id metus luctus accumsan placerat erat rhoncus. Nulla varius, velit et vulputate ullamcorper, ligula tortor gravida mi, sit amet tempus metus quam nec leo. Cras magna nulla, semper quis pretium non, vulputate ac lectus. Fusce aliquet dictum ante, sit amet malesuada risus fringilla eget. Nullam metus ante, vehicula eget imperdiet faucibus, aliquam eget dolor. Aliquam vitae sem nisi. Sed at dolor nunc. Morbi eu dolor enim. Aliquam blandit nulla vel lacus viverra a pretium est blandit. Suspendisse non leo a ligula blandit facilisis.</p>
<p>Nullam rutrum, mi eu aliquam venenatis, dolor nulla molestie diam, vitae rutrum nibh purus non purus. In hac habitasse platea dictumst. Nulla tincidunt nisl eget arcu porta auctor. Aliquam ut fringilla nisl. Phasellus scelerisque, dui sit amet consequat accumsan, turpis elit tempor erat, non tristique magna turpis vitae dolor. Morbi porttitor congue ante, eget imperdiet lorem auctor lobortis. Nunc fermentum, risus molestie tempus scelerisque, erat libero sodales risus, a tincidunt nisi orci vitae velit. Vestibulum mollis, purus in rutrum condimentum, arcu purus lacinia purus, ac elementum sem odio nec est. Aenean euismod porta tellus, at fringilla magna consectetur at. Aenean odio arcu, vulputate ut molestie sed, fringilla non purus. Cras eget urna dui, id aliquam eros. Nullam lectus dui, tempor in auctor nec, lacinia ut risus. Mauris at magna id ipsum sollicitudin tempus quis a mauris.</p>
<h1>Heading 4</h1>
<p contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum tellus viverra neque bibendum in mattis ante dignissim. Nam mattis feugiat lorem porttitor adipiscing. Aliquam erat volutpat. Nunc feugiat magna vitae mauris egestas euismod. In hac habitasse platea dictumst. Praesent magna sem, malesuada non fermentum vel, luctus quis mauris. Duis quam purus, ornare vitae eleifend sed, malesuada eget libero. Phasellus sed lorem risus, nec placerat urna. In magna turpis, accumsan ac egestas quis, dictum vel massa. Nulla vitae magna arcu. Maecenas sit amet vestibulum urna. Integer feugiat dignissim leo sed ornare. Maecenas auctor ultricies dui, pulvinar tincidunt velit feugiat quis. Sed egestas ornare elit, et fringilla quam viverra ut.</p>
</div>
</div>
<div id="footer">
<ul>
<li><a href="page1/">Page1</a></li>
<li><a href="page2/">Page2</a></li>
<li><a href="page3/">Page3</a></li>
<li><a href="page4/">Page4</a></li>
<li><a href="page5/">Page5</a></li>
</ul>
<!-- Unordered list of Links--></div>
</div>
</body>
</html>
CSS:
/*----------------------------CRAZYPANTS LAYOUT WRAPPERS---------------------------*/
body{
text-align:center;/* for inline-block centerimg*/
white-space:nowrap;/*stop IE8/9 from dropping column*/
}
#wrapper,#sidebar,#footer{white-space:normal;text-align:left;}/* reset whitespace and text */
html, body {
margin: 0;
padding: 0;
font: 1em "Georgia", Serif;
height: 100%;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
#wrapper:after {
clear:both;
display:block;
height:1%;
content:" ";
}
#contents {
width: 60em;
margin: -3.75em auto 0 auto;
padding: .625em;
min-height: 100%;
position: relative;
padding:.625em .625em 2.1875em;/* protect footer */
zoom:1.0;/* ie haslayout*/
text-align: center;
}
* html #contents {/* ie6 and under only*/
height:100%;
}
#wrapper {
zoom:1.0;/* ie haslayout*/
overflow:hidden;/* make an auto width rectangular block next to a float */
min-width:61.25em;/* same total width as wrapper*/
margin:0 auto;
position:relative;
z-index:1;
min-height:100%;
border-top:none;
border-bottom:none;
display:inline-block;
vertical-align:top;
}
* html #wrapper{height:100%;display:inline}/* ie6 inline-block hack*/
*+html #wrapper{display:inline}/* ie7 inline-block hack */
/*----------------------------TOP NAVIGATION BAR---------------------------*/
#backnav ul {
position:absolute;
top: 0;
right: 3.125em;
margin: 0;
padding: 0;
color: #ddd;
background: #333;
height: 1.5em;
-webkit-border-bottom-right-radius: .75em;
-webkit-border-bottom-left-radius: .75em;
-moz-border-radius-bottomright: .75em;
-moz-border-radius-bottomleft: .75em;
border-bottom-right-radius: .75em;
border-bottom-left-radius: .75em;
padding: 0 .5em;
z-index:3;
}
#backnav li {
display: inline-block;
float: left;
list-style: none;
padding: .33333333em .4166666em .1666666em;
font: .75em "Georgia", Serif;
}
#backnav li a{
display: inline-block;
color: #dddddd;
text-decoration: none;
}
#backnav li a:link {color:#dddddd}
#backnav li a:visited {color:#dddddd}
#backnav li a:hover {color:#ffffff}
#backnav li a:active {color:#ffffff}
/*----------------------------SEARCHFEILD + TITLE---------------------------*/
#searchwrapper {
min-height: 4.75em;
white-space: nowrap;
text-align: center;
border-bottom: 1px solid #aaaaaa;
padding-top: 5.25em;
}
#searchwrapper h1 {
font-style: italic;
font-size: 3em;
line-height: 1.5833333em;
margin: -0.125em 0 0 -3.125em;
}
#searchfield {
width: 25.714285714em;
height: 1.714285714em;
margin: .0714285714em 0 0 .714285714em;
border: none;
background:none;
}
#searchbutton {
height: 1.4285714286em;
width: 1.4285714286em;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
margin: 0 .2142857143em .0714285714em 0;
}
#searchbutton:hover {
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
}
#searchbar {
margin-left: 1.25em;
border-radius: .8125em;
border: 1px solid #cccccc;
border-top: 1px solid #999999;
height: 1.5625em;
display: inline-block;
/* -moz-box-shadow: inset 0 5px 5px -5px #aaa;
-webkit-box-shadow: inset 0 5px 5px -5px #aaa;
box-shadow: inset 0 5px 7px -5px #aaa;*/
}
#searchbar:hover {
-moz-box-shadow: inset 0 5px 5px -5px #aaa;
-webkit-box-shadow: inset 0 5px 5px -5px #aaa;
box-shadow: inset 0 5px 7px -5px #aaa;
}
/*<-------Use Javascript or Paul O'B's CSS Madness------->*/
/*#searchbar > #searchfield:focus {
-moz-box-shadow: inset 0 5px 5px -5px #aaa;
-webkit-box-shadow: inset 0 5px 5px -5px #aaa;
box-shadow: inset 0 5px 7px -5px #aaa;
}*/
#searchwrapper h1, #searchwrapper div, #searchwrapper input {
display: inline-block;
vertical-align: middle;
}
* html #searchwrapper h1, * html #searchwrapper div {display: inline}/* ie6 tripswitch */
*+html #searchwrapper h1, *+ html #searchwrapper div {display: inline}/* ie7 tripswitch */
/*----------------------------MARQUEE---------------------------*/
#marquee {
text-align: center;
width: 60em;
padding: 1.625em 0;
border-bottom: 1px solid #aaaaaa;
}
/*----------------------------CATEGORY NAVIGATION---------------------------*/
#catnav {
clear: both;
white-space: nowrap;
text-align: center;
padding: 1.625em 0;
border-bottom: 1px solid #aaaaaa;
}
#catnav ul {
position:relative;/*IE6/7 needs this*/
padding: 0;
margin: 0;
display: inline-block;
vertical-align: middle;
}
#catnav li {
display: inline-block;
float: left;
height: 4.8125em;
width: 14.875em;
margin: 0 2.5em 0 2.5em;
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
}
#catnav li img{
height: 4.8125em;
width: 14.875em;
}
#catnav li:hover{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
/*----------------------------FOOTER---------------------------*/
#footer {
min-height: 1.875em;
width: 100%;
border-top: 1px solid #aaaaaa;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
clear: both;
margin: auto;
}
#footer ul {
position:relative;/*IE6/7 needs this*/
padding: 0;
margin: 0.3125em 0 0 0;
display: inline-block;
vertical-align: middle;
color: #444444;
}
#footer li {
float: left;
list-style: none;
padding: 0 .6666666em 0;
font: .75em "Georgia", Serif;
}
#footer li a{
display: inline-block;
color: #444444;
text-decoration: none;
}
#footer li a:link {color:#444444}
#footer li a:visited {color:#444444}
#footer li a:hover {color:#000000}
#footer li a:active {color:#000000}
/*----------------------------SIDEBAR---------------------------*/
#sidebar {
background-color: #333333;
width: 220px;
padding: 10px;
margin-left:-240px;
color:#fff;
position:fixed;
top: 0;
bottom: 0;
left: 0;
padding:20px 20px 5px;
height: 100%;
overflow:auto;
z-index:2;
-webkit-transition:margin 1s ease-in;
-moz-transition:margin 1s ease-in;
-ms-transition:margin 1s ease-in;
transition:margin 1s ease-in;
-moz-box-shadow: inset -30px 0 30px -10px #222;
-webkit-box-shadow: inset -30px 0 30px -10px #222;
box-shadow: inset -30px 0 30px -10px #222;
}
#sidebar:hover { margin:0 }
#dummy-column{
width: 220px;
float:left;
margin-left:-240px;
padding:0 30px 0 20px;
height:100px;
position:relative;
-webkit-transition:margin 1s ease-in;
-moz-transition:margin 1s ease-in;
-ms-transition:margin 1s ease-in;
transition:margin 1s ease-in;
}
#sidebar:hover + #dummy-column { margin:0 }
/*---------------------EXTRAS--------------------*/
input {
font-family: "Georgia", Serif;
font-size: .875em;
}
input:focus {
outline:none;
}
::selection, ::-moz-selection{
background: #333333; /* Safari */
color: #ffffff;
}
/*ARTICLE*/
/*----------------------------TITLES---------------------------*/
#title {
width: 100%;
text-align: center;
clear: both;
margin: auto;
padding: 1.25em 0 .375em 0;
border-bottom: 2px solid #000000;
}
#title h1 {
font-weight: normal;
font-size: 2.25em;
display: inline-block;
margin: 0;
padding: 0;
letter-spacing: .138888888em;
}
/*----------------------------NAVIGATION---------------------------*/
#pagenav {
width: 100%;
text-align: center;
clear: both;
margin: auto;
}
#pagenav ul {
position:relative;/*IE6/7 needs this*/
padding: 0;
margin: .3125em 0 0 0;
display: inline-block;
vertical-align: middle;
color: #444444;
}
#pagenav li {
float: left;
list-style: none;
padding: 0px .8571428571em 0px;
font: 0.875em "Georgia", Serif;
}
#pagenav li a{
display: inline-block;
color: #444444;
text-decoration: none;
}
#pagenav li a:link {color:#444444}
#pagenav li a:visited {color:#444444}
#pagenav li a:hover {color:#000000}
#pagenav li a:active {color:#000000}
/*----------------------------IMAGES---------------------------*/
#mainimage {
text-align: center;
width: 100%;
padding: 1.625em 0;
border-bottom: 1px solid #aaaaaa;
}
/*----------------------------BODY TEXT---------------------------*/
#textbody {
width:53.75em;
display: inline-block;
text-align:left;
padding: 0.625em 0 1.875em 0;
}
#textbody h1{
font-style: italic;
font-weight: normal;
font-size: 1.375em;
border-bottom: 1px solid #aaaaaa;
padding: .9090909091em 0 0 0.4545454545em;
}
#textbody h2{
width: 46.470588235em;
margin-left: 2.0588235294em;
font-style: italic;
font-weight: normal;
font-size: 1.0625em;
text-decoration: underline;
position: relative;
top: .4705882353em;
}
#textbody p{
width: 56.428571429em;
margin-left: 2.5em;
font-size: 0.875em;
}
#textbody p.intro{
font-style: italic;
}
/*----------------------------CONTENT EDITABLE---------------------------*/
#textbody p[contenteditable="true"] {
/* text-decoration: underline;*/
line-height: 2.5em;
background:url(../_images/lines.svg);
background-size:56.428571429em 2.5em;
background-repeat:repeat-y;
}
#textbody p:focus {
outline:none;
}
