Gap below <ul> in IE

[rollOrDie]

I have a list contained by two div elements, aswell as a div after the list. In IE there appears to be a gap after the list which I cant get rid of!

 

If I change the margin, it does increase / decrease however there is always at least about 10px extra.

 

Here is my code:

 

.navOption {
    border:#000 solid 1px;
    list-style-type:none;
    margin-bottom:10px;
    float:right;
    width:100%;}
    
.navOption li {
    display:inline;}

.navOption a {
    padding:4px;
    margin-left:2px;
    border:#000 solid 1px;
    float:right;}
    
.box, .boxHide {
    border:#CCC solid 1px;
    background-image:url(../image/bgStripeFaint.gif);
    margin-bottom:1.5em;
    clear:both;
    padding:1em}

#content, #contentWide {
    padding:1px 15px;
    width:320px;
    background:url(../image/bgCropTop.gif) no-repeat;}

#contentBg {
    width:350px;
    background:url(../image/bgCropBtm.gif) no-repeat 0 100%;}

#contentBgWide {
    width:720px;
    background:url(../image/bgCropWideBtm.gif) no-repeat 0 100%;}
    
#contentWide {
    width:690px;
    background:url(../image/bgCropWideTop.gif) no-repeat;}

 

 

          <div id="contentBgWide">
          <div id="contentWide">
            <h1>Process Completed</h1>
                <ul class="navOption">
                  <li><a href="#">link</a></li>
                  <li><a href="#">link</a></li>
                  <li><a href="#">link</a></li>
                  <li><a href="#">link</a></li>
                </ul>
            <div class="box">
                  content of div
            </div>
            <br class="clear" /></div>
      </div>

 

Any ideas on how to fix it are much appreciated!

[haku]

You have set a margin of 1em on all four sides of the box div. This will give you a 1 em gap between the ul and the box div.

[rollOrDie]

The box div only has a bottom margin, its the padding that has 1em all round:

 

.box, .boxHide {
    border:#CCC solid 1px;
    background-image:url(../image/bgStripeFaint.gif);
    margin-bottom:1.5em;
    clear:both;
    padding:1em}

[haku]

It may be a browser default. Try setting the bottom margin and/or padding of the ul to zero.