...
PDA

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.

http://www.freewebs.com/theunlimited/ss.PNG


<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';popupWindo w=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>



* {
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 (http://getfirebug.com/). 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/sqrllayout/sqrl.html
abduraooft
05-14-2009, 03:04 PM
Just add
* {
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
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
Just add
* {
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
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
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.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum