Hi,

Using css (that should be working in Firefox 2,3 and Internet Explorer
6,7 at least),
I would like to create the following:

My Links: Link1 +show more links
<!--- This is shown when someone clicks on a plus image next to Link1
Link2(lined up with Link1)
Link3 (lined up with Link2)
-->

Currently I got the following:
The css part:
div.leftpart {width:40px;}
div.rightpart {float:left;clear:right;}

The html part:
<div class="leftpart ">My Links:</div>
<div class="rightpart ">Link 1 <a href="javascript:showMore;"<img
title="show/hide more links"></a>
<!-- This in reality is all dynamic -->
<div id="Nr1" style="visibility:invisible;>
<div class="leftpart">&nbsp;</div>
<div class="rightpart "><a href="mylink1.html">My Link1</a></div>
<div class="leftpart">&nbsp;</div>
<div class="rightpart "><a href="mylink2.html">My Link2</a></div>
<div class="leftpart">&nbsp;</div>
<div class="rightpart "><a href="mylink3.html">My Link3</a></
div>
</div>

Now when someone clicks on the link I am setting the div with id "Nr1"
to visibility:visible, and all additional links
will be shown.

However, I got problems with the style in Firefox / IE.

In Firefox, it looks like this:

My Links:
Link1 +show more links
<!-- one empty line --->
Link2(not lined up with Link1)
<!-- one empty line --->
Link3 (not lined up with Link2)

In Internet Explorer, it looks like this:
My Links:
Link1 +show more links
Link2 (not lined up with Link1)
Link3 (not lined up with Link2)

I also tried something else:
css part:
div.leftpart {height:100%;float:left;}
div.rightpart{float:left;clear:right;}
div.link{clear:left;}

html part:
<div class="leftpart ">My Links:</div>
<div class="rightpart">
<div class="link">Link 1 <a href="javascript:showMore;"<img
title="show/hide more links"></a></div>

<div id="Nr1" style="visibility:invisible;>
<!-- This in reality is all dynamic -->
<div class="link">&nbsp;</div>
<div class="link"><a href="mylink1.html">My Link1</a></div>
<div class="link">&nbsp;</div>
<div class="link"><a href="mylink2.html">My Link2</a></div>
<div class="link">&nbsp;</div>
<div class="link"><a href="mylink3.html">My Link3</a></div>
</div>
</div>

This way, all links were perfectly lined up, however the links again
are surrounded by a box, and the last links
were hanging out of this box - the links are all floating left from
the "leftpart" div, and so the surrounding box doesn't know that all
these links should be part of the box too - I guess.

Any idea how to properly get this done?

Thanks in advance,

Peter