layout image slice looks good in IE but not Firefox

itssawyer · 05-14-2009, 01:54 PM

I am making this layout with image slicing, and when i put the images together as bg of divs, it all looks good in IE, but when i see the image in firefox, theres a big gap on between the second and last image. I will show a screenshot below with the coding.

Code:

<html>
<head>
<title></title>

<SCRIPT LANGUAGE='JAVASCRIPT' TYPE='TEXT/JAVASCRIPT'>
<!--
var popupWindow=null;
function popup(mypage,myname,w,h,pos,infocus){

if (pos == 'random')
{LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;

}
else
{LeftPosition=(screen.width)?(screen.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
settings='width='+ w + ',height='+ h + ',top=' + TopPosition + ',left=' + LeftPosition + 

',scrollbars=yes,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';popupWindow=window.open('',myname,settings);
if(infocus=='front'){popupWindow.focus();popupWindow.location=mypage;}
if(infocus=='back'){popupWindow.blur();popupWindow.location=mypage;popupWindow.blur();}

}
// -->
</script>

<LINK href="css.css" rel="stylesheet" type="text/css">

</head>
<body>

<table>


<!-- HEADER -->


<tr>
	<td p align="left" valign="bottom">
		<div id="header">

<!-- MENU -->
<a href="#">HOME</a>&nbsp;
<a href="#">WORLD</a>&nbsp;
<a href="#">US</a>&nbsp;
<a href="#">TECH</a>&nbsp;
<a href="#">ART&CUTLURE</a>&nbsp;
<a href="#">BUSINESS</a>&nbsp;
<a href="#">SPORTS</a>&nbsp;
<a href="#">MISCELANEOUS</a>&nbsp;
<a href="javascript:popup('windowpop.html','windowpop','578','550','center','front');">SUBMIT</a>
&nbsp;
<a href="#">CONTACT</a>&nbsp;
<h2>



		</div>
	</td>
</tr>
<tr>
<td p align="center">

<div id="menu">
<p><br><p>

</div>
</td>
</tr>
<tr>
<td p align="center">
<div id="body">
body

</div>
</td>
</tr>
<!-- FOOTER -->
<tr>
	<td p align="center">
		<div id="footer">

	<h3>&copy; Copyright 2009-'10</h3>

		</div>
	</td>
</tr>
</body>
</html>

Code:

* {
	cell-padding: 0px;
	border: 0px;
	border-spacing: 0px;
	border-collapse: collapse;
	} 


h1 {
	color: #cccccc;
	font-size: 16px;
	text-decoration: underline overline;
	font-family: arial;
 	}


body {
	background-color: #cccccc;
	border: 0px;
	cell-padding: 0px;
	border-spacing: 0px;
	cell-spacing: 0px;
	border-collapse: collapse;
	font-family: eurostyle, myraid, tahoma;
	
   	

	}

table {
	border: 0px;
	cell-padding: 0px;
	border-spacing: 0px;
	cell-spacing: 0px;
	border-collapse: collapse;
 	}

tr {
	border: 0px;
	padding: 0px;
	border-spacing: 0px;
	cell-spacing: 0px;	
	border-collapse: collapse;
	}
	

td {
	border: 0px; 
	bgcolor: #ffffff;
	p align: center; 
	border-spacing: 0px;
	padding: 0px;
	border-collapse: collapse;
 	}


#header {
	background-image: url(SQRL_header.png);
	width: 1000px;
	height: 250px;
	padding: 0px;
	border-spacing: 0px;
	border: 10px;
	margin-left: 0px;
	margin-bottom: 10px
 	}

#menu {
	background-image: url(menu.png);
	height: 60px;
	padding: 0px;
	border-spacing: 0px;
	border: 0px;
	border-collapse: collapse;
	}

#body {
	background-image: url(body.png);
	height: 200px;
	border-spacing: 0px;
	padding: 0px;
	border: 0px;
	border-collapse: collapse;
 	}
	

#footer {
	background-image: url(footer.png);
	height: 60px;
	border-spacing: 0px;
	padding: 0px;
	border: 0px;
	border-collapse: collapse;

 	}

h3 {
	font-size: 12px;
 	}

a:link {
	color: silver;
 	}

a:hover {
	color: #000000;
 	}

a:visited {
	color: silver;
 	}

a:active {
	color: #ffffff;
 	}

Rowsdower! · 05-14-2009, 01:57 PM

Link please! This will be super easy to debug in FF if you link us to the page.

Use the Firebug plugin for FF too while you're at it. You should be able to see where that gap comes from.

drhowarddrfine · 05-14-2009, 01:58 PM

The problem, as always, is IE, not FF. Never look at IE as a reference for how things should work. Always use more modern browsers, then look to see when and how IE screws things up.

You aren't using a doctype. IE will never attempt to perform like other more modern browsers without one. Add this to your first line:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

There may still be an issue with another IE bug in this but let's see what happens after adding thatl.

itssawyer · 05-14-2009, 02:58 PM

ok, i used a free host to upload the site to. The link is below, again, the gap is seen only in firefox. It is still there, any ideas?

http://www.freewebs.com/theunlimited...yout/sqrl.html

abduraooft · 05-14-2009, 03:04 PM

Just add

Code:

* {
border:none;
padding:0;
margin:0;
}

into your CSS

drhowarddrfine · 05-14-2009, 05:10 PM

abduraooft is correct. That will fix the problem but the problem is IE collapsing margins improperly as I alluded to above. Firefox is performing correctly.

abduraooft · 05-14-2009, 05:14 PM

Quote:

abduraooft is correct. That will fix the problem but the problem is IE ...

I suggested that fix after seeing a right DOCTYPE at the top

itssawyer · 05-14-2009, 05:40 PM

Quote:

Originally Posted by abduraooft

Just add

Code:

* {
border:none;
padding:0;
margin:0;
}

into your CSS

* {
cell-padding: 0px;
border: 0px;
border-spacing: 0px;
border-collapse: collapse;
}

i have that in there. Do you mean actually change border to say none?
and if that was the problem, would all the images be seperated?

abduraooft · 05-14-2009, 05:42 PM

Quote:

i have that in there. Do you mean actually change border to say none?
and if that was the problem, would all the images be seperated?

No! margin:0;

itssawyer · 05-18-2009, 02:11 AM

Quote:

Originally Posted by abduraooft

No! margin:0;

great. thanks, solved the problem. I forgot i had that in there before and removed it haha.

austin36 · 06-09-2010, 04:54 PM

I'm having the same problem... but the above is not fixing it. Here's the site www.wildislandresorts.com . The affected image slice is the sign post Nav on the right. Thanks for any help.