Making a site IE friendly.

body {
font-size: 12px;
margin: 0;
padding: 0;
font-family: Arial;
background-color: #000;
background-repeat: no-repeat;
background-attachment: fixed;
}

h1 {
font-size: 14px;
border-bottom: 1px solid #fff;
}

div#content {
position: absolute;
top: 15%;
left: 15%;
bottom: 15%;
right: 15%;
border: 1px solid #CC0001;
background-color: #000;
background-image: url('images/exposure.jpg');
background-repeat: no-repeat;
background-position: center;
}

a:link {
color: #fff;
text-decoration: underline;
font-weight: bold;
}

a:active {
color: #fff;
text-decoration: underline;
font-weight: bold;
}

a:visited {
font-weight: bold;
color: #fff;
text-decoration: underline;
}

div#text {
color: fff;
position: static;
top: 30%;
left: 5%;
text-align: justify;
padding-left: 1em;
padding-right: 1em;
background-color: #4a4a4a;
opacity: .85;
width: 60%;
height: 60%;
border: 1px solid #cc0000;
margin-left: 5em;
margin-bottom: 5em;
}

div#nav_cube {
position: absolute;
top: 1px;
right: 0px;
color: #fff;
width: 154px;
height: 155px;
margin-top: 5em;
}

div#nav_cube div {
position: absolute;
width: 46px;
height: 46px;
border: 1px solid #666;
}

div#nav_cube div a {
display: block;
width: 100%;
height: 100%;
}

div#nav_cube div a:link, div#nav_cube div a:visited {
text-decoration: none;
}

div#nav_cube div a:hover {

}

a#white_cube { background-color: #ffffff; }
a#white_cube:link, a#white_cube:visited {
opacity: .40;
filter: alpha(opacity=40);
}

a#blue_cube { background-color: #14008b; }
a#blue_cube:link, a#blue_cube:visited {
opacity: .75;
filter: alpha(opacity=75);
}

a#green_cube { background-color: #335c33; }
a#green_cube:link, a#green_cube:visited {
opacity: .80;
filter: alpha(opacity=80);
}

a#white_cube:hover, a#blue_cube:hover, a#green_cube:hover {
opacity: 1;
filter: alpha(opacity=1);
}

Thanks Bogey. This makes the site more IE friendly and completely screws it in Firefox. I would rather have the site Firefox friendly than IE friendly if i can't get them both to see eye to eye if you know what i mean.

Weird, it shows fine in Firefox for me.

Yeah, if you read the reply afterwards i managed to sort it by changing the position to "relative" as opposed to being absolute. It seems to look alright now in IE, only differences are the opacity doesn't work in IE but i believe that's something that can't be fixed without putting in some javascript code or something like that.

Cheers anyway!

It seems to look alright now in IE, only differences are the opacity doesn't work in IE but i believe that's something that can't be fixed without putting in some javascript code or something like that.