dt in a definition list & unexpected indents in IE

[billabong]

Hi all,

I have developed a definition list (dl) to list a series of options on the right side of my web pages using CSS. I decided to make my list more graphically appealing and started to develop a particular background image for all dt items. Since applying a background image to my dt items, I am have started to experience some visual problems.

Pages viewed in Firefox and ie5 are fine. But ie6 & ie5.5 add some funny indents. For example:

Imagine if there are 4 dt items with their corresponsing content. In ie6 & ie5.5 the 1st dt will display correctly. The 2nd dt is displayed but is indented 1px in, (so -1). The 3rd dt is displayed but is indented 2px in, (so -2). The 4th dt is displayed but is indented 3px in, (so -3).

From what I understand so far this appears to be an issue with the left margin. What I would like to know is if there is a way of resolving these visual discrepancies in ie 6 and ie 5.5?

Many thanks

[SuzyUK]

Hi billabong - Welcome to WebmasterWorld

are you using borders/bottom padding too?

it sounds like it might be the Creeping Text Bug [positioniseverything.net]..

Suzy

[billabong]

hi,

thanks for the welcome and prompt response SuzyUK.

To answer your question yes I am using border and padding-bottom but having read the document on the link you provided they might not be applied in the right areas.

Thanks a lot for the link. I am going to check it through thoroughly. I will post an update once I have resolved the problem.

Thanks again

[billabong]

I seem to have resolved the problem by applying:

border-bottom: 1px solid #CCCCCC;

to my corresponding dd class. The statement was always there but it was just set to 0px. Anyway thanks again for your help.

-b