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:


But not in IE6:


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!