1 reply [Last post]
snakebite317
Offline
newbie
lowell, MA, USA
Last seen: 13 years 1 week ago
lowell, MA, USA
Joined: 2008-01-21
Posts: 2
Points: 0

please peek at http://www.the317life.com/MyBlackLace/ . the issue is that when viewing in Internet Explorer, the hover-previews of items are behind the other thumbs and not on top. Been fighting this thumb-hover thing the client wanted all weekend, decided to run with Nathan Smith's Hoverbox code (http://sonspring.com/journal/hoverbox-image-gallery).

My only problem with that method was I didn't want to preload the images, to save load time on many-item pages.. but i made the sacrifice after not finding a better solution (items set to display:none in their original state still load, is that correct?). Ideally I wish I could learn how to use this beautiful trick nicely accomplished at http://www.dark-i.com/. The load-on-hover and follow mouse preview. Could not find a tutorial and the only places i found using that were pulling in ASP files.

I thought the problem I have is because i'm closing each list and div for each item. But I tried leaving them open and was still having the same problem, what is the best way to organize all the different item "details" and maintain the design with hover capabilities on the thumbs & add button?

Below is the xhtml, and then the relevant CSS:

////xhtml



  • description

    Orgasmix Gel Tube for Women



Orgasmix Gel Tubes

for Women

$25.00

.

  • description
    Liquid Virgin for Women

Liquid Virgin
for Women
$25.00
.
////end xhtml

That code is basically just repeated with the exception of the 4th item in each line is just give the 2nd class "hoverboxright" to make the hover-image pop-up more to the left than the other items.

Here is my current relevant css:

//CSS .item { text-align: center; width: 160px; float:left; background-color:#000033; padding: 0; margin: 5px 5px; }

.item img {
border:solid 1px #000000;
margin-top:5px;
margin-bottom:5px;
z-index: 5;
}

a.button {
background: url(images/addbig.gif) no-repeat 0 0;
width: 93px;
height: 25px;
display: block;
margin: 5px 35px;
text-align:left;
text-decoration:none;
font-size:0;
color:#000000;
}

a.button:hover {
background-position: 0px -25px;
}

.hoverbox {
cursor: default;
list-style: none;
margin:0;
padding:0;
}

.hoverbox a {
cursor: default;
}

.hoverbox a .preview {
display: none;
}

.hoverbox a .caption {
display: none;
}

.hoverbox a:hover .preview {
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 100;
padding: 0px 0px;
}

.hoverboxright a:hover .preview {
left: -150px;
z-index:100;
}

.hoverbox a:hover .caption {
text-align:center;
display: block;
width:340px;
text-decoration:none;
color: #000000;
font-size:11px;
position: absolute;
top: 325px;
left:-45px;
z-index: 100;
padding: 5px 5px;
border:1px solid #000000;
background-color:#FFFFFF;
}

.hoverboxright a:hover .caption {
left: -150px;
}

.hoverbox img {
border-style: solid;
border-width: 1px;
color: inherit;
padding: 0px 5px;
vertical-align: top;
width: 150px;
height: 150px;
}

.hoverbox li {
margin: 0px 0px 10px 0px;
padding: 0px;
height:150px;
background: #000033;
color: inherit;
display: inline;
float: left;
position: relative;
}

.hoverbox .preview {
border-color: #000;
width: 350px;
height: 350px;
}

#add {
border:0;
margin-bottom:2px;
}
//CSS

Thanks in advance

snakebite317
Offline
newbie
lowell, MA, USA
Last seen: 13 years 1 week ago
lowell, MA, USA
Joined: 2008-01-21
Posts: 2
Points: 0

got it

I figured it out.

Needed these IE fixes in a separate "if IE" CSS

/* =Internet Explorer Fixes ----------------------------------------------------------------------*/

.hoverbox a
{
position: relative;
}

.hoverbox a:hover
{
display: block;
font-size: 100%;
z-index: 1;
}

.hoverbox a:hover .preview
{
top: -38px;
left: -50px;
}

.hoverboxright a:hover .preview {
left: -150px;
}

.hoverbox a:hover .caption
{
left: -50px;
}

.hoverboxright a:hover .caption
{
left: -150px;
}

.hoverbox li
{
position: static;
}