List of Links

[Peter Horlock]

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;cle ar:right;}

The html part:
<div class="leftpart ">My Links:</div>
<div class="rightpar t ">Link 1 <a href="javascrip t:showMore;"<im g
title="show/hide more links"></a>
<!-- This in reality is all dynamic -->
<div id="Nr1" style="visibili ty:invisible;>
<div class="leftpart ">&nbsp;</div>
<div class="rightpar t "><a href="mylink1.h tml">My Link1</a></div>
<div class="leftpart ">&nbsp;</div>
<div class="rightpar t "><a href="mylink2.h tml">My Link2</a></div>
<div class="leftpart ">&nbsp;</div>
<div class="rightpar t "><a href="mylink3.h tml">My Link3</a></
div>
</div>

Now when someone clicks on the link I am setting the div with id "Nr1"
to visibility:visi ble, 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%;fl oat:left;}
div.rightpart{f loat:left;clear :right;}
div.link{clear: left;}

html part:
<div class="leftpart ">My Links:</div>
<div class="rightpar t">
<div class="link">Li nk 1 <a href="javascrip t:showMore;"<im g
title="show/hide more links"></a></div>

<div id="Nr1" style="visibili ty:invisible;>
<!-- This in reality is all dynamic -->
<div class="link">&n bsp;</div>
<div class="link"><a href="mylink1.h tml">My Link1</a></div>
<div class="link">&n bsp;</div>
<div class="link"><a href="mylink2.h tml">My Link2</a></div>
<div class="link">&n bsp;</div>
<div class="link"><a href="mylink3.h tml">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