Forum Moderators: not2easy
sorry to bug you again with these silly divs.
In a previous thread I finally got my display:none / block issues solved.
The following is the problem:
I have floated:left boxes, in which I display an image, and a a:hover tooltip box. In FF it works fine. In IE6 however, the expanding div affects the flow & design of the containing box, which becomes all bloated. I tried using z-index to put the expanding div above the rest of the page, but that doesn't seem to gab hold.
Some code:
<div class="browsefloat">
<div class="browsefloati">
<img src="image.jpg"" width="120">
</div>
<div class="specs">
<a href="LINK">Visit site</a><br />
<a href="">Information
<span>
THE EXPANDING INFO
</span>
</a>
</div>
</div>
Some CSS:
div.browsefloat {
margin: 3px;
border: 1px solid #A0ACC0;
float: left;
text-align: center;
height: 160px;
z-index: 2;
}
.browsefloat a span {
display: none;
}
.browsefloat a:hover{
padding: 0px;
}
.browsefloat a:hover span {
display: block;
text-align: left;
width: 250px;
display: block;
background-color: #ffffff;
border: 1px solid #A0ACC0;
position: relative;
left: -150px;
top: -200px;
padding:10px;
z-index: 3;
}
div.browsefloati{
width: 120px;
height: 120px;
overflow: hidden;
}
.browsefloat a:hover img {
border: 1px solid black;
}
.specs {
text-align: center;
font-weight: normal;
width: 120px;
margin: 0 3px 3px 3px;
}
html spec: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" encoding="UTF-8">
[edited by: SuzyUK at 8:34 pm (utc) on Mar. 17, 2008]
[edit reason] fixed smiley in code [/edit]
position:relativeMaybe you should use
position:relativeposition:absolute
Unfortunately, I am using a fully fluid design for my site. Except for the width of the left hand menu, all is pretty much defined in em;s, percentage and floating divs. I do not want to fix anything in a specific location. This will be an information list for an onject in a page full of these boxes. So fixing the location really doesn't cut it.
The expanded span indeed overlaps with other elements, as I want it to (It overlaps with the side of the box it is generated from).
Any way to do the css in a way to have the 'popup' appear relative to the generating element, without it distorting the page layout?
J.
If you make the parent relatively positioned, but without changing its left/right/top/bottom values, it will stay put. But, it also has the fortunate effect that absolutely positioned child elements are now instead positioned in reference to this element instead of the viewport as a whole ;)
That worked like a charm! Silly.. Didn't realize that the position absolute is in relation to the last positioned parent, instead of the viewport.
Excellent solution!
J.
