So I decided to start work on a new personal website, just for the fun of it! First things first, design and setup the menu.
I've been busy in photoshop for a while and have got this together. In Firefox & Safari it looks perfect, but in IE it shows a small gap between the main header image and the menu buttons (see the screenshot bellow, firebox at the top, IE at the bottom).
Here is the code (minus the javascript for the rollovers, no need for that for this purpose)
Does anyone know of this IE "bug", and how it can be fixed? It's a pain in the arse, but it must look right, sadly most of the world does use IE 
edit: Interestingly, this doesn't seem to effect IE 5.2 for OS X, only the Windows version (I'm running IE 6)????
I've been busy in photoshop for a while and have got this together. In Firefox & Safari it looks perfect, but in IE it shows a small gap between the main header image and the menu buttons (see the screenshot bellow, firebox at the top, IE at the bottom).
Here is the code (minus the javascript for the rollovers, no need for that for this purpose)
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>eDesignUK.net | Jamie Elliott | Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('Graphics/Header/menu_4_home_on.jpg','Graphics/Header/menu_6_blog_on.jpg','Graphics/Header/menu_8_profile_on.jpg','Graphics/Header/menu_10_links_on.jpg','Graphics/Header/menu_12_forums_on.jpg','Graphics/Header/menu_14_desktops_on.jpg','Graphics/Header/menu_16_about_on.jpg','Graphics/Header/menu_18_contact_on.jpg')">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div align="center">
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!--MAIN TITLE IMAGES-->
<img src="Graphics/Header/menu_1_mia.jpg" alt="" width="185" height="134"><img src="Graphics/Header/menu_2_title.jpg" alt="" width="615" height="134">
<!--NAVIGATION MENU-->
<img src="Graphics/Header/menu_3.jpg" alt="" width="21" height="25"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('btn_home','','Graphics/Header/menu_4_home_on.jpg',1)"><img src="Graphics/Header/menu_4_home_off.jpg" alt="" name="btn_home" width="54" height="25" border="0"></a><img src="Graphics/Header/menu_5.jpg" alt="" width="26" height="25"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('btn_blog','','Graphics/Header/menu_6_blog_on.jpg',1)"><img src="Graphics/Header/menu_6_blog_off.jpg" alt="" name="btn_blog" width="51" height="25" border="0"></a><img src="Graphics/Header/menu_7.jpg" alt="" width="25" height="25"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('btn_profile','','Graphics/Header/menu_8_profile_on.jpg',1)"><img src="Graphics/Header/menu_8_profile_off.jpg" alt="" name="btn_profile" width="82" height="25" border="0"></a><img src="Graphics/Header/menu_9.jpg" alt="" width="26" height="25"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('btn_links','','Graphics/Header/menu_10_links_on.jpg',1)"><img src="Graphics/Header/menu_10_links_off.jpg" alt="" name="btn_links" width="60" height="25" border="0"></a><img src="Graphics/Header/menu_11.jpg" alt="" width="25" height="25"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('btn_forums','','Graphics/Header/menu_12_forums_on.jpg',1)"><img src="Graphics/Header/menu_12_forums_off.jpg" alt="" name="btn_forums" width="78" height="25" border="0"></a><img src="Graphics/Header/menu_13.jpg" alt="" width="26" height="25"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('btn_desktops','','Graphics/Header/menu_14_desktops_on.jpg',1)"><img src="Graphics/Header/menu_14_desktops_off.jpg" alt="" name="btn_desktops" width="100" height="25" border="0"></a><img src="Graphics/Header/menu_15.jpg" alt="" width="26" height="25"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('btn_about','','Graphics/Header/menu_16_about_on.jpg',1)"><img src="Graphics/Header/menu_16_about_off.jpg" alt="" name="btn_about" width="65" height="25" border="0"></a><img src="Graphics/Header/menu_17.jpg" alt="" width="26" height="25"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('btn_contact','','Graphics/Header/menu_18_contact_on.jpg',1)"><img src="Graphics/Header/menu_18_contact_off.jpg" alt="" name="btn_contact" width="88" height="25" border="0"></a><img src="Graphics/Header/menu_19.jpg" alt="" width="21" height="25"></td>
</tr>
</table>
</div></td>
</tr>
</table>
</body>
</html>edit: Interestingly, this doesn't seem to effect IE 5.2 for OS X, only the Windows version (I'm running IE 6)????
