SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE incoherently splays my layout throughout the viewport

    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:
    ielayout.jpg

    All other modern browsers:
    chromelayout.jpg





    HTML:
    Code HTML4Strict:
    <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:
    Code 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;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Where's your doctype?

    Without one all versions of IE party like its 1999.

  3. #3
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Where's your doctype?

    Without one all versions of IE party like its 1999.
    Haha thanks



    In IE7 these centered horizontal menus are left-aligned. Is there a work around for that?

    Code CSS:
    #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;
    }


    IE6 looks irrepairable... Maybe those users deserve to live in their technological wasteland.
    I suppose I should at least create a separate stylesheet for them.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Ie7 doesn't understand inline-block except when used on inline elements. However there is a hack and any inline element in haslayout mode will act like inline-block so use this:

    Code:
    #footer ul {
    	position:relative;/*IE6/7 needs this*/
    	padding: 0;
    	margin: 0.3125em 0 0 0;
    	display: inline-block;/* these three rules must remn together in this order */
     *display:inline;
    	zoom:1.0;
    	vertical-align: middle;
    	color: #444444;
    }
    I don't support IE6 anymore but it doesn't usually take much to fix it once you take care of halsayout and the double margin bug in floats.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    This is rough but fixes ie6.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="_stylesheets/emstyles.css">
    <title>ARTICLE TITLE</title>
    <!-- String -->
    
    <style>
    /*----------------------------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;
    	position: relative;
    	padding:.625em .625em 2.1875em;/* protect footer */
    	text-align: center;
    }
    #wrapper {
    	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;
    	overflow:visible;
    }/* 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;
     *display:inline;
    	zoom:1.0;/*	-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;
     *display:inline;
    	zoom:1.0;
    	vertical-align: middle;
    }
    #catnav li {
    	display: inline-block;
     *display:inline;
    	zoom:1.0;
    	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;
     *display:inline;
    	zoom:1.0;
    	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;
     *display:inline;
    	zoom:1.0;
    	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;
     *display:inline;
    	zoom:1.0;
    	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; }
    </style>
    </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>

    You shouldn't have more than one h1 per page. Use a logical progression.

  6. #6
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    This is rough but fixes ie6.
    Thanks P, it's working well.


    Quote Originally Posted by Paul O'B View Post
    You shouldn't have more than one h1 per page. Use a logical progression.
    Thanks, I'll get on it.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •