I have a ul that I have styled using CSS, after A LOT of messing around it suddenly seems to be working how I intended.

But when I insert it into a DIV it loses its margins around the <a> elements! Can anyone figure out why??

HTML:

    <div class="fifty">
      <ul class="connect">
        <li><a href="#">Content</a></li>
        <li><a href="#">asdfasdf</a></li>
        <li><a href="#">asd</a></li>
        <li><a href="#">fasdf</a></li>
        <li><a href="#">asdfasdf</a></li>
      </ul>
    </div>

CSS:

ul.connect {
margin:0;
padding:0;
list-style-type:none;
}

ul.connect li {
display:inline
}

ul.connect a {
width:100%;
display:block;
background-color:#323232;
margin-bottom:1px;
}

div.fifty {
width:50%;
display:inline;
float:left;
background-color:#323232;
}

Thanks to those who can help.

What margins ? You've only specified a 1px bottom margin on the <a> and if you put a border around them you'll see the 1px margin is there.

hmmm are you sure? Heres how it looks for me in FF2. On the left is the list inside the div, and on the right is the list outside of the div. It looks pretty much the same in IE6 aswell:

http://inspindesign.clawz.com/stuff/Untitled-1.jpg

false alarm, Ive just realised i had the background of the div set the same colour as the <a> elements! arghhrghgh!

oh well, it only took me 14 hours to realise it.

You're still about 36-60 hours faster than most people that even realize it in the first place, and you're still way ahead of the 95% of people who wouldn't have figured that out.

At least you figured it out.
I did want to say that outside the div your list has no width , inside it's limited to the div's 50% width.

ahhhh so im not the only one who gets into these situations