Log in

View Full Version : Problem with cell alignment..spacing


designkitt
09-11-2006, 01:15 PM
I am having problems aligning my cells so they do not have any space inbetween. I have tried indicating height and then taking it out, but I am still having problems with my first row/cell and the rest of the table. It's driving me crazy.. please help. Thank you.

Here is the url and code:

http://kittelbergerdesign.com/indextest.html


<html>
<head>
<title>hat horizons</title>

<style>
P {font-size:9pt;
font-color:#000033;
font-weight:normal;
font-family: "arial"}
</style>


<script>
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// =======================================
// set the following variables
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 2000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below


Pic[0] = 'images/Uzbekcap.jpg'
Pic[1] = 'images/constablehat.jpg'
Pic[2] = 'images/Kyrgistan.jpg'
Pic[3] = 'images/Lesotho.jpg'
Pic[4] = 'images/Nigerian.jpg'
Pic[5] = 'images/BurmaRawang.jpg'
Pic[6] = 'images/montera.jpg'
Pic[7] = 'images/Tlingithelmet.jpg'
Pic[8] = 'images/Mongoliasoldier.jpg'

// =======================================
// do not edit anything below this line
// =======================================


var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>



</head>

<body bgcolor="black" onload="runSlideShow()">
<img src="images/trans.gif" width="700" height="30">
<br>
<table border="1" cellpadding="0" cellspacing="0" width="720" bgcolor="#000000" align="center">

<tr>
<td colspan="18" width="720" height="112" valign="bottom">
<img src="images/index header rev.jpg" width="720" height="112">
</tr>
</td>

<tr>
<td colspan="4" background="images/yellow box rev.jpg" width="157" valign="top">

<table border="0" cellspacing="10" cellpadding="0" width="157">
<tr>
<td colspan="2" width="58" valign="top">
<img src="images/whitebox.jpg" width="58" height="55" align="left" valign="top">
</td>

<td colspan="2">
</td>
</tr>

<tr>
<td colspan="2">
</td>

<td colspan="2" width="72" valign="top">
<img src="images/whitebox.jpg" width="58" height="55" align="left" valign="top">
</td>
</tr>

<tr>
<td colspan="2" width="72" valign="top">
<img src="images/whitebox.jpg" width="58" height="55" align="left" valign="top">
</td>
<td colspan="2">
</td>
</tr>

<tr>
<td colspan="2">
</td>

<td colspan="2" width="72" valign="top">
<img src="images/whitebox.jpg" width="58" height="55" align="left" valign="top">
</td>
</tr>

<tr>
<td colspan="2" width="72" valign="top">
<img src="images/whitebox.jpg" width="58" height="55" align="left" valign="top">
</td>

<td colspan="2">
</td>
</tr>
</table>
</td>

<td colspan="15" valign="top" bgcolor="#ffffff">

<table border="0" cellpadding="8" cellspacing="0" background="images/white textbox rev.jpg" valign="top">

<tr>
<td colspan="15">

<P>Contents removed.


</td>
</tr>

<tr>
<td colspan="7" height="200" valign="top">

<img src="images/constablehat.jpg" name='SlideShow' width="234" height="200">
</td>

<td colspan="8" valign="top" height="200" valign="top">

<P>Contents removed.
<br>

<P>Contents removed.<p>
Thanks for visiting the site!

<p>
<font size="2" face="times" color="#000033">
<i><b>Stacey W. Miller,</b> Mitrologist</i>
</font>

</td>
</tr>
</table>
</td>
</tr>

<tr>
<td colspan="20" valign="top">
<img src="images/bottom header rev.jpg" width="720" height="27" valign="top">

</td>
</tr>

</table>




</body>
</html>
ItsMeOnly
09-11-2006, 07:19 PM
well, to be honest I don't see any problems, it renders great in FF 1.5
the one I think may cause problem is border property...

However, that's a very explorer-oriented script you have there: with a little ingenuity you can have it cross-browser...
designkitt
09-11-2006, 08:47 PM
Thank you for the reply. Yes it does look fine in firefox, but does not align correctly in internet explorer. I did ad a border property only so I could see where the cells were. Even when the border is removed, I still have a problem with that top header (cell) and the rest of the table. Any ideas... anyone!

Thanks!
ItsMeOnly
09-11-2006, 09:20 PM
FOUND IT:
check the first row for (drum roll please!):

</tr>
</td>
designkitt
09-11-2006, 09:46 PM
I made the correction. Only problem is I cannot check it in IE because I only have access to a mac right now. If possible could you please check it in IE. There shouldn't be a space betweent the header and the rest of the table.

Thank you so much for catching that.. I hope it worked!
ItsMeOnly
09-11-2006, 09:47 PM
I don't have IE, don't even have Windoze (linux user, and proud of it, here)
Girard Ibanez
09-12-2006, 12:42 AM
Black Space still there in IE, splits the image on the right.
designkitt
09-12-2006, 07:08 PM
I was able to correct the black space at the top but it still splits or shifts to the right in the white area.

Any ideas why?
ItsMeOnly
09-12-2006, 08:49 PM
yup, now it broke under FF :(, check for extra <td>s
designkitt
09-12-2006, 11:56 PM
I checked for extra <td>'s but there were none..
After working on this off and on today, making adjustments to cell width, height, colspan, still cannot figure out why its shifted to the right:(

any other thoughts?