I don't have a live example of this, so I'll try to keep it simple and
general. I run into Netscape 7 bugs quite often, as it has serious
issues with background positioning and also the following scenario:
I have a list of products, each with an image. They are in separate
<dl>s, given a width, and floated, so they wrap into a matrix of
products. Each dl has a <dt> which is a product name, and <dd>s which
are data about the product:
-------
| img | (dd)
-------
dt- product name
dd - info
dd - info
<dl>
<dt>Product Name</dt>
<dd class="image"><img src="image.jpg" alt="text"></dd>
<dd>Ages: 1-3 years</dd>
<dd>Price: $5.00</dd>
</dl>
<dl>
...
</dl>
etc.
What I am doing is putting padding on top of the dl, and taking the dd
class="image" out, positioning it absolutely at the top above the dt.
The css looks like this:
dl {
float: left;
width: 110px;
*width: 116px;
padding-top: 115px;
text-align: center;
border: 3px solid #000;
background: #fc0;
color: #000;
font-weight: bold;
font-size: .8em;
margin: 0 1em 2em 1em;
position: relative;
height: 8em;
*height: 21em; /*due to padding/box model*/
}
dl:hover {
background: #c00;
color: #fff;
}
dl:hover a {
color: #fff;
}
dd.product-image {
position: absolute;
top: 0;
left: 0;
width: 110px;
}
dd.product-image img {
border-bottom: 3px solid #000;
}
Short of a few IE glitches, it's rendering engine is up to the task,
as is Netscape 8 and any relatively new version of Firefox. However,
there is a known bug in Netscape 7 and old Mozilla builds that
misinterprets the parent element when there is an absolutely
positioned child inside a relatively positioned parent which is
floated, AND when the absolutely positioned child is given an offset
(top: 0, left: 0). It skips a generation and positions all the images
at the top and left of the grandparent div, which means all the images
stack on the upper left corner of the containing box. Not a pretty
sight.
Now, I know this is a known bug, and I know (ok, I think) I'm doing
this the RIGHT way, but my company still technically supports the 0.5%
of visitors using Netscape 7. As far as I know, there's not a way to
feed styles specifically to Netscape 7, but if there is, I'd like to
know. If not, is there another way I can do this which keeps the
integrity of the definition list (with the term being the product name
and everything else being <dd>s) that still allows me to position the
image above the product name?
Thanks!
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
