Issues with IE

I have a block setup for news stories, it has 3 blocks in a column and 2 in a row. It displays correctly in Firefox, but in IE it just displays in one whole row.

This is my code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><!-- Insert your title here --></title>
    <style type="text/css">
    .wrapper2 {
        width: 1000px;
        outline: 0px solid gray;
        text-align: left;
        margin: 0 auto;
    }
    .wrapper3 {
        width: 1000px;
        outline: 1px;
        text-align: center;
        margin: -3 auto;
    }
    .block {
	position:relative;
        width: 300px;
        height: auto;
        display: inline-block;
        text-align: center;
        margin: 0px;
    }
    .blockH {
        background-color: white;
        color: white;
        height: 40px; 
    }
    .blockImg {
        width: 300px;
        display: table-cell;
        vertical-align: middle;
        background-color: white;
        height: 219px;
    }
    .blockF {
        background-color: white;
        height: 50px;
    }
    body {
	margin-left: 0px;
	margin-top: 0px;
}
    .wrapper3 {
	float; left:auto
}
    </style>

</head>
<body alink="">
<div><img name="" src="image" width="1000" height="30" alt="" /></div>
<div align="" class="wrapper3">
  <div class="block">
      <div class="blockH">
        <div align="left"><img name="" src="Header" width="300" height="40" alt="" /></div>
      </div>
            <div class="blockImg">
              <div align="left"><img src="image" width="300" height="219" /></div>
            </div>
            <div class="blockF">
              <div align="left"><font color="#000102" size="3" face="Arial, Helvetica, sans-serif">Description</div>
  </div>
        <div class="block">
            <div class="blockH">
              <div align="left"><img name="" src="Header" width="300" height="40" alt="" /></div>
            </div>
            <div class="blockImg">
              <div align="left"><img src="image" width="300" height="219" /></div>
            </div>
            <div class="blockF">
              <div align="left"><font size="3" face="Arial, Helvetica, sans-serif">Description</div>
        </div>            
        <div class="block">
            <div class="blockH">
              <div align="left"><img name="" src="Header" width="300" height="40" alt="" /></div>
            </div>
            <div class="blockImg">
              <div align="left"><img src="image" width="300" height="219" /></div>
            </div>
            <div align="left">Description</div>
            <div class="blockF"> </div>
        </div>
            <div class="block">
            <div class="blockH">
              <div align="left"><img name="" src="Header" width="300" height="40" alt="" /></div>
            </div>
            <div class="blockImg">
              <div align="left"><img src="image" width="300" height="219" /></div>
            </div>
            <div class="blockF">
              <div align="left"><font color="#000000" size="3" face="Arial, Helvetica, sans-serif">Description</font></div>
            </div>
        </div>
        <div class="block">
            <div class="blockH">
              <div align="left"><img name="" src="Header" width="300" height="40" alt="" /></div>
            </div>
            <div class="blockImg">
              <div align="left"><img src="image" width="300" height="219" /></div>
            </div>
            <div class="blockF">
              <div align="left"><font color="#000000" size="3" face="Arial, Helvetica, sans-serif">Description</font></div>
            </div>
        </div>            
        <div class="block">
            <div class="blockH">
              <div align="left"><img name="" src="header" width="300" height="40" alt="" /></div>
            </div>
            <div class="blockImg">
              <div align="left"><img src="image" width="300" height="219" /></div>
            </div>
            <div class="blockF">
              <div align="left"><font color="#000000" size="3" face="Arial, Helvetica, sans-serif">Description</font></div>
            </div>
        </div>
</div>
</body>
</html>

Any help would be greatly appreciated.

Thank you!

Hi drew32. Welcome to SitePoint. :slight_smile:

There’s not much to see if we open that code in a browser, so could you either provide a live link, or describe in a bit more detail what you are trying to achieve?

Which IE are you looking at? There are 4 versions in common use, all quite different.

Hi Drew welcome to Sitepoint :slight_smile:

That code is pretty broken I’m afraid and uses an unhealthy mix of old and new. (e.g. display:table-cell and then font tags ad align=“” etc). As you are using a strict doctype so you can’t use the deprecated font tag or the align=“” attributes.

Apart from the missing closing divs and incorrect structure the main problem in IE will be that you have added the emulate IE7 meta tag to the head of the page.


<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

That means that ie8 will render like IE7 and IE7 doesn’t understand the display:table-rules or the native version of inline-block. (I don’t know why anybody uses that meta tag as it always causes more problems than it cures.)

It looks like you meant to do something like this (but I’m just guessing as it looks like you meant 3 blocks in 2 rows and not 3 columns and two rows.).


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
<!-- Insert your title here -->
</title>
<style type="text/css">
html, body {
    margin:0;
    padding:0
}
.wrapper2 {
    width: 1000px;
    border: 1px solid #ccc;
    text-align: left;
    margin: 0 auto;
}
.wrapper3 {
    width: 1000px;
    border: 1px solid ccc;
    text-align: center;
    margin:0 auto;
    font-family:Arial, Helvetica, sans-serif;
}
.block {
    position:relative;
    width: 300px;
    height: auto;
    display: inline-block;
    text-align: center;
    margin: 0px;
    vertical-align:top;
}
.blockH {
    background-color: green;
    color: white;
    height: 40px;
}
.blockImg {
    width: 300px;
    display: table-cell;
    vertical-align: middle;
    background-color: yellow;
    height: 219px;
}
.blockF {
    background-color: blue;
    height: 50px;
    text-align:left;
}
body {
    margin-left: 0px;
    margin-top: 0px;
}
.wrapper3 {
/* float;
    left:auto - makes no sense and is broken anyway*/
}
img {/* for testing only */
    display:block;
    background:red
}

