Hey,
A visitor to a site I built is experiencing a browser issue. I think they are using IE6 as the transparent images are appearing with a background colour.
Please see attached screen shot image. Is this an IE6 bug I will be able to over-write?
Any help is greatly appreciated!
www.lakecruises.com.au
CSS
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
position: relative;
}
p {
margin:0 0 1em;
font-family: arial;
font-size: 12px;
}
#background {
background: #ece9e9 url('images/header.jpg') repeat-x;
padding: 0 0 0;
}
#wrapper {
width: 100%;
}
.wraptop, wrapbase {
width:100%;
background: #d5e0e7 url('images/top.gif') repeat-x 0 0;
padding: 0 0;
}
.wrapbase {
background: url('images/base.gif') repeat-x 0 100%;
padding:0 0;
}
.content {
width: 900px;
margin: auto;
min-height: 220px;
margin-top: 5px;
overflow:hidden;
}
* html .content {
oveflow:visible;
height:1%;
height: 220px;
}
#top {
background-image: url('images/top.jpg');
position: absolute;
margin-top: 121px;
width: 100%;
height: 100px;
}
#middle {
background-image: url('images/middle.jpg');
background-repeat: repeat-y;
width: 100%;
position: absolute;
min-height: 200px;
height: !important;
height: 200px;
}
#bottom {
background-image: url('images/bottom.jpg');
position: absolute;
width: 100%;
height: 20px;
}
#header {
width: 920px;
height: 111px;
padding-top: 10px;
margin: auto;
}
#logoleft {
width: 180px;
height: 100px;
background: url('images/logo.png') no-repeat;
}
#slogan {
width: 383px;
margin-left: 545px;
}
#nav {
margin: auto;
width: 920px;
height: 30px;
padding-top: 12px;
}
a.nav {
color: #333333;
text-decoration: none;
}
.navtext_home {
font-family: arial;
font-size: 12px;
font-weight: bold;
font-color: #333333;
margin-right: 30px;
margin-left: 12px;
}
.navtext_book {
font-family: arial;
font-size: 12px;
font-weight: bold;
font-color: #333333;
margin-left: 10px;
}
.navtext {
font-family: arial;
font-size: 12px;
font-weight: bold;
font-color: #333333;
margin-right: 30px;
margin-left: 15px;
}
#photo_box {
width: 410px;
height: 250px;
margin-right: 20px;
margin-top: 12px;
}
#contentwrap {
width: 900px;
min-height: 100%;
border: none;
margin-left: auto;
margin-right: auto;
position: relative;
}
#content {
width: 450px;
height: auto;
float: left;
margin-top: 25px;
margin-left: 0px;
}
#photo_box {
width: 400px;
height: 250px;
float: right;
margin-right: 20px;
margin-top: 12px;
}
#footer {
height: 249px;
margin: 0 0 0;
position: relative;
clear: both;
margin-top: 20px;
}
#footer_inner {
width: 900px;
height: 200px;
margin: 0 auto;
}
#footer_content_left {
width: 255px;
height: 100px;
color: #fdfd85;
float: left;
font-family: arial;
font-size: 12px;
font-weight: bold;
line-height: 17px;
background-color: #860000;
padding: 10px;
margin-left: 2px;
}
#footer_content_centre {
width: 255px;
height: 100px;
float: left;
color: #fdfd85;
font-family: arial;
font-size: 12px;
font-weight: bold;
margin-left: 35px;
line-height: 17px;
background-color: #860000;
padding: 10px;
}
#footer_content_right {
width: 255px;
height: 100px;
float: left;
color: #fdfd85;
font-family: arial;
font-size: 12px;
font-weight: bold;
margin-left: 35px;
line-height: 17px;
background-color: #860000;
padding: 10px;
}
.quick_links {
text-align: center;
font-family: arial;
font-size: 10px;
}
.copy {
text-align: center;
font-family: arial;
font-size: 10px;
color: #333333;
}
a.quicklinks {
color: #333333;
text-decoration: none;
}
/* view services roll-over on index page */
.view {
display: block;
width: 153px;
height: 25px;
background: url("images/view-services.png");
float: right;
margin-right: 10px;
}
.view:hover {
background-position: 0 25px;
}
.view span {
display:none;
}