A small unwanted space in my header

Get Started
1

Here is my test page:

Aromatherapy & Essential Oil Testimonials

There is a small gap between the top logo and the CSS menu. When I remove the code for the logo, the CSS menu is positioned at the very top with no gap. So something is wrong with my image or code. Any help would be greatly appreciated.


<center><img src="http://www.sitepoint.com/forums/images/newLogo.png" alt="essential oils" width="770" height="111"></center>


<table align="center" width="770" border="1" cellpadding="0" cellspacing="0">

<tr>

<td>
<div class="menu">

<?php


print ("<ul>");

print("<li><a href='index.php'>Home</a></li>");


if ($loginID) {

print("<li><a href='index.php'>My Stuff</a>");
print ("<ul>");
print("<li><a href='myInfo.php?action=view'>My Account Settings</a></li>");
print("<li><a href='aromatherapy/7/$loginID'>My Testimonials</a></li>");
print("<li><a href='myReports.php?action=view&type=1'>My Searches</a></li>");
print("<li><a href='myReports.php?action=view&type=2'>My Favorites</a></li>");
print("<li><a href='myReports.php?action=view&type=3'>My Referrals</a></li>");
print("<li><a href='myReports.php?action=view&type=4'>My Leads</a></li>");
print ("</ul>");
print ("</li>");
}

print("<li><a href='index.php'>Options</a>");
print ("<ul>");
print("<li><a href='index.php'>Save as a favorite</a></li>");
print("<li><a href='index.php'>Refer a friend to this testimonial</a></li>");
print("<li><a href='index.php'>View other testimonials by Robert</a></li>");
print("<li><a href='index.php'>Ask Robert a question</a></li>");
print("<li><a href='index.php'>Printer friendly version</a></li>");
print ("</ul>");
print ("</li>");


print("<li><a href='index.php'>Search</a></li>");

print("<li><a href='add.php'>Add</a></li>");

print("<li><a href='contact.php'>Contact</a></li>");

print("<li><a href='/links/index.php'>Resources</a></li>");


print ("</ul>");


?>

</div>

</td>

</tr>

</table>
2

You can remove that space by adding this to your CSS:

img {vertical-align: bottom}

Images are inline elements, meaning that they will sit beside other elements like paragraphs by default. And by default, images align themselves with the baseline of the text, leaving room for the text’s descenders. So if you don’t want that space at the bottom, you have to specify vertical-align: bottom.

3

Thanks for the tip. I added valign=“bottom” to my html and that seems to have fixed it in Safari. However, it didn’t do the trick in IE 8.0. Do you know why?

Thanks!

4

valign is quite different, and is outdated and shouldn’t be used any more. Is there any reason why you didn’t use what I suggested? It works in all browsers and is the best way to do it. :wink:

5

I didn’t do it at first because I’ve not learned much CSS. But now I have gone in there and its working perfectly. Why do they keep eliminating html tag attributes like valign ? What others do I need to get rid of?

Thanks

6

The point of “markup” (like HTML) is to give structure to a page. It’s not meant to be for visual styling and layout. Those things were added as a fallback until there was proper support for CSS, which is a much better tool for handling visual styles and layout.

Your site seems to be throwing PHP errors at the moment.