/* some background colours added for testing only */
</style>
</head>
<body alink="">
<div  class="wrapper3">
    <div><img src="image" width="1000" height="30" alt="" /></div>
    <div class="block">
        <div class="blockH">
            <div><img src="Header" width="300" height="40" alt="" /></div>
        </div>
        <div class="blockImg">
            <div><img src="image" width="300" height="219" /></div>
        </div>
        <div class="blockF">
            <div>Description</div>
        </div>
    </div>
    <div class="block">
        <div class="blockH">
            <div><img src="Header" width="300" height="40" alt="" /></div>
        </div>
        <div class="blockImg">
            <div><img src="image" width="300" height="219" /></div>
        </div>
        <div class="blockF">
            <div>Descriptionx</div>
        </div>
    </div>
    <div class="block">
        <div class="blockH">
            <div><img src="Header" width="300" height="40" alt="" /></div>
        </div>
        <div class="blockImg">
            <div><img src="image" width="300" height="219" /></div>
        </div>
        <div class="blockF">
            <div>Descriptionx</div>
        </div>
    </div>
    <div class="block">
        <div class="blockH">
            <div><img src="Header" width="300" height="40" alt="" /></div>
        </div>
        <div class="blockImg">
            <div><img src="image" width="300" height="219" /></div>
        </div>
        <div class="blockF">
            <div>Description</div>
        </div>
    </div>
    <div class="block">
        <div class="blockH">
            <div><img src="Header" width="300" height="40" alt="" /></div>
        </div>
        <div class="blockImg">
            <div><img src="image" width="300" height="219" /></div>
        </div>
        <div class="blockF">
            <div>Description</div>
        </div>
    </div>
    <div class="block">
        <div class="blockH">
            <div><img src="header" width="300" height="40" alt="" /></div>
        </div>
        <div class="blockImg">
            <div><img src="image" width="300" height="219" /></div>
        </div>
        <div class="blockF">
            <div>Description</div>
        </div>
    </div>
</div>
</body>
</html>


Of course that will not work in IE7 and under because of the display:table rules so I’d need to know if you were supporting it to offer alternatives,

However, that code is still badly constucted and suffering massively from divitus. Most of those divs should be replaced with semantic html and indeed about 50% of them wouldn’t really be necessary.

If you have a picture of what it should look like or a link to the real page then we can offer some alternative html to do the job much more semantically and cleanly.:slight_smile:

Here’s how I would approach it more semantically.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
<!-- Insert your title here -->
</title>
<style type="text/css">
html, body {
    margin:0;
    padding:0
}
.wrapper3 {
    width: 1000px;
    border: 1px solid #ccc;
    text-align: center;
    margin:0 auto;
    font-family:Arial, Helvetica, sans-serif;
}
.wrapper3 h1{margin:0 0 1px;font-size:100%;}
ul.stories {
    list-style:none;
    margin:0;
    padding:0;
    width:1000px;
}
.stories li {
    position:relative;
    width: 300px;
    display: inline-block;
    text-align: center;
    vertical-align:top;
    margin:0 0 20px;
}
* html .stories li {display:inline}/* ie6 hack fron inline-block*/
*+html .stories li {display:inline}/* ie7 hack for inline-block*/
.stories h2 {
    background-color: green;
    color: white;
    height: 40px;
    margin:0;
}
.stories div {
    width: 300px;
    display: table-cell;
    vertical-align: middle;
    background: yellow;
    height: 219px;
}
.stories p {
    background-color: blue;
    height: 40px;
    text-align:left;
    padding:5px;
}
img {
    display:block;
    background:red;/* for testing only */
}
</style>
</head>
<body>
<div  class="wrapper3">
    <h1><img src="image" width="1000" height="30" alt="Im guessing this is your header" /></h1>
    <ul class="stories">
        <li>
            <h2><img src="Header" width="300" height="40" alt="Sub header" /></h2>
            <div><img src="image" width="300" height="219" alt="" /></div>
            <p>Description</p>
        </li>
        <li>
            <h2><img src="Header" width="300" height="40" alt="Sub header" /></h2>
            <div><img src="image" width="300" height="219" alt="" /></div>
            <p>Description</p>
        </li>
        <li>
            <h2><img src="Header" width="300" height="40" alt="Sub header" /></h2>
            <div><img src="image" width="300" height="219" alt="" /></div>
            <p>Description</p>
        </li>
        <li>
            <h2><img src="Header" width="300" height="40" alt="Sub header" /></h2>
            <div><img src="image" width="300" height="219" alt="" /></div>
            <p>Description</p>
        </li>
        <li>
            <h2><img src="Header" width="300" height="40" alt="Sub header" /></h2>
            <div><img src="image" width="300" height="219" alt="" /></div>
            <p>Description</p>
        </li>
        <li>
            <h2><img src="Header" width="300" height="40" alt="Sub header" /></h2>
            <div><img src="image" width="300" height="219" alt="" /></div>
            <p>Description</p>
        </li>
    </ul>
</div>
</body>
</html>



That’s over a 50% saving in html and you can still style each element as required.

Thanks! That defiantly did the trick! I’m still new to CSS, been trying to escape my table state of mind and adapt to this new and better way, obviously it has been a bit tricky thus far. :slight_smile: