...

View Full Version : Problems with image splicing IE & Firefox



cowdogs
12-13-2005, 06:41 PM
I am having some problems using spliced images (which I want to be connected with no white space). It looks the way it should in Firefox (other than its aligned to the left and not centered) but there is white space between the images in IE.

This is the code I'm using:

<center>
<div style="width: 760px;"><img
src="images/header_01.jpg" align="middle" border="0"><img
src="images/header_02.jpg" name="sub_but2"
onmouseover="document.sub_but2.src='images/header1_02.jpg'"
onmouseout="document.sub_but2.src='images/header_02.jpg'"
align="bottom" border="0" height="171" width="171"><img
src="images/header_03.jpg" name="sub_but3"
onmouseover="document.sub_but3.src='images/header1_03.jpg'"
onmouseout="document.sub_but3.src='images/header_03.jpg'"
align="bottom" border="0" height="171" width="85"><img
src="images/header_04.jpg" name="sub_but4"
onmouseover="document.sub_but4.src='images/header1_04.jpg'"
onmouseout="document.sub_but4.src='images/header_04.jpg'"
align="bottom" border="0" height="171" width="104"><img
src="images/header_05.jpg" name="sub_but5"
onmouseover="document.sub_but5.src='images/header1_05.jpg'"
onmouseout="document.sub_but5.src='images/header_05.jpg'"
align="bottom" border="0" height="171" width="111"><img
style="width: 71px; height: 171px;" alt=""
src="images/header_06.jpg" name="sub_but6"
onmouseover="document.sub_but6.src='images/header1_06.jpg'"
onmouseout="document.sub_but6.src='images/header_06.jpg'"
border="0"></div>
</center>

You can see the page in question here:

http://missing.link.ca/powerpioneers.ca/board.htm

What am I doing wrong?

Thanks...

Jen

_Aerospace_Eng_
12-13-2005, 09:20 PM
Its your whitespace, IE doesn't like it. Change this


<center>
<div style="width: 760px;"><img
src="images/header_01.jpg" align="middle" border="0"><img
src="images/header_02.jpg" name="sub_but2"
onmouseover="document.sub_but2.src='images/header1_02.jpg'"
onmouseout="document.sub_but2.src='images/header_02.jpg'"
align="bottom" border="0" height="171" width="171"><img
src="images/header_03.jpg" name="sub_but3"
onmouseover="document.sub_but3.src='images/header1_03.jpg'"
onmouseout="document.sub_but3.src='images/header_03.jpg'"
align="bottom" border="0" height="171" width="85"><img
src="images/header_04.jpg" name="sub_but4"
onmouseover="document.sub_but4.src='images/header1_04.jpg'"
onmouseout="document.sub_but4.src='images/header_04.jpg'"
align="bottom" border="0" height="171" width="104"><img
src="images/header_05.jpg" name="sub_but5"
onmouseover="document.sub_but5.src='images/header1_05.jpg'"
onmouseout="document.sub_but5.src='images/header_05.jpg'"
align="bottom" border="0" height="171" width="111"><img
style="width: 71px; height: 171px;" alt=""
src="images/header_06.jpg" name="sub_but6"
onmouseover="document.sub_but6.src='images/header1_06.jpg'"
onmouseout="document.sub_but6.src='images/header_06.jpg'"
border="0"></div>
</center>
to this

<div id="tophead">
<ul>
<li><img src="images/header_01.jpg" alt=""></li>
<li><img src="images/header_02.jpg" name="sub_but2" onmouseover="document.sub_but2.src='images/header1_02.jpg'" onmouseout="document.sub_but2.src='images/header_02.jpg'" height="171" width="171" alt=""></li>
<li><img src="images/header_03.jpg" name="sub_but3" onmouseover="document.sub_but3.src='images/header1_03.jpg'" onmouseout="document.sub_but3.src='images/header_03.jpg'" height="171" width="85" alt=""></li>
<li><img src="images/header_04.jpg" name="sub_but4" onmouseover="document.sub_but4.src='images/header1_04.jpg'" onmouseout="document.sub_but4.src='images/header_04.jpg'" height="171" width="104" alt=""></li>
<li><img src="images/header_05.jpg" name="sub_but5" onmouseover="document.sub_but5.src='images/header1_05.jpg'" onmouseout="document.sub_but5.src='images/header_05.jpg'" height="171" width="111" alt=""></li>
<li><img src="images/header_06.jpg" name="sub_but6" onmouseover="document.sub_but6.src='images/header1_06.jpg'" onmouseout="document.sub_but6.src='images/header_06.jpg'" height="171" width="71" alt=""></li>
</ul>
</div>
Then add this to your chat.css file

#tophead {
width:760px;
height:171px;
margin:auto;
}
#tophead ul {
margin:0;
padding:0;
list-style-type:none;
}
#tophead ul li {
float:left;
line-height:0px;
font-size:1px;
}
Then change this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
to this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Just so you know the latest version of HTML is 4.01 you are wayyyyyy outdated.

cowdogs
12-14-2005, 04:19 PM
I ended up using this in in the image style: hspace="0"

Now I got that fixed, I gotta figure out why my alignment in out.

I have a nested table, and while in FF it looks normal, in IE its aligned left...

this is the page: http://missing.link.ca/powerpioneers/test.html

Jen



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum