Hello all!
This is my first post, so I'm a bit nervous! Please let me know (and
forgive me) if I break any of the lists' rules... Most of the times,
I've been able to get myself out of sticky situations, but this time
I'm stumped!
I have a list that displays information of certain items. Because of
the layout given to me (and the fact that I refuse to use tables!), I
had to absolutely position elements within the list.
To save space, a tooltip was required from within the list. But (I
think) because the other list item (boxes) below are relatively
positionned, the tooltip shows up _under_ the subsequent items, only
in IE!
If I forcefully remove the pos:relative from the box below, the
tooltip will show over it. But is there a better way?
I have been busting my head on this one for a while now! Any help
and/or suggestions is more than appreciated!
I unfortunately do not have a link to a page that you can view it, but
here is the css and structure example:
/*
CSS
*/
body {
background-color: #ccc;
}
ul {
list-style: none;
}
ul li
{
position: relative;
margin: 0 5px 0 5px;
padding: 0.5em 0 0.5em 0;
line-height: 1.0em;
height: 7em;
clear: both;
}
.list-item
{
position: relative;
margin: 0;
padding: 0;
background: #eee;
}
.list-item .header
{
height: 4px;
}
.list-item .header h2 {
margin: 0;
padding: 0;
height: 4px;
}
.list-item .content {
margin: 0;
padding: 0 0 0 1.5em;
height: 7em;
}
.list-item .content .item-title {
display: block;
font-size: 1.1em;
border-bottom: 1px dotted #4D758F;
}
.list-item .content .item-subtitle {
font-size: 0.9em;
font-weight: bold;
}
.list-item .content input {
float: right;
height: 17px;
width: 52px;
}
/* Tool tip */
.song_inplaylist {
position: absolute;
right: 138px;
bottom: 2px;
width: 65px;
height: 12px;
text-align: center;
background-color: blue;
}
.song_inplaylist a {
z-index: 10;
color: #fff;
}
.song_inplaylist a div {
display: none;
}
.song_inplaylist a:hover {
position: relative;
z-index: 25;
}
.song_inplaylist a:hover div {
display: block;
position: absolute;
top: -6px;
left: 65px;
border: 1px solid #000;
background-color: #FFF5E0;
color: #000;
padding: 3px;
z-index: 45;
}
HTML:
<ul>
<li>
<div class="list-item">
<div class="header"><h2> </h2></div>
<div class="content">
<span class="delete_song"><input type="button" value=""
onclick="remove_song" /></span>
<span class="item-title">Item Title</span>
<div class="tags">
<div id="song_53990105_inplaylist">
<div class="song_inplaylist">
<a href="#">
In playlist
<div>
Rammstein<br/>Rave<br/>Rock<br/>Songs
that make me think of
Phil
Rammstein<br/>Rave<br/>Rock<br/>Songs that make
me think of Phil
Rammstein<br/>Rave<br/>Rock<br/>Songs that make
me think of Phil
Rammstein<br/>Rave<br/>Rock<br/>Songs that make
me think of Phil
Rammstein<br/>Rave<br/>Rock<br/>Songs that make me
think of Phil
Rammstein<br/>Rave<br/>Rock<br/>Songs that make me
think of Phil
</div>
</a>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="list-item">
<div class="header"><h2> </h2></div>
<div class="content">
<span class="delete_song"><input type="button" value=""
onclick="remove_song" /></span>
<span class="item-title">Item Title</span>
<div class="tags">
<div id="song_53990105_inplaylist">
<div class="song_inplaylist">
<a href="#">
In playlist
<div>
Rammstein<br/>Rave<br/>Rock<br/>Songs
that make me think of
Phil
Rammstein<br/>Rave<br/>Rock<br/>Songs that make
me think of Phil
Rammstein<br/>Rave<br/>Rock<br/>Songs that make
me think of Phil
Rammstein<br/>Rave<br/>Rock<br/>Songs that make
me think of Phil
Rammstein<br/>Rave<br/>Rock<br/>Songs that make me
think of Phil
Rammstein<br/>Rave<br/>Rock<br/>Songs that make me
think of Phil
</div>
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
Thank you in advance!!
- Sincerely,
Sharon
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
