PDA

View Full Version : CSS Rollover Issue



Brooxy28
Aug 12th, 2009, 04:24 PM
Hey guys,

I've built a CSS rollover thing which displays a description (effectively an image) whenever the text is rolled over on - based on this page here. (http://moneytreesystems.com/css/picpopup.html)

It works fine on it's own, but problem is, I have a timetable with a description for each time slot and all these rollovers next to each other, and whenever the rollover pops up, it hides behind other rollovers.

You can see what's happening here:

http://www.conquest-solutions.com.au/hph/Timetable/CurrentTerm/tabid/75/Default.aspx

When you roll over any of the class names (eg Beg 1) it gets stuck behind other class names.

The CSS looks like this:


#pic {
background-color: #F2F2F2;
position: relative;
text-align:center;
width:100px;
}

#pic a .large {
border: 0px;
display: block;
height: 1px;
left: -1px;
position: absolute;
top: -1px;
width: 1px;
}

#pic a img {
border: 0;
}

#pic a.p1, #pic a.p1:visited {
background: #F2F2F2;
border: 0px solid #000000;
display: block;
left: 0;
text-decoration: none;
top: 0;
color: #000000;
}

#pic a.p1:hover {
background-color: #ED008C;
color: #000000;
text-decoration: none;
}

#pic a.p1:hover .large {
border: 0px solid #000000;
display: block;
height: 283px;
left: 150px;
position: absolute;
top: -60px;
width: 405px;
}


The file is here:

http://conquest-solutions.com.au/hph/portals/1/picpopup.css

And the html for each roll over looks like this:


<div id="pic">
<a class="p1" href="#">BEG 1<img width="405" height="308" src="/HPH/portals/1/content/descriptions/beginners1.png" alt="Class description" class="large" /></a>
</div>

How can I get the image to display over the top of other descriptions??

abduraooft
Aug 12th, 2009, 04:49 PM
How can I get the image to display over the top of other descriptions??

#pic a .large {/*picpopup.css (line 8)*/
border:0 none;
display:block;
height:1px;
left:-1px;
position:absolute;
top:-1px;
width:1px;
z-index:10;
}

Nothingkool
Aug 12th, 2009, 04:50 PM
After skimming through your post and site, I think that you might be able to add a "overflow: hidden;" to your tables' "<td>" tags using a class. (without css: <td style="overflow:hidden"> or with css: <td class="your_td_style">)

Just a guess, give it a try.

Brooxy28
Aug 12th, 2009, 04:56 PM
#pic a .large {/*picpopup.css (line 8)*/
border:0 none;
display:block;
height:1px;
left:-1px;
position:absolute;
top:-1px;
width:1px;
z-index:10;
}

Thanks very much - legend!

Brooxy28
Aug 12th, 2009, 05:33 PM
Not quite fixed yet!

Fixed in Firefox and Safari, however IE (as always) wants to have a bit of fun by still displaying it below.

I've edited the z-index on all properties to try and bring the text below the popup, but no success.

Brooxy28
Aug 13th, 2009, 06:45 PM
Anyone have an idea?