Overflow hidden works in FF but not IE

Question

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;
}

One question: does your markup pass the W3C [HTML validator](http://validator.w3.org/)? — Sparky, Aug 06 '13 at 18:51
Why use `float:left` on `#philya6` instead of `display:inline-block`? I'd start there — Chris Rockwell, Aug 06 '13 at 19:07
@Sparky thanks i never used it before, just tried it, says i have some issues lol! — Phil Famme, Aug 06 '13 at 19:13
I HATE recommending this, but you may need to use an IE CSS hack. (Which I would only do as a last resort) http://www.webdevout.net/css-hacks — Tim, Aug 06 '13 at 19:14
Always make sure the HTML passes HTML validation if you want the best chance for cross-browser compatibility. — Sparky, Aug 06 '13 at 19:16
@Sparky i will fix W3C validator says and Do what chris says and see if that works — Phil Famme, Aug 06 '13 at 19:18
I tried what was mentioned above and did not work. I clicked on IE compatibility view right next to refresh, and it showed my page right. Question is there i way i can detect that it will not work right, and if it doesn't auto set the users IE compatibility view? — Phil Famme, Aug 06 '13 at 19:47
If the page was constructed properly, you wouldn't need to worry about compatibility mode. Are you sure it passes W3C HTML validation? Do you have a valid `doctype` as the very first line of your HTML file? Otherwise this causes a W3C error as well as browser issues. — Sparky, Aug 06 '13 at 20:08
Try adding to your page. For details see this post: http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge — Tim, Aug 06 '13 at 20:09
@Sparky i am using... was using just I just tried it in chrome and looks perfect, like FF. IE 8 does not work and the rest of IE idk — Phil Famme, Aug 06 '13 at 20:33
Can't make sense out of your comment but W3C validator will help you catch any doctype errors. IE also hates any spaces or lines before the doctype. — Sparky, Aug 06 '13 at 20:41
@Tim i used and it worked! Should i use like you said. from what i seen "IE=edge,chrome=1" will make it look like it does in chrome or am i wrong? I Am not sure if it will make it look like it does in chrome just if you have chrome and are using IE or it will make it look as it does in chrome, even if you don't have chrome too? — Phil Famme, Aug 06 '13 at 21:44
I've never used the Chrome attribute, so I have no idea what that does. What I can tell you is IE seems to render sites incorrectly if you don't force it to the latest version. — Tim, Aug 07 '13 at 12:10
@Tim tested it out content="IE=edge,chrome=1" will make it look as it does in chrome even if they don't have chrome. I will read about Thanks a lot I appreciate it! — Phil Famme, Aug 07 '13 at 17:21

score 1 · Accepted Answer · answered Aug 07 '13 at 12:11

1

Try adding

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

to your page.

answered Aug 07 '13 at 12:11

Tim

3,929
7
33
59

Overflow hidden works in FF but not IE

1 Answers1