I have a problem with some background images that don't display in ie 6.Everything is fine in ff and ie7 but not ie 6
Those bg images are for the menu(tabsE div) and for the pic div.
here is the html code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml"
lang="en" xml:lang="en">
<head>
<title><SITE_TITLE></title
>
<!-- Link for ATOM feed autodiscovery -->
<ATOM_AUTODETECT_LINK>
<!-- Link for RSS feed autodiscovery -->
<RSS_AUTODETECT_LINK>
<!-- META -->
<meta http-equiv="Content-Type" content="text/html;charset
=utf-8" />
<meta http-equiv="content-type" name="keywords" content="PhotoBlog,<SITE_T
ITLE>,<IMA
GE_TITLE>,
Pixelpost"
/>
<meta http-equiv="content-type" name="description" content="<SITE_TITLE>-Phot
oBlog: <IMAGE_TITLE>, <IMAGE_NOTES_CLEAN>" />
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="templates/simple/sty
les/light.
css" title="light" />
<link rel="alternate stylesheet" type="text/css" href="templates/simple/sty
les/dark.c
ss" title="dark" />
<!-- SCRIPTS -->
<script type="text/javascript" src="templates/simple/scri
pts/styles
witcher.js
"></script
>
</head>
<body>
<div id="navigation">
<h1><SITE_TITLE></h1>
<div id="tabsE">
<ul>
<!-- CSS Tabs -->
<li><a href="index.php"><span>Hom
e</span></
a></li>
<li><a href="index.php?x=about"><
span>Who?<
/span></a>
</li>
<li><a href="<SITE_BROWSELINK>"><
span>Archi
ves</span>
</a></li>
<li><a href="
http://www.flickr.com/photos/mcaphoto"><
span>Flick
r</span></
a></li>
<li><a href="#"><span>Misc</span>
</a></li>
<li><a href="
http://myspace.com/16102155"><
span>Myspa
ce</span><
/a></li>
<li><a href="index.php?x=contact"
><span>Con
tact</span
></a></li>
</ul>
</div>
<div id="title">
<img src="templates/simple/img/
nav_h1.gif
" alt="Mark Austin"/>
</div>
</div>
<div id="main">
<div id="pic">
<a href="index.php?showimage=
<IMAGE_PRE
VIOUS_ID>"
>
<img src="images/<IMAGE_NAME>" alt="<IMAGE_TITLE>" title="<IMAGE_TITLE>" width="<IMAGE_WIDTH>" height="<IMAGE_HEIGHT>" id="photo" />
</a>
</div>
<div id="image-navigate">
<span class="image-previous"><IM
AGE_PREVIO
US_LINK></
span>
<span class="image-next"><IMAGE_
NEXT_LINK>
</span>
</div>
<div id="image-info">
<span class="title"><IMAGE_TITLE
></span> |<IMAGE_DATE>
<table width="100%">
<tr>
<td id="image-notes"><IMAGE_NO
TES></td>
<td id="image-exif">
<EXIF_CAMERA_MODEL><br />
<EXIF_EXPOSURE_TIME><br />
<EXIF_APERTURE><br />
<EXIF_FLASH><br />
</td>
</tr>
</table>
<span class="addcomment">+ <COMMENT_POPUP></span>
</div>
</div>
<div id="footer">
<p>All rights reserved © Mark Austin 2006-2007</p>
</div>
</body>
</html>
and the css
/* ..........................
.... */
/* Basic */
/* ..........................
.... */
body {
background-color:#fff;
font-size:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
letter-spacing:0.5px;
color:#333;
padding:0px;
margin:0px;
margin-bottom:20px;
text-align:center;
}
html, body {
min-height:100.1%;
}
/* ..........................
.... */
/* Links */
/* ..........................
.... */
a {
color:#333;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
/* ..........................
.... */
/* Headings */
/* ..........................
.... */
h1 {
float:left;
clear:left;
font-weight:bold;
font-size:11px;
letter-spacing:2px;
color:#666;
margin:0px;
margin-left:5px;
padding:0px;
}
h1 a {
text-decoration:none;
color:#666;
}
h1 a:hover {
text-decoration:none;
}
.title {
font-weight:bold;
font-size:11px;
letter-spacing:1px;
color:#666;
margin:0px;
margin-bottom:5px;
margin-left:15px;
padding:0px;
}
h3 {
font-weight:bold;
font-size:11px;
letter-spacing:1px;
color:#666;
text-align:center;
}
/* ..........................
.... */
/* Navigation and menu */
/* ..........................
.... */
#navigation {position:relative;
background:#000;
border-bottom:1px solid #fff;
padding:5px;
margin-bottom:20px;
height:60px;
}
#navigation h1{
z-index : 3;
text-indent : -9999px;
}
#title{position:absolute;
left:10px;
bottom:5px;
}
.menu {
float:right;
clear:right;
text-align:right;
font-size:11px;
}
.menu a {
padding:7px;
padding-left:10px;
padding-right:10px;
}
.menu a:hover {
text-decoration:none;
color:#111;
}
/* ..........................
.... */
/* Content */
/* ..........................
.... */
#pic {
background:#000;
padding-bottom:20px;
background:url("
http://localhost/mark/templates/simple/img/pic_bg.gif") no-repeat ;
width:774px ;
margin:0 auto;
}
#photo {
margin-top:50px;
border:none;
margin-left:15px;
}
/* ..........................
.... */
/* Image Navigation */
/* ..........................
.... */
#image-navigate {
background:#fff;
color:#333;
padding:20px;
height:15px;
width:70%;
margin:0px auto;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:bold;
font-size:13pt;
}
#image-navigate a {
padding:10px;
}
.image-previous {
float:left;
}
.image-next {
float:right;
}
/* ..........................
.... */
/* Image Info */
/* ..........................
.... */
#image-info {
padding:20px;
text-align:justify;
width:70%;
margin:0px auto;
margin-bottom:25px;
line-height:16px;
}
#image-notes {
width:100%;
vertical-align:top;
}
#image-exif {
padding-top:10px;
text-align:right;
width:25%;
vertical-align:top;
}
.addcomment {
float:right;
clear:right;
padding:0px;
}
/* ..........................
.... */
/* Pages */
/* ..........................
.... */
#page {
background:#f5f5f5;
border:1px solid #ccc;
padding:20px;
text-align:left;
width:65%;
margin:0px auto;
margin-bottom:25px;
line-height:16px;
}
#page a {
font-weight:bold;
}
#page img {
background:#ffffff;
padding:5px;
border:1px solid #ccc;
}
.column{
width:48%;
text-align:left;
vertical-align:top;
padding:5px;
}
.thumbnails {
border:1px solid #f5f5f5;
padding:3px;
margin:3px;
}
/* ..........................
.... */
/* Comments */
/* ..........................
.... */
#comment-top {
background:#fff;
border-bottom:1px solid #eee;
padding:5px;
margin-bottom:25px;
height:15px;
}
#comments {
margin:0px auto;
width:95%;
text-align:left;
}
#comments ul {
list-style-type:none;
margin:0px;
padding:10px;
}
#comments li {
display:block;
margin:0px;
margin-bottom:10px;
color:#444;
text-decoration:none;
padding:10px;
border:1px solid #eee;
}
#comments li a {
color:#444;
text-decoration:none;
}
#comments li:hover {
background:#f5f5f5;
}
#comments li a:hover {
background:#f5f5f5;
}
#comment-middle {
background:#fff;
border-top:1px solid #eee;
padding:5px;
margin-top:25px;
height:15px;
}
#addcomment {
width:90%;
text-align:left;
padding:10px;
margin:0px auto;
border:1px solid #eee;
background:#f5f5f5;
}
.input {
width:45%;
font-size:10px;
border:1px solid #eee;
background-color:#fff;
color:#666;
padding:5px;
}
#addcomment textarea {
width:90%;
height:50px;
font-size:12px;
border:1px solid #eee;
background-color:#fff;
color:#666;
padding:5px;
}
.comment-button {
background:#fff;
border:1px solid #aaa;
color:#666;
border-bottom:2px solid #aaa;
border-right:2px solid #aaa;
}
/* ..........................
.... */
/* Footer */
/* ..........................
.... */
#footer {
text-align:center;
margin-bottom:20px;
}
/* ..........................
.... */
/* Calendar if you want to use */
/* a calendar in the template */
/* ..........................
.... */
.td-calendar-days-vz {
padding:1px;
text-align:center;
border-top:0px solid #999;
border-bottom:1px solid #999;
border-right:0px;
border-left:0px;
background:#fff;
color:#999;
}
.td-calendar-days-vz:hover
{
background:#444;
}
.td-calendar-days {
padding:1px;
text-align:center;
border-top:1px solid #999;
border-bottom:1px solid #999;
border-right:0px;
border-left:0px;
background:#fff;
color:#999;
}
.td-calendar-days:hover {
background:#444;
}
.td-calendar-navi-vz {
border-top:0px;
border-bottom:1px solid #999;
border-right:0px;
border-left:0px;
text-align:center;
letter-spacing:1px;
word-spacing:5px;
}
.td-calendar-navi-vz a {
text-decoration:none;
color:#444;
}
.td-calendar-navi {
border-top:0px;
border-bottom:1px solid #999;
border-right:0px;
border-left:0px;
text-align:right;
letter-spacing:1px;
word-spacing:5px;
}
.td-calendar-navi a {
text-decoration:none;
color:#444;
}
.td-calendar-days-imagefou
nd {
padding:1px;
text-align:center;
border-top:1px dotted #999;
border-bottom:1px dotted #999;
border-left:1px dotted #999;
border-right:1px dotted #999;
background:#f5f5f5;
}
.td-calendar-days-imagefou
nd:hover {
border-top:1px solid #999;
border-bottom:1px solid #999;
border-left:1px solid #999;
border-right:1px solid #999;
background:#666;
}
.td-calendar-days-imagefou
nd a {
text-decoration:none;
color:#444;
}
.td-calendar-days-imagefou
nd a:hover {
text-decoration:none;
color:#fff;
}
.table-calendar {
font-family:Helvetica, verdana, sans-serif;
font-size:10px;
padding:0px;
margin:0px;
width:600px;
border-top:0px;
border-bottom:0px;
border-right:0px;
border-left:0px;
}
.table-calendar-vz {
font-family:Helvetica, verdana, sans-serif;
font-size:10px;
padding:0px;
margin:0px;
width:200px;
border-top:0px;
border-bottom:0px;
border-right:0px;
border-left:0px;
}
#tabsE {
font: bold 11px/1.5em Verdana;
float:left;
position:absolute;
right:0px;
bottom:0px;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsE ul {
margin:0;
padding:10px 10px 0 0px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
float:left;
background:url("
http://localhost/mark/templates/simple/img/tableftE.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left;
display:block;
background:url("
http://localhost/mark/templates/simple/img/tabrightE.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */
#tabsE a:hover span {
color:#FFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}
#tabsE #current a {
background-position:0% -42px;
}
#tabsE #current a span {
background-position:100% -42px;
}
#main{
clear:both;
text-align:center;}
you can see it live at
http://kolordesigns.com/clients/mark/I hope someone will know what's the problem.