[RESOLVED] Display problem IE7
Hi,
I have a position/display "?" problem in IE7. (It shows up right in FF3.6, IE8, Opera, Safari, Chrome)
It's the list in the third container that shows the problem. The width is auto so it will stay as wide as the width of the browser. So the list items will fill up the browser.
In IE7 the list item won't display inline.
I hope someone can help me, because i can't find the problem :(.
Easy copy/paste html file and open in IE8 to see the problem (<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> allready placed)
Thanks,
M
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- META TO EMULATE IE7 IN IE8-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style media="all" type="text/css">
html, body{
text-align:left;
margin:0px;
padding:0px;
width:auto;
height:100%;
background:#333;
border:0px;
}
#wrapper{
width:100%;
display:inline-block;
position:relative;
min-height: 100%;
height: auto !important;
height: 100%; /* IE6: = min-height*/
margin:0px 0px -50px 0px;
}
#header{
width:auto;
height:300px;
position:relative;
display:block;
padding:0px;
clear:both;
}
#col1-2holder{
width:640px;
position:relative;
display:block;
float:left; /* float left for ie7 */
}
#container-col1{
width:320px;
position:relative;
display:block;
height:100%;
overflow:hidden;
float:left;
z-index:7000;
background:#306;
}
#container-col2{
width:320px;
float:left;
position:relative;
display:block;
z-index:8000;
overflow:hidden;
background:#009;
}
#container-col3{
width:100%;
margin-left:-650px; /* depends on width + padding #col1-2holder*/
position:relative;
display:inline;
overflow:visible;
float:left;
clear:right;
}
#gallery{ display:inline; margin-left:640px; float:left;}
/* Gallery work */
ul.work {
margin:0px; padding:0px;
}
ul.work li {
display:inline-block;
height:230px;!
width:226px;
}
</style>
</head>
<body>
<div id="wrapper">
<!--HEADER -->
<div id="header" style="background-color:#FFF;">HEADER</div>
<!-- START COL1/COL2 HOLDER -->
<div id="col1-2holder">
<div id="container-col1">
<div id="content-col1">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
</div>
</div>
<div id="container-col2">
<div id="content-col2">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
</div>
</div>
</div>
<!-- START THIRD COL -->
<div id="container-col3">
<div id="gallery">
<ul class="work">
<li style="background:#0CC; width:226px; border:1px solid #CCC;">img</li>
<li style="background:#0CC; width:226px; border:1px solid #CCC;">img</li>
<li style="background:#0CC; width:226px; border:1px solid #CCC;">img</li>
<li style="background:#0CC; width:226px; border:1px solid #CCC;">img</li>
<li style="background:#0CC; width:226px; border:1px solid #CCC;">img</li>
<li style="background:#0CC; width:226px; border:1px solid #CCC;">img</li>
<li style="background:#0CC; width:226px; border:1px solid #CCC;">img</li>
<li style="background:#0CC; width:226px; border:1px solid #CCC;">img</li>
</ul>
</div>
</div>
<!-- clearing floats placing footer around here -->
</div>
</body>
</html>
re: {display: inline-block;}
.clearfix {display: inline-block;}
So should I just take this line above out of my code then? Or do I need to do something similar to what morphox85 said he did on this thread? I think this is the only place where I have {display: inline-block;}. I actually already just tried taking this out and didn't notice any differences in safari or firefox, so I'm not sure what purpose this serves anyway. I don't have a way to check IE on my mac right now, so I can't see if this solved the IE7 issues or if it did something to IE8. Also, why do would I need to keep the following code if practically nobody uses IE-mac anymore?
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* @end */
still looking for a solution
IE 6 and 7 still show the navigation bar vertical instead of horizontal I changed my clearfix code so it doesn't even have display: inline-block; (or the IE-Mac stuff). I don't have display: inline-block anywhere now.
