Jump to content

white gaps

aleX_hill

By aleX_hill
in CSS Help

 Share

Recommended Posts

aleX_hill Member

aleX_hill

Posted
Posted

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

Link to comment
Share on other sites
SuperBlue Member

SuperBlue

Posted
Posted

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.  ;)

Link to comment
Share on other sites
SuperBlue Member

SuperBlue

Posted
Posted

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...  ;D

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.