Text-indent problem with multiple <div> in IE6

[Theberge43]

Hi,

I'm creating a theme for my forum right now.
To give some place to my icon, I use the text-indent attributes.

Here is the CSS :


.thead {
background: url(images/lp3e/bg_cat.gif) bottom left repeat-x;
text-indent: 26px;
}

.cat_icon {
background: url(images/lp3e/cat_icon.gif) 4px 50% no-repeat;
padding: 5px 0 7px 0;
}

.expcolimage {
float: right;
width: auto;
vertical-align: middle;
margin-top: 3px;
}

.smalltext {
font-size: 11px;
}

Here is the HTML :

<div class="thead">
<div class="cat_icon">
<div class="expcolimage">
<img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" />
</div>
<strong>
<a href="{$forum_url}">{$forum['name']}</a>
</strong>
<br />
<div class="smalltext">
{$forum['description']}
</div>
</div>
</div>

It works well in FF, IE7 & IE8:
http://i78.photobucket.com/albums/j96/Theberge43/ok.png

But not in IE6:
http://i78.photobucket.com/albums/j96/Theberge43/worng.png

The weird thing is that the text-indent works in IE6 normally, I have it somewhere else inside just one <div> and it works. It's probably my divisions that are wrong.

[monicasaha]

i think if u make the image display:block giving a little bit of right-margin.. with float:left... there will be no requirement of extra div.

[fg123]

try using
left:'the width of the image +2 '; on the text.

[Theberge43]

try using
left:'the width of the image +2 '; on the text.

Thanks, that's perfect.

[fg123]

Thanks, that's perfect.

UR welcome! ;)