outomyelement
03-24-2009, 05:49 PM
Hey, i'm trying to float a div over an existing div with the purpose of hovering images. The code and html may be somewhat cumbersome...
Here is the css:
/* PORTABLE FARMS GALLERY STYLING */
/* The containing box for the gallery. */
#gallery {
position:relative;
width:720px;
height:470px;
margin:10px auto 0 auto;
}
/* Removing the list bullets and indentation */
#gallery ul {
padding:0;
margin:0;
list-style-type:none;
}
/* Remove the images and text from sight */
#gallery a.gallery span {
position:absolute;
width:1px;
height:1px;
top:5px;
left:5px;
overflow:hidden;
background:#afd437;
}
/* Adding the thumbnail images */
#gallery a.gallery, #gallery a.gallery:visited {
display:block;
color:#000;
text-decoration:none;
border:1px solid #000;
margin:1px 2px 1px 2px;
text-align:left;
cursor:default;
}
#gallery a.slidea {
background:url(images/pf/PF_Gallery/thumbs/3farms.JPG);
height:45px;
width:60px;
}
#gallery a.slideb {
background:url(images/pf/PF_Gallery/thumbs/plant2.JPG);
height:45px;
width:60px;
}
#gallery a.slidec {
background:url(images/pf/PF_Gallery/thumbs/peapots.JPG);
height:45px;
width:60px;
}
#gallery a.slided {
background:url(images/pf/PF_Gallery/thumbs/20x30out.JPG);
height:45px;
width:60px;
}
* html #gallery a.slided {
width:91px;
width:93px;
}
#gallery a.slidee {
background:url(images/pf/PF_Gallery/thumbs/6x8out.JPG);
height:45px;
width:60px;
}
#gallery a.slidef {
background:url(images/pf/PF_Gallery/thumbs/10x20out.JPG);
height:45px;
width:60px;
}
* html #gallery a.slidef {
width:91px;
width:93px;
}
#gallery a.slideg {
background:url(images/pf/PF_Gallery/thumbs/10x20out2.JPG);
height:45px;
width:60px;
}
#gallery a.slideh {
background:url(images/pf/PF_Gallery/thumbs/10x20in.JPG);
height:45px;
width:60px;
}
#gallery a.slidei {
background:url(images/pf/PF_Gallery/thumbs/plant3.JPG);
height:45px;
width:60px;
}
#gallery a.slidej {
background:url(images/pf/PF_Gallery/thumbs/plant4.JPG);
height:45px;
width:60px;
}
#gallery a.slidek {
background:url(images/pf/PF_Gallery/thumbs/plant5.JPG);
height:45px;
width:60px;
}
* html #gallery a.slidek {
width:91px;
width:93px;
}
#gallery a.slidel {
background:url(images/pf/PF_Gallery/thumbs/plant6.JPG);
height:45px;
width:60px;
}
#gallery a.slidem {
background:url(images/pf/PF_Gallery/thumbs/plant1.JPG);
height:45px;
width:60px;
}
#gallery a.sliden {
background:url(images/pf/PF_Gallery/thumbs/20x30in.JPG);
height:45px;
width:60px;
}
* html #gallery a.sliden {
width:91px;
width:93px;
}
#gallery a.slideo {
background:url(images/pf/PF_Gallery/thumbs/plant9.JPG);
height:45px;
width:60px;
}
#gallery a.slidep {
background:url(images/pf/PF_Gallery/thumbs/tank1.JPG);
height:45px;
width:60px;
}
#gallery a.slideq {
background:url(images/pf/PF_Gallery/thumbs/plant12.JPG);
height:45px;
width:60px;
}
#gallery a.slider {
background:url(images/pf/PF_Gallery/thumbs/plant8.JPG);
height:45px;
width:60px;
}
/* set the size of the unordered list to neatly house the thumbnails */
#gallery ul {
width:270px;
height:386px;
padding:15px;
}
#gallery li {
float:left;
}
/* move the thumbnails into the correct position */
#gallery ul {
margin:5px;
float:left;
}
/* change the thumbnail border color */
#gallery a.gallery:hover {
border:1px solid #fff;
}
/* styling the :hover span */
#gallery a.gallery:hover span {
position:absolute;
width:530px;
height:515px;
top:28px;
left:303px;
color:#000;
background:#fff;
margin:0px;
padding-top:10px;
z-index: 100;
}
#gallery a.gallery:hover img {
float:left;
}
#gallery a.slideb:hover img, #gallery a.slidei:hover img {
float:left;
}
/* END GALLERY STYLING */
Here is the HTML:
<div id="gallery">
<ul>Image Gallery
<li>
<a class="gallery slidea" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/3farms.JPG" alt="farms" title="farms" />
</span>
</a>
</li>
<li>
<a class="gallery slideb" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/plant2.JPG" alt="plant2" title="plant2" />
<br />
</span>
</a>
</li>
<li>
<a class="gallery slidec" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/peapots.JPG" alt="peapots" title="peapots" />
<br />
</span>
</a>
</li>
<li>
<a class="gallery slidee" href="#nogo">
<span><img src="images/pf/PF_Gallery/6x8out.JPG" alt="6x8" title="6x8" />
</span>
</a>
</li>
<li>
<a class="gallery slidef" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/10x20out.JPG" alt="10x20out" title="10x20out" />
</span>
</a>
</li>
<li>
<a class="gallery slided" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/20x30out.JPG" alt="20x30out" title="20x30out" />
</span>
</a>
</li>
<li>
<a class="gallery slideg" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/10x20out2.JPG" alt="10x20out2" title="10x20out2" />
</span>
</a>
</li>
<li>
<a class="gallery slideh" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/10x20in.JPG" alt="10x20in" title="10x20in" />
</span>
</a>
</li>
<li>
<a class="gallery slidei" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/plant3.JPG" alt="plant3" title="plant3" />
<br />
</span>
</a>
</li>
<li>
<a class="gallery slidej" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/plant4.JPG" alt="plant4" title="plant4" />
<br />
</span>
</a>
</li>
<li>
<a class="gallery slidek" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/plant5.JPG" alt="plant5" title="plant5" />
<br />
</span>
</a>
</li>
<li>
<a class="gallery slidel" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/plant6.JPG" alt="plant6" title="plant6" />
<br />
</span>
</a>
</li>
<li>
<a class="gallery slidem" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/plant1.JPG" alt="plant1" title="plant1" />
<br />
</span>
</a>
</li>
<li>
<a class="gallery sliden" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/20x30in.JPG" alt="20x30in" title="20x30in" />
<br />
</span>
</a>
</li>
<li>
<a class="gallery slideo" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/plant9.JPG" alt="plant9" title="plant9" />
<br />
</span>
</a>
</li>
<li>
<a class="gallery slidep" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/tank1.JPG" alt="tank1" title="tank1" />
<br />
</span>
</a>
</li>
<li>
<a class="gallery slideq" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/plant12.JPG" alt="plant12" title="plant12" />
<br />
</span>
</a>
</li>
<li>
<a class="gallery slider" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/plant8.JPG" alt="plant11" title="plant8" />
<br />
</span>
</a>
</li>
</ul>
</div>
The issue i'm having is that it displays correctly in firefox but not iexplorer. I can see when I hover a white bar to the left of the right content section like it's going to work but nothing 'hovers' (under i.e. only). If you see it under firefox, you can see what i'm trying to do.
Thanks for any and all help!!!
http://www.sustainablelogic.com/pfarms.html
Here is the css:
/* PORTABLE FARMS GALLERY STYLING */
/* The containing box for the gallery. */
#gallery {
position:relative;
width:720px;
height:470px;
margin:10px auto 0 auto;
}
/* Removing the list bullets and indentation */
#gallery ul {
padding:0;
margin:0;
list-style-type:none;
}
/* Remove the images and text from sight */
#gallery a.gallery span {
position:absolute;
width:1px;
height:1px;
top:5px;
left:5px;
overflow:hidden;
background:#afd437;
}
/* Adding the thumbnail images */
#gallery a.gallery, #gallery a.gallery:visited {
display:block;
color:#000;
text-decoration:none;
border:1px solid #000;
margin:1px 2px 1px 2px;
text-align:left;
cursor:default;
}
#gallery a.slidea {
background:url(images/pf/PF_Gallery/thumbs/3farms.JPG);
height:45px;
width:60px;
}
#gallery a.slideb {
background:url(images/pf/PF_Gallery/thumbs/plant2.JPG);
height:45px;
width:60px;
}
#gallery a.slidec {
background:url(images/pf/PF_Gallery/thumbs/peapots.JPG);
height:45px;
width:60px;
}
#gallery a.slided {
background:url(images/pf/PF_Gallery/thumbs/20x30out.JPG);
height:45px;
width:60px;
}
* html #gallery a.slided {
width:91px;
width:93px;
}
#gallery a.slidee {
background:url(images/pf/PF_Gallery/thumbs/6x8out.JPG);
height:45px;
width:60px;
}
#gallery a.slidef {
background:url(images/pf/PF_Gallery/thumbs/10x20out.JPG);
height:45px;
width:60px;
}
* html #gallery a.slidef {
width:91px;
width:93px;
}
#gallery a.slideg {
background:url(images/pf/PF_Gallery/thumbs/10x20out2.JPG);
height:45px;
width:60px;
}
#gallery a.slideh {
background:url(images/pf/PF_Gallery/thumbs/10x20in.JPG);
height:45px;
width:60px;
}
#gallery a.slidei {
background:url(images/pf/PF_Gallery/thumbs/plant3.JPG);
height:45px;
width:60px;
}
#gallery a.slidej {
background:url(images/pf/PF_Gallery/thumbs/plant4.JPG);
height:45px;
width:60px;
}
#gallery a.slidek {
background:url(images/pf/PF_Gallery/thumbs/plant5.JPG);
height:45px;
width:60px;
}
* html #gallery a.slidek {
width:91px;
width:93px;
}
#gallery a.slidel {
background:url(images/pf/PF_Gallery/thumbs/plant6.JPG);
height:45px;
width:60px;
}
#gallery a.slidem {
background:url(images/pf/PF_Gallery/thumbs/plant1.JPG);
height:45px;
width:60px;
}
#gallery a.sliden {
background:url(images/pf/PF_Gallery/thumbs/20x30in.JPG);
height:45px;
width:60px;
}
* html #gallery a.sliden {
width:91px;
width:93px;
}
#gallery a.slideo {
background:url(images/pf/PF_Gallery/thumbs/plant9.JPG);
height:45px;
width:60px;
}
#gallery a.slidep {
background:url(images/pf/PF_Gallery/thumbs/tank1.JPG);
height:45px;
width:60px;
}
#gallery a.slideq {
background:url(images/pf/PF_Gallery/thumbs/plant12.JPG);
height:45px;
width:60px;
}
#gallery a.slider {
background:url(images/pf/PF_Gallery/thumbs/plant8.JPG);
height:45px;
width:60px;
}
/* set the size of the unordered list to neatly house the thumbnails */
#gallery ul {
width:270px;
height:386px;
padding:15px;
}
#gallery li {
float:left;
}
/* move the thumbnails into the correct position */
#gallery ul {
margin:5px;
float:left;
}
/* change the thumbnail border color */
#gallery a.gallery:hover {
border:1px solid #fff;
}
/* styling the :hover span */
#gallery a.gallery:hover span {
position:absolute;
width:530px;
height:515px;
top:28px;
left:303px;
color:#000;
background:#fff;
margin:0px;
padding-top:10px;
z-index: 100;
}
#gallery a.gallery:hover img {
float:left;
}
#gallery a.slideb:hover img, #gallery a.slidei:hover img {
float:left;
}
/* END GALLERY STYLING */
Here is the HTML:
<div id="gallery">
<ul>Image Gallery
<li>
<a class="gallery slidea" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/3farms.JPG" alt="farms" title="farms" />
</span>
</a>
</li>
<li>
<a class="gallery slideb" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/plant2.JPG" alt="plant2" title="plant2" />
<br />
</span>
</a>
</li>
<li>
<a class="gallery slidec" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/peapots.JPG" alt="peapots" title="peapots" />
<br />
</span>
</a>
</li>
<li>
<a class="gallery slidee" href="#nogo">
<span><img src="images/pf/PF_Gallery/6x8out.JPG" alt="6x8" title="6x8" />
</span>
</a>
</li>
<li>
<a class="gallery slidef" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/10x20out.JPG" alt="10x20out" title="10x20out" />
</span>
</a>
</li>
<li>
<a class="gallery slided" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/20x30out.JPG" alt="20x30out" title="20x30out" />
</span>
</a>
</li>
<li>
<a class="gallery slideg" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/10x20out2.JPG" alt="10x20out2" title="10x20out2" />
</span>
</a>
</li>
<li>
<a class="gallery slideh" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/10x20in.JPG" alt="10x20in" title="10x20in" />
</span>
</a>
</li>
<li>
<a class="gallery slidei" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/plant3.JPG" alt="plant3" title="plant3" />
<br />
</span>
</a>
</li>
<li>
<a class="gallery slidej" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/plant4.JPG" alt="plant4" title="plant4" />
<br />
</span>
</a>
</li>
<li>
<a class="gallery slidek" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/plant5.JPG" alt="plant5" title="plant5" />
<br />
</span>
</a>
</li>
<li>
<a class="gallery slidel" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/plant6.JPG" alt="plant6" title="plant6" />
<br />
</span>
</a>
</li>
<li>
<a class="gallery slidem" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/plant1.JPG" alt="plant1" title="plant1" />
<br />
</span>
</a>
</li>
<li>
<a class="gallery sliden" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/20x30in.JPG" alt="20x30in" title="20x30in" />
<br />
</span>
</a>
</li>
<li>
<a class="gallery slideo" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/plant9.JPG" alt="plant9" title="plant9" />
<br />
</span>
</a>
</li>
<li>
<a class="gallery slidep" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/tank1.JPG" alt="tank1" title="tank1" />
<br />
</span>
</a>
</li>
<li>
<a class="gallery slideq" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/plant12.JPG" alt="plant12" title="plant12" />
<br />
</span>
</a>
</li>
<li>
<a class="gallery slider" href="#nogo">
<span>
<img src="images/pf/PF_Gallery/plant8.JPG" alt="plant11" title="plant8" />
<br />
</span>
</a>
</li>
</ul>
</div>
The issue i'm having is that it displays correctly in firefox but not iexplorer. I can see when I hover a white bar to the left of the right content section like it's going to work but nothing 'hovers' (under i.e. only). If you see it under firefox, you can see what i'm trying to do.
Thanks for any and all help!!!
http://www.sustainablelogic.com/pfarms.html