Problem styling definition list

[matt_randle]

Hi,

I have a problem styling a definition list.

If you look at

http://68.178.211.60/MattRandle/Guid...arginalsNZ.htm

you will see the effect I am trying to achieve. If, however, the
flower image is smaller than the description text that appears to its
right, I cannot get the next definition term to clear the image.
Scroll down the page to 'Saururus' and 'Scripus' and you will see what
I mean.

Snippet of HTML is,

<dl>
<dt>Pontedeia</dt>
<dt class="image"><img src="Guides/Plants/pontederia.jpg"></dt>
<dd>Text goes here</dd>
</dl>

The CSS is,

..pics dt {
margin: 0 0 10 0;
}

..pics dt.image {
width :200;
text-align: right;
float: left;
}

..pics dd {
padding : 0;
margin: -5 0 0 220;
}

A cannot clear:left on the .pics dt because the navigation column on
the main page is floated left.

Any advice appreciated.

Thanks in advance,

Matt

[Jim Moe]

ma*********@yahoo.com wrote:

I have a problem styling a definition list.
If you look at
http://68.178.211.60/MattRandle/Guid...arginalsNZ.htm

you will see the effect I am trying to achieve. If, however, the
flower image is smaller than the description text that appears to its
right, I cannot get the next definition term to clear the image.
Scroll down the page to 'Saururus' and 'Scripus' and you will see what
I mean.

Mozilla/SM v1.0.0.
Well, no, I don't see what you mean. It all looks the same. I see the
resulting layout but how is that different from what you envision?
What does "clear the image" mean?
What browser(s) have you tried?

Correct your validation errors.
Use HTML 4.01 Strict DTD, not transitional. (And the DTD you do specify
is incomplete.)

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[matt_randle]

Mozilla/SM v1.0.0.
Well, no, I don't see what you mean. It all looks the same. I see the
resulting layout but how is that different from what you envision?
What does "clear the image" mean?
What browser(s) have you tried?

Correct your validation errors.
Use HTML 4.01 Strict DTD, not transitional. (And the DTD you do specify
is incomplete.)

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

I have tried it in IE6 and Firefox. Same effect.

By "Clear the image" I mean that the heading for the next flower should
start on the next row, and not to the right of the previous image.
Maybe you have large text size set so you are not getting the same
effect ? As I said in my original post, the problem only happens when
the text to the right of the image is smaller than the image.

Matt

[matt_randle]

Just to be clear, the text for 'Saururus' is smaller than the
associated image so that 'Scripus' doesn't start on the next line
(because the image is floated left).

[matt_randle]

Thanks for the DOCTYPE advice. I am new to web design. I found a good
article on A List Apart that explains the issues.

[Jim Moe]

ma*********@yahoo.com wrote:

What does "clear the image" mean?

By "Clear the image" I mean that the heading for the next flower should
start on the next row, and not to the right of the previous image.
Maybe you have large text size set so you are not getting the same
effect ? As I said in my original post, the problem only happens when
the text to the right of the image is smaller than the image.

Yes, I have a minimum font size set so I can force too-small fonts to a
size I can read.
Use a <div> to wrap the <dl>. Then you can add clear:both to the <dt>.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Jim Moe]

Jim Moe wrote:

Use a <div> to wrap the <dl>. Then you can add clear:both to the <dt>.

Bzzt! Wrong! That does not work.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[bernard.molloy]

Jim Moe wrote:

Jim Moe wrote:

Use a <div> to wrap the <dl>. Then you can add clear:both to the <dt>.

Bzzt! Wrong! That does not work.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

The problem doesn't appear in Opera only in IE
THere is a list of IE bugs around
I'll look for it

Bernard

[bernard.molloy]

http://www.positioniseverything.net/

Herre is the list good luck

B

[Toby Inkster]

matt_randle wrote:

<dl>
<dt>Pontedeia</dt>
<dt class="image"><img src="Guides/Plants/pontederia.jpg"></dt>
<dd>Text goes here</dd>
</dl>

This doesn't answer your question, but I would have thought that the image
would be better in a DD rather than a DT, as it appears to be part of the
definition.

What is a Pontedia? It's this: [image].

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

[matt_randle]

I found the solution in this article

http://www.positioniseverything.net/easyclearing.html

in the section 'A Word of Warning'.

The parent container (in this case a <dl>) needs to be floated right.

Thanks for your replies.

Matt