How to get rid of white space between <a hrefs> and <img>

Question

I have a bunch of hrefs that have images inside to make a menu on the upper left corner of the page. After the menu i have an image right next to it that expands to the end of the page. However that image right now is dropped below the menu area.

How do I get rid of this white space?

.MenuArea
{
     position:relative;
     width:225px;
     height:300px;
     background-color:#666666;
     text-align:center;
     display:inline-block;
     padding:0;
     margin:0;
}
.MenuAreaImageSmall
{
 position:relative;
 left:225px;
 height:300px;
 text-align:center;
 display:block;
 padding:0;
 margin:0;
}
.MenuLink
{
 position:relative;
 top:15px;
 width:225px;
 padding:0;
 display:inline-block;
 border:0 solid #ffffff;
}
.Href
{
 margin:0;
 padding:0;
}

     $cpage = $page."ImgArea";
     $query = "Select * FROM ContentTab WHERE InUse='Y' && PageAssignment='".$cpage."' && ContentType='Image' ORDER BY ContentOrder ASC";
     $result = mysql_query($query);
     $num = mysql_numrows($result);

     $cpage1 = $page."Link";
     $query = "Select * FROM ContentTab WHERE InUse='Y' && PageAssignment LIKE '".$cpage1."' && ContentType='Image' ORDER BY ContentOrder ASC";
     $result1 = mysql_query($query);
     $num1 = mysql_numrows($result1);

     $n = 0;
     $i = 0;
     while($n < $num)
     {
      $image = mysql_result($result,$n,"Content");

      if($cpage == "SolutionImgArea")
      {
       if($n == 0)
       {
        $output = "<div id=\"MenuAreaBox\" class=\"MenuArea\"/>\n";

        while($i < $num1)
        {
         $links = mysql_result($result1,$i,"PageAssignment");

         if($links == $cpage1)
         {
          $linkimg = mysql_result($result1,$i,"Content");
          $temp = $linkimg;
          list($linkimg2, $format) = split('[.]', $temp);
          $temp = $linkimg2;
          $linkimg2 .= "_roll.".$format;
          list($trash, $trash, $filename) = split('[/]', $temp);

          $output .= "<A href=\"test.php?page=Solution\" onmouseover=\"roll_over('".$filename."', '".$linkimg2."')\" onmouseout=\"roll_over('".$filename."', '".$linkimg."')\" class=\"Href\">";
          $output .= "<img name=\"".$filename."\" src=\"".$linkimg."\" alt=\"\" class=\"MenuLink\"/>";
          $output .= "</A>";
         }
         $i++;
        }
       }
       if(($n+1) == $num)
       {
        //$output .= "     </div>\n";
        $output .= "<img src=\"".$image."\" class=\"MenuAreaImageSmall\" alt=\"\"/>";
       }

      }
      else
      {
       $output = "<img src=\"".$image."\" class=\"MenuAreaImageBig\" alt=\"\"/>";
      }
      $n++;
     }
     echo $output;?>

Answer 1

link to before: test1.php

link to after: http://www.gramercyit.com/test.php

Solved it by changing my position to absolute and setting top to 0px; Sorry to have wasted you guys time, i just didn't think that it would work that way heh.

Answer 2

Did you try display:block, float:left for the img and a?

Answer 3

Do not listen to anyone who says about removing white spaces - it will help, but only for some time, until your content will be modified by someone else who does not know the white space trick. :)

When you are assigning float: left to the element it is automatically converted to block-level element.

Therefore, if you want to get rid of the problem using CSS only, use display:block for the image.

If you are using text with images (which is not the case specified here), then use float: left or float:right.