making text hidden on an element where the parent element has.

....'text align' defined

[PublicSphere]

I've experienced this problem in the past and just avoided it. I've never been able to find a solution on the web because it's hard to word the problem I find.

Anyway, in my #sidebar I have aligned the 'ul ul li' as 'text align: right'.

The problem is, I want to define one of my 'ul ul li's as an image rollover, where the text is indented out of the screen and the overflow is hidden.

The problem is, when you have the 'text-align' defined in the parent element it seems to overide the 'overflow: hidden' and/or the 'text-indent', so the text that I want hidden shows up.

I'd imagine there is a simple fix to this problem but I can't work it out.

Has anyone come across this and fixed it before?

[Old_Honky]

have you tried giving a class to the li that you want the rollover on?

[PublicSphere]

yeah, I have individual ids on the lis, eg

<div id="sidebar">
<ul>
<li>
<ul>
<li id="rollover"><a href="#">link</a></li>
</ul>
</li>
</ul>
</div>

where #sidebar ul ul li has the text-align: right and #rollover has the text-indent: -5000px, etc.

[PublicSphere]

I figured it out in the end. It was pretty simple and I feel pretty stupid now.

The #sidebar ul ul li had the property 'text align: right'.

That conflicted with the rollover style, which had 'text-indent: -5000px;', where '-' is obviously left.

So I just added 'text-align: left' to the rollover element style and that fixed the problem.

I'd like to give thanks to FireBug.

[edited by: PublicSphere at 3:28 pm (utc) on Aug. 28, 2007]