Menu
Hi,
I have a position/display “?” problem in IE7. [SIZE=”1″](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.
[B]In IE7 the list item won’t display inline.
I hope someone can help me, because i can’t find the problem ?.
[SIZE=”1″]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
[code=html]<!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>