Hello, I have created an image gallery using CSS by Stu Nicholls. It works great in IE7 and firefox, but not in IE6. Is there a way to make this gallery work in IE6 or do I have to re-create it using javascript? Thank you in advance.
Here is the css:
/* CSS Document */
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;
}
body {
background-image:url(images/bkgrdstripes.jpg);
font-family: tahoma; arial, sans-serif;
font-size:76%;
letter-spacing:0.05em;
}
#wrapper{
width: 760px;
margin: 0 auto;
background-image:url(images/sky.jpg);
}
#banner {
height: 134px;
width: 760px;
background-image:url(images/banner.jpg);
background-repeat:no-repeat;
margin: 0;
padding: 0;
letter-spacing: .05em;
}
/* The containing box for the gallery. */
#container {
position:relative;
width:760px;
height:550px;
margin:5px auto 0 auto;
color: #cbe8ff;
text-align: center;
}
/* Removing the list bullets and indentation */
#container ul {
padding:0;
margin:0;
list-style-type:none;
}
/* Remove the images and text from sight */
#container a.gallery span {
position:absolute;
width:1px;
height:1px;
top:5px;
left:2px;
overflow:hidden;
}
/* Adding the thumbnail images */
#container a.gallery, #container a.gallery:visited {
display:block;
color:#000;
text-decoration:none;
border:1px solid #000;
margin:1px 2px 1px 5px;
text-align:left;
cursor:default;
}
#container a.slidea {
background:url(images/222shorehamsm.jpg);
height:86px;
width:120px;
}
#container a.slideb {
background:url(images/1839rochesterstsm.jpg);
height:86px;
width:120px;
}
#container a.slidec {
background:url(images/7378EMainsm.jpg);
height:86px;
width:120px;
}
#container a.slided {
background:url(images/9halsteadsm.jpg);
height:86px;
width:120px;
}
#container a.slidee {
background:url(images/846rollinsrunsm.jpg);
height:86px;
width:120px;
}
#container a.slidef {
background:url(images/37washingtonrdsm.jpg);
height:86px;
width:120px;
}
#container a.slideg {
background:url(images/259quakermeetingsm.jpg);
height:86px;
width:120px;
}
#container a.slideh {
background:url(images/8136quaylesm.jpg);
height:86px;
width:120px;
}
#container a.slidei {
background:url(images/120douglasrdsm.jpg);
height:86px;
width:120px;
}
#container a.slidej {
background:url(images/28dundasdrsm.jpg);
height:86px;
width:120px;
}
#container a.slidek {
background:url(images/1160strt5and20sm.jpg);
height:86px;
width:120px;
}
#container a.slidel {
background:url(images/30weststsm.jpg);
height:86px;
width:120px;
}
#container a.slidem {
background:url(images/27locuststsm.jpg);
height:86px;
width:120px;
}
#container a.sliden {
background:url(images/31mainsm.jpg);
height:86px;
width:120px;
}
#container a.slideo {
background:url(images/23wexfordglensm.jpg);
height:86px;
width:120px;
}
#container a.slidep {
background:url(images/5780mcphersonsm.jpg);
height:86px;
width:120px;
}
#container a.slideq {
background:url(images/7192wmainstsm.jpg);
height:86px;
width:120px;
}
#container a.slider {
background:url(images/115sibleyrdsm.jpg);
height:86px;
width:120px;
}
/* styling the :hover span */
#container a.gallery:hover span {
position:absolute;
width:350px;
height:400px;
top:5px;
left:400px;
color:#333;
}
#container a.gallery:hover img {
border:1px solid #000;
float:left;
margin: 0 0 10px 0;
}
#container a.slideb:hover img, #container a.slidei:hover img {
float:left;
}
#container {
background:url(images/7378emainstbkgrd.jpg) 400px 5px no-repeat;
}
/* set the size of the unordered list to neatly house the thumbnails */
#container ul {
width:430px;
height:521px;
}
#container li {
float:left;
}
/* move the thumbnails into the correct position */
#container ul {
margin:4px;
float:left;
}
/* change the thumbnail border color */
#container a.gallery:hover {
border:1px solid #000;
}
#navbar li {
display:inline;
border:1px solid;
margin:0 0 0 15px;
padding:0 0 0 10px;
line-height: 9em;
float: left;
}
#navigation {padding: 111px 1px 1px 5px; margin: 0 5px 5px 20px;
font: bold 11.25px arial, sans-serif;}
#navigation li {list-style: none; margin: 2px; display: inline; float:right; line-height: 2em;}
#navigation li a:visited {color: #000000;}
#navigation li a {padding: 0.5em 1em 0.5em 0.75em;
text-decoration: none;}
#navigation li a:link {color: #333;}
#navigation li a:hover {color: #990000; text-decoration: underline;}
.clearit{
clear: both;
}
h2 {
font-size:18px;
font-family: times;
color: #333;
font-variant: small-caps;
letter-spacing: 4px;
line-height: 200%;
}
#listcontainer {
width: 600px;
margin-left: 15px;
padding: 0;
font: normal 13px arial, san-serif;
text-align: left;
}
#listcontainer ul {
list-style-type: none;
list-style-position: outside;
margin: 0 20px 0 10px;
}
#listcontainer li {
background: transparent url(images/triangle.gif) left center no-repeat;
width: 600px;
margin-left: 10px;
padding-left: 20px;
margin-bottom: 7px;
}
#introtext{
width: 650px;
float: left;
margin: 5px 20px 0 20px;
padding: 0 20px 0 30px;
text-indent: 10px;
letter-spacing: .03em;
}
p {
color: #000;
font:normal 16px palatino, serif;
text-align: center;
line-height: 1.2em;
}
p.portfoliosubheading {
color: #000;
font:normal 15px palatino, serif;
text-align: center;
line-height: 1.2em;
}
p.contactpg {
font:normal 14px palatino, serif;
letter-spacing: .5px;
line-height: 110%;
color: #111111;
margin-bottom: 5px;
}
p.contactpgsubheaders {
font:normal 16px palatino, serif;
letter-spacing: .5px;
line-height: 110%;
color: #111111;
margin-bottom: 5px;
}
p.subheading {
font:normal 16px georgia, serif;
letter-spacing: .45px;
line-height: 130%;
color: #333;
}
p.heading {
font:normal 24px georgia, serif;
letter-spacing: .6px;
line-height: 130%;
color: #990000;
text-align: center;
}
p.contacttitles {
font:normal 16px georgia, serif;
letter-spacing: .6px;
line-height: 130%;
color: #990000;
margin-bottom: 5px;
}
p.intro {
font:normal 12.5px arial, san-serif;
line-height: 100%;
text-align: justify;
margin-top: 5px;
margin-bottom: 5px;
}
img.stylename
{ border: .75pt solid black; }
.rule {
width: 500px;
text-align: center;
margin-left:25px;
margin-right: 25px;
background-color: #990000;
}
#footer {
height:51px;
width:890px;
background-image:url(images/barberfooter.jpg);
background-repeat:no-repeat;
}
.leftcol {
float: left;
width: 380px;
margin-top: 20px;
padding: 0;
margin-left: 20px;
margin-bottom: 0;
}
.testimonialrightcol {
float: right;
padding: 10px 0 0 0;
width: 340px;
margin: 20px 20px 0 10px;
}
.testimonialleftcol {
float: left;
width: 340px;
margin: 20px 10px 0 20px;
padding: 10px 0 0 0;
}
.rightcol {
float: right;
padding: 10px;
width: 300px;
height: 70px;
margin-right: 20px;
margin-top: 100px;
margin-left: 0;
background-color: #dedede;
}
p.secheading {
font:normal 20px georgia, serif;
letter-spacing: .8px;
line-height: 130%;
text-align: left;
}
p.introcentered {
font:normal 12.5px arial, san-serif;
text-align: center;
line-height: 120%;
margin-top: 5px;
}
img.stylename
{ border: .75pt solid black; }
.rule {
width: 500px;
text-align: center;
margin-left:25px;
margin-right: 25px;
background-color: #990000;
}
#footer {
height:51px;
width:890px;
background-image:url(images/barberfooter.jpg);
background-repeat:no-repeat;
}
#secfooter {
height:28px;
width:760px;
background-color:#231918;
background-repeat:no-repeat;
font:normal 11px arial, san-serif;
color: #fff;
line-height: 200%;
letter-spacing: .2px;
}
Here is the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>jbhomes</title>
<link href="testpage6.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="wrapper">
<div id="banner">
<div id="navigation"><ul>
<li><a href="index.html">contact me</a></li>
<li><a href="about.html">property search</a></li>
<li><a href="portfolio.html">client services</a></li>
<li><a href="testimonials.html">testimonials</a></li>
<li><a href="services.html">my portfolio</a></li>
<li><a href="mainframe.html">about me</a></li>
<li><a href="index.html" target="_top">home</a></li></ul>
</div>
</div>
<div id="introtext">
<p class="intro">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<br/>
<p class="intro"><i>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</i></p>
</div>
<div class="clearit"></div>
<div id="container">
<ul>
<li>
<a class="gallery slidea" href="#nogo">
<span>
<img src="images/259quakermeeting.jpg" alt="Alpha" title="Alpha" />
<br />
xxxxxxxxxxxxxx
<br />
xxxxxxxxxxxxxxx
</span>
</a>
</li>
<li>
<a class="gallery slideb" href="#nogo">
<span>
<img src="images/1839rochesterst.jpg" alt="Minie" title="Minie" />
<br />
xxxxxxxxxxxxxxxx
<br />
xxxxxxxxxxxxxxx
</span>
</a>
</li>
<li>
<a class="gallery slidec" href="#nogo">
<span>
<img src="images/7378emainst.jpg" alt="Megan" title="Megan" />
<br />
xxxxxxxxxxxxxxxxxxx
<br />
xxxxxxxxxxxxxxxxxxxx
</span>
</a>
</li>
<li>
<a class="gallery slided" href="#nogo">
<span>
<img src="images/9halstead.jpg" alt="Nancy" title="Nancy" />
<br />
xxxxxxxxxxxxxxxxxxxxxx
<br />
xxxxxxxxxxxxxxxxxxxxxxx
</span>
</a>
</li>
<li>
<a class="gallery slidee" href="#nogo">
<span><img src="images/7192wmainst.jpg" alt="Missy" title="Missy" />
<br />
xxxxxxxxxxxxxxxxxxxxxxxxxx
<br />
xxxxxxxxxxxxxxxxxxxxxxxxxxx
</span>
</a>
</li>
<li>
<a class="gallery slidef" href="#nogo">
<span>
<img src="images/5780mcpherson.jpg" alt="Stray pup" title="Stray pup" />
<br />
xxxxxxxxxxxxxxxxxxxxxxxxxxx
<br />
xxxxxxxxxxxxxxxxxxxxxxxxxx
</span>
</a>
</li>
<li>
<a class="gallery slideg" href="#nogo">
<span>
<img src="images/31main.jpg" alt="Rolo" title="Rolo" />
<br />
xxxxxxxxxxxxxxxxxxxxxxx
<br />
xxxxxxxxxxxxxxxxxxxxxx
</span>
</a>
</li>
<li>
<a class="gallery slideh" href="#nogo">
<span>
<img src="images/8136quayle.jpg" alt="Gigio" title="Gigio" />
<br />
xxxxxxxxxxxxxxxxxx
<br />
xxxxxxxxxxxxx
</span>
</a>
</li>
<li>
<a class="gallery slidei" href="#nogo">
<span>
<img src="images/14french.jpg" alt="Westy pup" title="Westy Pup" />
<br />
xxxxxxxxxxxxxxx
<br />
xxxxxxxxxxxxxxxxx
</span>
</a>
</li>
<li>
<a class="gallery slidej" href="#nogo">
<span>
<img src="images/28dundasdr.jpg" alt="Giga Byte" title="Fishing" />
<br />
xxxxxxxxxxxxxxxxx
<br />
xxxxxxxxxxxxxxxxxx
</span>
</a>
</li>
<li>
<a class="gallery slidek" href="#nogo">
<span>
<img src="images/1160strt5and20.jpg" alt="Puppy" title="Puppy" />
<br />
xxxxxxxxxxxxxxxxxxxx
<br />
xxxxxxxxxxxxxxxxxx
</span>
</a>
</li>
<li>
<a class="gallery slidel" href="#nogo">
<span>
<img src="images/1497bragg.jpg" alt="Buffy" title="Buffy" />
<br />
xxxxxxxxxxxx
<br />
xxxxxxxxxxxxxx
</span>
</a>
</li>
<li>
<a class="gallery slidem" href="#nogo">
<span>
<img src="images/27locustst.jpg" alt="Buffy" title="Buffy" />
<br />
xxxxxxxxxxxxx
<br />
xxxxxxxxxxxxxx
</span>
</a>
</li>
<li>
<a class="gallery sliden" href="#nogo">
<span>
<img src="images/445cheesefactory.jpg" alt="Buffy" title="Buffy" />
<br />
xxxxxxxxxxxxxx
<br />
xxxxxxxxxxxxxxx
</span>
</a>
</li>
<li>
<a class="gallery slideo" href="#nogo">
<span>
<img src="images/23wexfordglen.jpg" alt="Buffy" title="Buffy" />
<br />
xxxxxxxxxxxxx
<br />
xxxxxxxxxxxxx
</span>
</a>
</li>
<li>
<a class="gallery slidep" href="#nogo">
<span>
<img src="images/222shorehamdr.jpg" alt="Buffy" title="Buffy" />
<br />
xxxxxxxxxxxxxxxx
<br />
xxxxxxxxxxxxxxx
</span>
</a>
</li>
<li>
<a class="gallery slideq" href="#nogo">
<span>
<img src="images/846rollinsrun.jpg" alt="Buffy" title="Buffy" />
<br />
xxxxxxxxxxxx
<br />
xxxxxxxxxxxxx
</span>
</a>
</li>
<li>
<a class="gallery slider" href="#nogo">
<span>
<img src="images/115sibleyrd.jpg" alt="Buffy" title="Buffy" />
<br />
xxxxxxxxxxx
<br />
xxxxxxxxxxxxxxxx
</span>
</a>
</li>
</ul>
</div>
<div class="clearit"></div>
<div id="secfooter">
</div>
</div>
</body>
</html>
