Hi,
Inside a div I have a horizontal navigation bar and some images, which are links, below the bar. I am unable to control the spacing between the images and the bar, i.e. I wish to move the images up, closer to the bottom of the bar, but am unable to do so. I have tried everything I could think of, margins, padding, etc. but nothing seems to be working. I wonder if anyone has any solutions? All help would be greatly appreciated.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <style type="text/css">
    body 
    { text-align: center;
      min-width: 1044px;
      margin: 0px;
      padding: 0px;
      font-family: arial;
    }
    #wrapper 
    { position: relative;
      text-align: left;
      width: 1044px;
      height: 100%;
      margin: 0px auto;
    }
    #top-header-block
    { width: 1010px;
      height: 170px;
      background-color: cyan;
    }
    ul#list-nav
    { list-style:none;
      clear: both;
      margin-top:12px;
      padding:0;
      width:1104px;
      float:left;
    }
    ul#list-nav li
    { display:inline
    }
    ul#list-nav li a
    { text-decoration:none;
      padding:5px 0px;
      width:100px;
      height: 3.20em;
      line-height: 3.20em;
      background: url(blue_square_A.jpg) #0d2474 bottom left repeat-x;
      color:#FFFFFF;
      float:left;
      text-align:center;
      border-left:1px solid #fff;
      font-size: 12px;
      font-weight: bold;
    }
    ul#list-nav li a.noBorder
    { border-left: 0;
    }
    ul#list-nav li a.widthA
    { width:90px;
    }
    ul#list-nav li a.widthB
    { width:72px;
    }
    ul#list-nav li a.widthC
    { width: 80px;
      background: #990000;
    }
    ul#list-nav li a.widthD
    { padding: 0px;
      background: #FF8C00;
      width: 80px;
      height: 48px;
    }
    ul#list-nav li a img.noBorder
    { border-style: none;
    }
    ul#list-nav li a:hover
    { text-decoration:none;
      background-color: #3333CC;
      color:#FFFFFF;
    }
    img.delivery
    { margin-left: 15px;
      float: left;
    }
    img.lorry
    { float: right;
      margin-right: 25px;
    }
  </style>
</head>
 
<body>
  <div id="wrapper"> 
    <div id="top-header-block">
    <ul id="list-nav">
      <li><a class="noBorder"
             href="#">****** ******</a></li>
      <li><a href="#">*** *******</a></li>
      <li><a href="#">*** ** *** **</a></li>
      <li><a href="#">***********</a></li>
      <li><a class="widthA"
             href="#">*********</a></li>
      <li><a href="#">*********</a></li>
      <li><a href="#">*************</a></li>
      <li><a class="widthB"
             href="#">****</a></li>
      <li><a class="widthC"
             href="#"
              onMouseOver="this.style.background='#DC143C'" 
               onMouseOut="this.style.background='#990000'">******</a></li>
      <li><a class="widthB"
             href="#">****</a></li>
      <li><a class="widthD"
             href="#"
              onMouseOver="this.style.background='#FF8C00'">
               <img class="noBorder" src=""
               alt="" width="73" height="44" /></a></li>
    </ul>
    <a href="#">
      <img class="delivery" src="" alt="" width="122" height="25"/>
    </a>
    <a href="#">
      <img class="delivery" src="" alt="" width="90" height="25"/>
    </a>
    <a href="#">
      <img class="delivery" src="" alt="" width="85" height="25"/>
    </a>
    <a href="#">
      <img class="delivery lorry" src="" alt="" width="288" height="25"/>
    </a>
  </div>
</div>

</body>

</html>