Ok, after sacrificing my flawless non error css for a silly rollover effect, I face my next INTERNET DESTROYER (IE) problem 
I just can't figure it out, for some reason, only IE will know.. my header image on my main content section is just not showing....
http://www.mediacubed.co.uk/design
In firefox you'll see a lovely little header, all rounded and pretty
In IE, well it isn't there.... maybe IE just doesn't like it?
Here is my CSS code..
HTML Code:
a:link {
text-decoration:none ;
color:#ffffff;
}
a:visited {
text-decoration:none ;
color:#ffffff;
}
a:hover {
text-decoration:underline;
color:red;
}
.toggleopacity img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
opacity: 0.5;
}
.toggleopacity:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
opacity: 1;
}
.toggleopacity img{
border: 2px solid #fff;
}
.toggleborder:hover img{
border: 2px solid navy;
}
.toggleborder:hover{
color: red;
}
.nontoggleopacity img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
opacity: 0.5;
}
.nontoggleopacity:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
opacity: 1;
}
.nontoggleopacity img{
border: 0px solid #fff;
}
.nontoggleborder:hover img{
border: 0px solid navy;
}
.nontoggleborder:hover{
color: red;
}
body {
height: 100%;
margin: 0 10% 0 10%;
padding: 0;
font-size: 0.6em;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
color: white;
background-image:
url('newwall.jpg');
background-repeat: repeat;
background-position:center;
background-color: #000000;
}
a img {
border: 0;
}
a.portfoliolink {
display: block;
float: left;
width: 80px;
height: 20px;
text-decoration: none;
background: url("menu/portfolioall.png");
}
a.portfoliolink:hover {
background-position: -79px 0;
}
a.homelink {
display: block;
float: left;
width: 57px;
height: 20px;
text-decoration: none;
background: url("menu/homeall.png");
}
a.homelink:hover {
background-position: -55px 0;
}
a.contactlink {
display: block;
float: left;
width: 76px;
height: 20px;
text-decoration: none;
background: url("menu/contactall.png");
}
a.contactlink:hover {
background-position: -80px 0;
}
a.postit1 {
display: block;
width: 230px;
height: 236px;
text-decoration: none;
background: url("citybeatpostitall.png");
}
a.postit1:hover {
background-position: -230px 0;
}
a.postitys {
display: block;
width: 230px;
height: 235px;
text-decoration: none;
background: url("youngstarpostitall.png");
}
a.postitys:hover {
background-position: -230px 0;
}
a.bloglink {
display: block;
float: left;
width: 69px;
height: 20px;
text-decoration: none;
background: url("menu/articlesall.png");
}
a.bloglink:hover {
background-position: -71px 0;
}
p {
margin: 0 0 1.5em 0;
padding: 0;
color: white;
}
span.print-text {
display: inline !important;
}
img.replacement {
display: none;
}
#text_container {
width: 500px;
margin: 60px 100px 100px 100px;
padding-top: 70px
}
#text_container p {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
color: #ffffff;
margin-bottom: 20px;
}
.floatright {
float: right;
}
#container {
min-height: 100%;
margin-bottom: 0px;
position: relative;
}
#post {
padding: 0px 0px 0px 0px;
width: 300px;
height: 70px;
font-size: 120%;
}
#design {
position: absolute;
z-index: 0;
top: 30px;
left: 50%;
margin-left: -440px;
width: 190px;
height: 247px;
background: url('pen.png') no-repeat top left;
}
#logo {
position: absolute;
z-index: 0;
top: 0px;
left: 0%;
margin-left: -0px;
width: 192px;
height: 149px;
}
#mp3player {
position: absolute;
z-index: 0;
top: 380px;
left: 42%;
margin-left: 315px;
width: 292px;
height: 286px;
}
#menu {
padding-top: 16px;
margin-left: 190px;
width: 400px;
height: 20px;
}
#home {
position: absolute;
z-index: 0;
top: 42px;
left: 50%;
margin-left: -500px;
width: 387px;
height: 129px;
}
#pencil {
position: absolute;
z-index: 0;
top: 450px;
left: 10%;
margin-left: 60px;
width: 122px;
height: 387px;
background: url('pencil.png') no-repeat top left;
}
div.left {
width: 60%;
float: left;
padding-top: 140px;
margin-left: 220px;
width: 400px;
height: 20px;
}
#postits {
position: absolute;
z-index: 0;
top: 649px;
left: 58%;
margin-left: 150px;
width: 230px;
height: 523px;
}
#can {
position: absolute;
z-index: 0;
top: 130px;
left: 73%;
margin-right: -180px;
width: 215px;
height: 387px;
background: url('arttools.png') no-repeat top left;
}
#events {
position: absolute;
z-index: 0;
top: 30px;
left: 50%;
margin-left: -500px;
width: 249px;
height: 194px;
background: url('headerimages/events.png') no-repeat top left;
}
#blog {
position: absolute;
z-index: 0;
top: 30px;
left: 50%;
margin-left: -500px;
width: 215px;
height: 387px;
background: url('arttools.png') no-repeat top left;
}
#contact {
position: absolute;
z-index: 0;
top: 30px;
left: 50%;
margin-left: -560px;
width: 287px;
height: 368px;
background: url('headerimages/phone.png') no-repeat top left;
}
#citybeat {
position: absolute;
z-index: 0;
top: 30px;
left: 50%;
margin-left: -460px;
width: 280px;
height: 201px;
background: url('citybeatonblue.png') no-repeat top left;
}
#phpicon {
position: absolute;
z-index: 0;
top: 160px;
left: 50%;
margin-left: -640px;
width: 200px;
height: 132px;
background: url('headerimages/phpicon.png') no-repeat top left;
}
.ap_top {
background-image:url(papertop.png);
background-repeat:repeat;
width:815px;
min-height: 48px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
margin-top:-60px;
}
.ap_bg {
background-image:url(paperback.png);
background-repeat:repeat;
width:815px;
min-height: 500px;
padding-bottom:200px;
padding-right:0px;
padding-left:0px;
margin-top:-60px;
}
.sketch_bg {
background-image:url(sketchheader.png);
background-repeat:repeat;
width:817px;
min-height: 296px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
margin-top:0px;
}
.bottom_links{
height:61px;
overflow:hidden;
}
.bottom_links li{
display:inline;
}
.bottom_links a,.bottom_links a:visited{
float:left;
display:block;
cursor:pointer;
text-indent:-5000px;
margin:16px 16px 0 0;
}
.bottom_links .bgr_home .bottom_links .bgr_home:visited{
background:transparent url(menu/homeoff.png) no-repeat;
width:61px;
height:20px;
}
.bottom_links .bgr_home:hover{
background:transparent url(menu/homeon.png) no-repeat;
}
#header {
top:0;
left:0;
height:45px;
color:#009;
background:#000;
border:0px solid #708090;
border-bottom: 7px solid #ffffff;
background-image:url(headerbg.jpg);
}
#footer {
width:100%;
height:45px;
text-align:center;
margin-top:0px;
padding: 0em;
color:#fff;
border:0px solid #708090;
border-top: 7px solid #ffffff;
background-image:url(headerbg.jpg);
}
#mainContainer2 {
width: 818px;
margin: auto;
margin-top:20px;
min-height: 296px;
text-align: left;
}
* html #mainContainer2 {
height: 300px;
}
#mainContainer {
width: 818px;
margin: auto;
margin-top:90px;
min-height: 300px;
text-align: left;
}
* html #mainContainer {
height: 300px;
}
html, body {height: 100%; width: 100%; margin: 0; padding: 0; border: 0;
}
p {padding: 0em 0em 0em 0em; margin: 0;}
ul {padding-right: 0em;}
Thanks if you can help, I'll be right here banging my head off the wall in the meantime!!!
Andy |
