Position:absolute replacing div

HTML & CSS
1

When hovering over truncated text, I display the full version of the text. The problem with this is that the div is then absolute, and therefore doesn’t take up any space, ultimately screwing with the other results.

Example:
http://is.gd/SmpXnI

To see my problem, hover over #7, and #8 disappears.

How would I fix this so that the other 9 results when hovering in each list are unaffected?

2

jetnine,

Give this method a look. The behavior is similar to your demo.

I left some outlines in the CSS so you can see how the boxes are laid out.

Hope it helps.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>testvast</title>
    <style type="text/css">
.homebox {             /* 292px total width */
    display:table;
    table-layout:fixed;
    width:272px;
    border:1px solid black;
    background:#383838;
    padding:0 6px 4px 12px;
    margin-left:8px;
    margin-top:6px;
}
.homebox ul {
/*    outline:1px solid blue;  /* TEST OUTLINE */
    list-style:none;
    display:table-cell;
    vertical-align:top;
    width:131px;
    padding:0;
    margin:0;
}
.homebox li {
/*    outline:1px solid gray;  /* TEST OUTLINE */
    background:#383838;
    text-align:left;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    padding:3px 0;
}
.homebox li:hover {
    overflow:visible;
    width:auto;
    position:relative;    /* text in first column will overlay text in second column */
}
.homebox span {
/*    outline:1px solid red;  /* TEST OUTLINE */
    display:inline-block;
    width:1.6em;
    font-size:10px;
    text-align:right;
    padding-right:6px;
}
.homebox a {
/*    outline:1px solid magenta;  /* TEST OUTLINE */
    font-family:Arial,Verdana,Sans-serif,serif;
    font-size:11px;
    font-weight:700;
    text-decoration:none;
    color:#bdbdbd;
    background:#383838;
    padding-right:2px;
}

    </style>
</head>
<body>
<div class="homebox">
    <ul>
        <li><span> 1.</span><a href="/?search=Grand+Theft+Auto+V&amp;s=0&amp;n=0">Grand Theft Auto V</a></li>
        <li><span> 2.</span><a href="/?search=Outlast&amp;s=0&amp;n=0">Outlast</a></li>
        <li><span> 3.</span><a href="/?search=Kingdom+Hearts&amp;s=0&amp;n=0">Kingdom Hearts</a></li>
        <li><span> 4.</span><a href="/?search=Tomb+Raider&amp;s=0&amp;n=0">Tomb Raider</a></li>
        <li><span> 5.</span><a href="/?search=Skyrim&amp;s=0&amp;n=0">Skyrim</a></li>
        <li><span> 6.</span><a href="/?search=Grand+Theft+Auto&amp;s=0&amp;n=0">Grand Theft Auto</a></li>
        <li><span> 7.</span><a href="/?search=State+Of+Decay&amp;s=0&amp;n=0">State Of Decay</a></li>
        <li><span> 8.</span><a href="/?search=Minecraft&amp;s=0&amp;n=0">Minecraft</a></li>
        <li><span> 9.</span><a href="/?search=Amnesia&amp;s=0&amp;n=0">Amnesia</a></li>
        <li><span>10.</span><a href="/?search=Rayman+Legends&amp;s=0&amp;n=0">Rayman Legends</a></li>
    </ul>
    <ul>
        <li><span> 1.</span><a href="/?p=req1">Skies Of Arcadia Legends</a></li>
        <li><span> 2.</span><a href="/?p=req1">Shin Megami Tensei If</a></li>
        <li><span> 3.</span><a href="/?p=req1">Blue Stinger</a></li>
        <li><span> 4.</span><a href="/?p=req1">Resident Evil Code Veronica X</a></li>
        <li><span> 5.</span><a href="/?p=req1">Medarot 5</a></li>
        <li><span> 6.</span><a href="/?p=req1">Super Robot Taisen Og Saga Endless Frontier</a></li>
        <li><span> 7.</span><a href="/?p=req1">Lsd Kitty Force</a></li>
        <li><span> 8.</span><a href="/?p=req1">The Legend Of Zelda: Oracle Of Ages</a></li>
        <li><span> 9.</span><a href="/?p=req1">The Adventures Of Batman And Robin</a></li>
        <li><span>10.</span><a href="/?p=req1">Divekick</a></li>
    </ul>
</div>
</body>
</html>
3

Wow. Your code is so pretty.

The bit about “text in first column will overlay text in second column” is not true, but this is fine, as it operates how I wanted it to (breaking out of the div in one line).

Thanks for your help!

4

Yes, it actually does work. :slight_smile: If you will copy the code I posted to a standalone page, then swap the columns (swap the <ul>s), you should be able to tell that the text from the left column overlays that in the right column. You may need to change the padding in the anchor from {padding:1px} to something like {padding-right:6px} or more to make the end of the text from the left column more obvious. It doesn’t overlay the full width of the right column unless the text in the left column happens to be long enough to do that. After verifying that the overlay is really happening, comment out {position:relative} and :hover again and you will see that the text from the left column slides under the text in the right column.

If it does not work on your production page, then perhaps there is other code that is overriding the effect of position:relative.

Glad it’s helpful. Thanks for the feedback.

Cheers!