IE8 problem with absolute positioning

HTML & CSS
1

I have a site which displays fine in all browsers I’ve tried except IE8. It is www.william-stewart.com and it’s the tabs that are not displaying properly. I think it is this part of the CSS that is causing the problem and I know there are problems with IE8 and absolute positioning but I’m not sure how to fix it.

#menu li:before,#menu li:after {
    content: " ";
    display: block;
    position: absolute;
    bottom: 0;
    left: -20px;
    width: 20px;
    height: 20px;
    background: #cdcdff;
    border: 1px solid #444;
    border-top: none;
    border-left: none;
    z-index: 100;}

I tried a tag to force IE7 compatibility but that didn’t work and in any case I don’t want to force IE9 into IE7 compatibility mode.

2

Just realised where I got the original code for this from - it’s Paul O’B’s “Test Your CSS Skills Number 38”

3

Hi,

IE8 doesn’t understand border-radius anyway so why not just hide the routine from ie8 and save a lot of trouble.

e.g.


<!--[if IE 8]>
<style type="text/css">
#menu li:before,
#menu li:after,
#menu a:after,
#menu a:before{display:none}
</style>
<![endif]-->
4

Hi Paul

Many thanks. It seems so obvious now! Der…

Graham :slight_smile: