IE 8 and 9 styling not working

HTML & CSS
1

Hi everyone,

I’ve used the css code below as embedded styles on a page. The formatting of the h3 elements into bold and also the list element rules work in Internet Explorer 10 and 11 but they have no effect in IE 8 and 9. I just wondered if anyone knows of a workaround for those 2 browsers?

Thanks in advance for any advice.


</script>
        <style type="text/css">
            .careers h3 {
            font-weight: bold;
            padding-bottom: 5px;
            }
            div.careers ul#close-space li {
            padding-bottom: 3px;
            margin: 0;
            }
            div.careers ul#close-space li {
            padding-left: 0;
            margin-left: 0;
            }
        </style>
2

Hi,

There’s nothing in that code that won’t work in IE8 and 9 so there must be some other issue. Do you have a link to the problem or can you provide a demo of the problem?

I assume you have a modern doctype on your page as that may cause issues if you don’t.

3

Hi,

From the link you sent me by PM I can see the problem and you have added the styling inside downlevel revealed conditional comments that are excluding ie9 and under.


<!--[if (gt IE 9)|!(IE)]><!-->
<style type="text/css">
            .careers h3 {
            font-weight: bold;
            padding-bottom: 5px;
            }
            div.careers ul#close-space li {
            padding-bottom: 3px;
            margin: 0;
            }
            div.careers ul#close-space li {
            padding-left: 0;
            margin-left: 0;
            }
        </style>
</head>
<body>

    
        <!--<![endif]-->

Your snippet should be placed above those conditional comments and not inside them. The top section should then look like this:


<meta http-equiv="Content-Language" content="en-au" />

<!--[if IE]><link rel="stylesheet" href="/css/ie.css" type="text/css" media="all" /><![endif]-->
<style type="text/css">
.careers h3 {
	font-weight: bold;
	padding-bottom: 5px;
}
div.careers ul#close-space li {
	padding-bottom: 3px;
	margin: 0;
}
div.careers ul#close-space li {
	padding-left: 0;
	margin-left: 0;
}
</style>
</head>
<!--[if lt IE 7 ]><body class="ie6"><![endif]-->
<!--[if IE 7 ]><body class="ie7"><![endif]-->
<!--[if IE 8 ]><body class="ie8"><![endif]-->
<!--[if IE 9 ]><body class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<body>
<!--<![endif]-->
<div id="header">
		<div class="container">

Note the placement of the tags. The CC’s are adding a class to the body tag depending on which version of IE is visiting but browsers greater than IE9 or not IE get the normal body tag without a class.

4

Thanks so much, I can’t believe I missed that.

All working well now.

Much appreciated.

5