CODEWITHSUNDEEP
htmlcss
Phil Famme
Phil Famme

Reputation: 119

Overflow hidden works in FF but not IE

I am using overflow hidden, float left, and display inline-block. i am trying to make horizontal tabs. This is working perfect in ff, which i used to make, but when i looked in IE. I see the first one, very soon then next to it soon and one soon below that soon, and the last 2 i do not see. I have tried to use DOCTYPE html but this did not help. From my reading it seems to be a bug, but i have not been able to find a good solution. Thanks in advance for your help. Btw way when i look at it in a fiddle in IE it looks right, but when i make it live it does not in IE. I am using IE 8.0.6!

<div id="phila5">
<div id="philya6" style="text-align:center">verysoon</div>
<div id="phillya7">soon</div>
<div id="phillya8">soon</div>
<div id="phillya9">soon</div>
<div id="phillya10">soon</div>
<div id="phillya11">soon</div> 
</div> 



#phila5{

overflow:hidden;

border: 2px solid #000000; 
height: 80px;
width: 100%;
border-radius: 0%;
background-color: #FFF5ee;
}
#philya6{
float:left;
height: 70px;
line-height: 70px;
font-size: 2.4em;
border: 4px solid #FFF5ee;
text-align: center;
height: 70px;
width: 27%;
background-color: #F10B78;
color:#FFF5ee;
font-weight:900;
}


#phillya7{
display:inline-block;
text-align: center;

font-size: 1.6em;
border: 2.5px solid #FFF5ee;
height: 46px;
width: 13.5%;
border-bottom-left-radius:0%;
border-bottom-right-radius:0%;
background-color: #F10B78;
color:#FFF5ee;
}
#phillya8{
display:inline-block;
text-align: center;

font-size: 1.6em;
border: 2.5px solid #FFF5ee;
height: 46px;
width: 13.5%;
border-bottom-left-radius:0%;
border-bottom-right-radius:0%;
background-color: #F10B78;
color:#FFF5ee;
}

#phillya9{
display:inline-block;
text-align: center;

font-size: 1.6em;
border: 2.5px solid #FFF5ee;
height: 46px;
width: 13.5%;
border-bottom-left-radius:0%;
border-bottom-right-radius:0%;
background-color: #F10B78;
color:#FFF5ee;
}


#phillya10{
display:inline-block;
text-align: center;

font-size: 1.6em;
border: 2.5px solid #FFF5ee;
height: 46px;
width: 13.5%;
border-bottom-left-radius:0%;
border-bottom-right-radius:0%;
background-color: #F10B78;
color:#FFF5ee;
}
#phillya11{
display:inline-block;
text-align: center;

font-size: 1.6em;
border: 2.5px solid #FFF5ee;
height: 46px;
width: 13.5%;
border-bottom-left-radius:0%;
border-bottom-right-radius:0%;
background-color: #F10B78;
color:#FFF5ee;
}

Upvotes: 0

Views: 108

Answers (1)

Tim
Tim

Reputation: 4099

Try adding 

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

to your page.

Upvotes: 1

Related Questions