edesignuk
May 29, 2004, 03:46 PM
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 (http://edesignuk.net/new/) 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).
http://upload.edesignuk.net/uploaded_data/forums121203/ielayoutproblem.jpg
Here is the code (minus the javascript for the rollovers, no need for that for this purpose)
<!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>
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 :( :rolleyes:
edit: Interestingly, this doesn't seem to effect IE 5.2 for OS X, only the Windows version (I'm running IE 6)???? :rolleyes:
I've been busy in photoshop for a while and have got this (http://edesignuk.net/new/) 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).
http://upload.edesignuk.net/uploaded_data/forums121203/ielayoutproblem.jpg
Here is the code (minus the javascript for the rollovers, no need for that for this purpose)
<!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>
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 :( :rolleyes:
edit: Interestingly, this doesn't seem to effect IE 5.2 for OS X, only the Windows version (I'm running IE 6)???? :rolleyes:
