On Apr 4, 2006, at 2:58 PM, Daniel Nitsche wrote:
I had a quick go, and this is what I came up with (assuming a
100x100px
image):
<dl>
<dt>Product title</dt>
<dd>Product description - this can be as long as you like</dd>
<dd><img src="product-image.jpg" alt="product title"></dd>
</dl>
<style>
dl { position: relative; }
dl dt { margin-left: 110px; font-weight: bold; }
dl dd { margin-left: 110px; }
dl dd img { position: absolute; top: 0; left: 0; width: 100px;
height:
100px; }
</style>
As others have said, I like this better than putting the image in
the dt.
This works in Firefox (Linux and Windows) and Konqueror, but breaks
in IE 6
(it seems to be ignoring the absolute positioning of the image).
Perhaps
someone could expand on this to make it work in IE?
As a rule of thumb, whenever you use position:relative in IE win, you
should give the element 'layout' [1].
* html dl { position: relative; zoom:1 /* or other layout triggers */}
[1] <http://www.satzansatz.de/cssd/onhavinglayout.html>
Philippe
---
Philippe Wittenbergh
<http://emps.l-c-n.com>
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
