SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 compatibility problems

    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

    HTML Code:
    * {
    	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;
    }
    Attached Images Attached Images

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi that's because they are PNGS and IE6 doesn't have support for transparent PNGs
    http://www.twinhelix.com/css/iepngfix/
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tip Ryan. Do you know how I can fix the browser issue?

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I gave you a link which points out how to fix the image issue
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I changed the images to GIF would that fix the browser issue without having to add the code provided in your link?

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yes, gifs also have 1bit transparency (apposed to 256 of png) so the image quality would be reduced but in short yes that would solve your issue

    You could use a conditional comment to feed IE6 the .gifs, that way all other browsers would get to see the better images
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •