IE is driving me nuts as usual ;) Any ideas what I’m doing wrong?

Question

0

Editorial Team

Asked: June 6, 20262026-06-06T06:17:47+00:00 2026-06-06T06:17:47+00:00

IE is driving me nuts as usual ;) Any ideas what I’m doing wrong?

0

IE is driving me nuts as usual 😉

Any ideas what I’m doing wrong? I just want it to look same in IE 7,8,9 as it looks in chrome/safari/ff

Please if you have experience with this, help!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WSM</title>

<style>
#video-self-made-label-1 {
    background: url("label_1.png") no-repeat scroll 0 0 transparent;
    bottom: 0;
    display: block;
    height: 34px;
    position: fixed;
    text-decoration: none;
    width: 200px;
}
#video-self-made-label-1 span {
    border-radius: 0 6px 0 0;
    display: block;
    font: bold 14px/34px Arial;
    margin: 0 0 0 37px;
    text-align: center;
}
#video-self-made-label-2 {
    background: url("label_2.png") no-repeat scroll 0 0 transparent;
    top: 0;
    display: block;
    height: 34px;
    position: fixed;
    text-decoration: none;
    width: 200px;
}
#video-self-made-label-2 span {
    border-radius: 0 0 6px 0;
    display: block;
    font: bold 14px/34px Arial;
    margin: 0 0 0 37px;
    text-align: center;
}
#video-self-made-label-3 {
    background: url("label_3.png") no-repeat scroll 0 bottom transparent;
    right: 0;
    display: block;
    width: 34px;
    position: fixed;
    text-decoration: none;
    height: 200px;
    top: 120px;
}
#video-self-made-label-3 span {
    -moz-transform: rotate(-90deg);
    -moz-transform-origin: 0 0;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: 0 0;
    -ms-transform: rotate(-90deg);
    -ms-transform-origin: 0 0;
    -o-transform: rotate(-90deg);
    -o-transform-origin: 0 0;
    transform: rotate(-90deg);
    transform-origin: 0 0;
    border-radius: 0 6px 0 0;
    bottom: 3px;
    display: block;
    font: bold 14px/34px Arial;
    position: absolute;
    text-align: center;
    width: 150px;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#video-self-made-label-4 {
    background: url("label_4.png") no-repeat scroll 0 0 transparent;
    left: 0;
    display: block;
    width: 34px;
    position: fixed;
    text-decoration: none;
    height: 200px;
    top: 120px;
}
#video-self-made-label-4 span {
    -moz-transform: rotate(90deg);
    -moz-transform-origin: 0 0;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: 0 0;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: 0 0;
    -o-transform: rotate(90deg);
    -o-transform-origin: 0 0;
    transform: rotate(90deg);
    transform-origin: 0 0;
    border-radius: 0 6px 0 0;
    display: block;
    font: bold 14px/34px Arial;
    left: 34px;
    position: absolute;
    text-align: center;
    top: 37px;
    width: 150px;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
</style>

</head>
<body>


<a id="video-self-made-label-1" href="#"><span style="background-color: #CCCCCC; color: #FFFFFF;">Video Self Made</span></a>
<a id="video-self-made-label-2" href="#"><span style="background-color: #CCCCCC; color: #FFFFFF;">Video Self Made</span></a>
<a id="video-self-made-label-3" href="#"><span style="background-color: #CCCCCC; color: #FFFFFF;">Video Self Made</span></a>
<a id="video-self-made-label-4" href="#"><span style="background-color: #CCCCCC; color: #FFFFFF;">Video Self Made</span></a>


</body>
</html>

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-06T06:17:48+00:00

I removed this code from your original style

#video-self-made-label-3 span {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

#video-self-made-label-4 span {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

And placed it between tags which only supports IE8 or LOWER

<!--[if lt IE 9]>
    <style>

    #video-self-made-label-3 span {
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }

    #video-self-made-label-4 span {
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
        left: 0px !important;
    }

    </style>
<![endif]-->

Here is the full code, hope it helps!

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WSM</title>

<style>
#video-self-made-label-1 {
    background: url("label_1.png") no-repeat scroll 0 0 transparent;
    bottom: 0;
    display: block;
    height: 34px;
    position: fixed;
    text-decoration: none;
    width: 200px;
}
#video-self-made-label-1 span {
    border-radius: 0 6px 0 0;
    display: block;
    font: bold 14px/34px Arial;
    margin: 0 0 0 37px;
    text-align: center;
}
#video-self-made-label-2 {
    background: url("label_2.png") no-repeat scroll 0 0 transparent;
    top: 0;
    display: block;
    height: 34px;
    position: fixed;
    text-decoration: none;
    width: 200px;
}
#video-self-made-label-2 span {
    border-radius: 0 0 6px 0;
    display: block;
    font: bold 14px/34px Arial;
    margin: 0 0 0 37px;
    text-align: center;
}
#video-self-made-label-3 {
    background: url("label_3.png") no-repeat scroll 0 bottom transparent;
    right: 0;
    display: block;
    width: 34px;
    position: fixed;
    text-decoration: none;
    height: 200px;
    top: 120px;
}
#video-self-made-label-3 span {
    -moz-transform: rotate(-90deg);
    -moz-transform-origin: 0 0;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: 0 0;
    -ms-transform: rotate(-90deg);
    -ms-transform-origin: 0 0;
    -o-transform: rotate(-90deg);
    -o-transform-origin: 0 0;
    transform: rotate(-90deg);
    transform-origin: 0 0;
    border-radius: 0 6px 0 0;
    bottom: 3px;
    display: block;
    font: bold 14px/34px Arial;
    position: absolute;
    text-align: center;
    width: 150px;
}
#video-self-made-label-4 {
    background: url("label_4.png") no-repeat scroll 0 0 transparent;
    left: 0;
    display: block;
    width: 34px;
    position: fixed;
    text-decoration: none;
    height: 200px;
    top: 120px;
}
#video-self-made-label-4 span {
    -moz-transform: rotate(90deg);
    -moz-transform-origin: 0 0;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: 0 0;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: 0 0;
    -o-transform: rotate(90deg);
    -o-transform-origin: 0 0;
    transform: rotate(90deg);
    transform-origin: 0 0;
    border-radius: 0 6px 0 0;
    display: block;
    font: bold 14px/34px Arial;
    left: 34px;
    position: absolute;
    text-align: center;
    top: 37px;
    width: 150px;
}
</style>

<!--[if lt IE 9]>
<style>

#video-self-made-label-3 span {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

#video-self-made-label-4 span {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    left: 0px !important;
}

</style>
<![endif]-->

</head>
<body>


<a id="video-self-made-label-1" href="#"><span style="background-color: #CCCCCC; color: #FFFFFF;">Video Self Made</span></a>
<a id="video-self-made-label-2" href="#"><span style="background-color: #CCCCCC; color: #FFFFFF;">Video Self Made</span></a>
<a id="video-self-made-label-3" href="#"><span style="background-color: #CCCCCC; color: #FFFFFF;">Video Self Made</span></a>
<a id="video-self-made-label-4" href="#"><span style="background-color: #CCCCCC; color: #FFFFFF;">Video Self Made</span></a>


</body>
</html>

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

IE is driving me nuts as usual ;) Any ideas what I’m doing wrong?

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply