aleX_hill Posted October 7, 2007 Share Posted October 7, 2007 I am having a problem with my site and have racked my brains trying to fix it. Hopefully someone out there can help. The site I am looking at is http://www.hcdesigns.com.au/v2/nav.html In IE6 there is a small gap just above the navigation bar and above the mainContent div. I have tried all sorts of margin and padding combinations and still nothing. It should be an easy problem to fix, guessing its just a bit too late in the evening. Thanks, Alex Quote Link to comment https://forums.phpfreaks.com/topic/72181-white-gaps/ Share on other sites More sharing options...
SuperBlue Posted October 15, 2007 Share Posted October 15, 2007 I am having a problem with my site and have racked my brains trying to fix it. Hopefully someone out there can help. The site I am looking at is http://www.hcdesigns.com.au/v2/nav.html In IE6 there is a small gap just above the navigation bar and above the mainContent div. I have tried all sorts of margin and padding combinations and still nothing. It should be an easy problem to fix, guessing its just a bit too late in the evening. Thanks, Alex Yes, well sorry for the delay. I know this problem, because i've experianced it on my own, However i cant quite put my finger on it. My biggest bet would be its because you dont enclose your text in tags, i found it to be a good practice to enclose all text in the relevant tags for instance. It also allows better styling later. For the menu, i'd say dump the table and position them buttons "position: absolute;" instead, hehe and "again" remember to apply "posistion: relative;" on the surrounding div, otherwhise your "posistion: absolute;" will place the bottons relatively to the edges of the browser window instead of the edges of the surrounding div. And regarding the problem on the bottons, try to enclose the table in a wrapper div as a quick fix... if this dosent work i dont remember what the curse to the problem is. Quote Link to comment https://forums.phpfreaks.com/topic/72181-white-gaps/#findComment-369684 Share on other sites More sharing options...
aleX_hill Posted October 15, 2007 Author Share Posted October 15, 2007 Thanks for that. I was just playing around with the imageready output, hence the table. I decided that the white gaps were ok in places, but I put them in a div and change the background color. I might try your suggestions though. Thanks, Alex Quote Link to comment https://forums.phpfreaks.com/topic/72181-white-gaps/#findComment-369768 Share on other sites More sharing options...
SuperBlue Posted October 16, 2007 Share Posted October 16, 2007 I found the source of your problem, you had some wired Spaces and Returns witch was cursing the gaps, maybe its somthing to due with the editor you used. For some reason it was acting kinda like it would if there where dumped a bunch of " "s and such in the code. The new code can be grabbed below. <html> <head> <title>Untitled-1</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> body { background-color:white; text-align: center; } #page { width:750px; height:400px; text-align: left; } a,table,img { margin: 0px; padding: 0px;} </style> <!-- ImageReady Preload Script (Untitled-1) --> <script language="JavaScript"> <!-- function SymError() { return true; } window.onerror = SymError; var SymRealWinOpen = window.open; function SymWinOpen(url, name, attributes) { return (new Object()); } window.open = SymWinOpen; //--> </script> <script type="text/javascript"> <!-- var currentImage; function getCurrent() { currentImage = document.getElementById('headerImage').src; } function setNewImage(image) { currentImage = image; } function newImage(arg) { if (document.images) { rslt = new Image(); rslt.src = arg; return rslt; } } function revertImage() { document.getElementById('headerImage').src = currentImage; } function changeimages() { if (document.images && (preloadFlag == true)) { for (var i=0; i<changeimages.arguments.length; i+=2) { document[changeimages.arguments[i]].src = changeimages.arguments[i+1]; } } } var preloadFlag = false; function preloadimages() { if (document.images) { nav_01_over = newImage("images/nav_01-over.gif"); nav_02_over = newImage("images/nav_02-over.gif"); nav_03_over = newImage("images/nav_03-over.gif"); nav_05_over = newImage("images/nav_05-over.gif"); nav_07_over = newImage("images/nav_07-over.gif"); nav_08_over = newImage("images/nav_08-over.gif"); home_header = newImage("images/home_header.jpg"); design_header = newImage("images/design_header.jpg"); development_header = newImage("images/development_header.jpg"); mates_header = newImage("images/mates_header.jpg"); contact_header = newImage("images/contact_header.jpg"); preloadFlag = true; } } // --> </script> <!-- End Preload Script --> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadimages(); getCurrent();" > <div id="page"> <div style="margin:0;"><img src="images/header.gif" width="750" height="100"></div> <table width="750" height="35" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01" style="margin: 0px;"> <tr> <td> <a href="#" onmouseover="changeimages('nav_01', 'images/nav_01-over.gif'); changeimages('cha', 'images/home_header.jpg');return true;" onmouseout="changeimages('nav_01', 'images/nav_01.gif'); revertImage(); return true;" onmousedown="changeimages('nav_01', 'images/nav_01-over.gif'); setNewImage('images/home_header.jpg'); return true;" onmouseup="changeimages('nav_01', 'images/nav_01-over.gif'); return true;"> <img name="nav_01" src="images/nav_01.gif" width="72" height="35" border="0" alt=""></a></td> <td> <a href="#" onmouseover="changeimages('nav_02', 'images/nav_02-over.gif'); changeimages('headerImage', 'images/design_header.jpg'); return true;" onmouseout="changeimages('nav_02', 'images/nav_02.gif'); revertImage(); return true;" onmousedown="changeimages('nav_02', 'images/nav_02-over.gif'); setNewImage('images/design_header.jpg'); return true;" onmouseup="changeimages('nav_02', 'images/nav_02-over.gif'); return true;"> <img name="nav_02" src="images/nav_02.gif" width="118" height="35" border="0" alt=""></a></td> <td> <a href="#" onmouseover="changeimages('nav_03', 'images/nav_03-over.gif'); changeimages('headerImage', 'images/development_header.jpg'); return true;" onmouseout="changeimages('nav_03', 'images/nav_03.gif'); revertImage(); return true;" onmousedown="changeimages('nav_03', 'images/nav_03-over.gif'); setNewImage('images/development_header.jpg'); return true;" onmouseup="changeimages('nav_03', 'images/nav_03-over.gif'); return true;"> <img name="nav_03" src="images/nav_03.gif" width="178" height="35" border="0" alt=""></a></td> <td> <img src="images/nav_04.gif" width="1" height="35" alt=""></td> <td> <a href="#" onmouseover="changeimages('nav_05', 'images/nav_05-over.gif'); return true;" onmouseout="changeimages('nav_05', 'images/nav_05.gif'); return true;" onmousedown="changeimages('nav_05', 'images/nav_05-over.gif'); return true;" onmouseup="changeimages('nav_05', 'images/nav_05-over.gif'); return true;"> <img name="nav_05" src="images/nav_05.gif" width="115" height="35" border="0" alt=""></a></td> <td> <img src="images/nav_06.gif" width="1" height="35" alt=""></td> <td> <a href="#" onmouseover="changeimages('nav_07', 'images/nav_07-over.gif'); changeimages('headerImage', 'images/mates_header.jpg');return true;" onmouseout="changeimages('nav_07', 'images/nav_07.gif'); revertImage(); return true;" onmousedown="changeimages('nav_07', 'images/nav_07-over.gif'); setNewImage('images/mates_header.jpg'); return true;" onmouseup="changeimages('nav_07', 'images/nav_07-over.gif'); return true;"> <img name="nav_07" src="images/nav_07.gif" width="136" height="35" border="0" alt=""></a></td> <td> <a href="#" onmouseover="changeimages('nav_08', 'images/nav_08-over.gif'); changeimages('headerImage', 'images/contact_header.jpg');return true;" onmouseout="changeimages('nav_08', 'images/nav_08.gif'); revertImage(); return true;" onmousedown="changeimages('nav_08', 'images/nav_08-over.gif'); setNewImage('images/contact_header.jpg'); return true;" onmouseup="changeimages('nav_08', 'images/nav_08-over.gif'); return true;"> <img name="nav_08" src="images/nav_08.gif" width="129" height="35" border="0" alt=""></a></td> </tr> </table> <div><img name="headerImage" id="headerImage" src="images/home_header.jpg" width="750" height="150"></div> <div id="mainContent" style="margin: 0; border-left: 2px solid black; border-right: 2px solid black;}">Main Content Here</div> </div> </body> </html> Edit: I asume its something to do with imageready, i wasent even aware you could create websites in IR.. Anyway, this is just another reason to use notepad... Quote Link to comment https://forums.phpfreaks.com/topic/72181-white-gaps/#findComment-370997 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.