Hello...new to forum need help with html table alignment

**designkitt** · 09-11-2006, 11:37 AM

Hello all!
I am new to this forum and hoping someone can help me. I am having a problem aligning one top cell with the rest of the table. Its driving me crazy as I cannot figure how to get rid of the space so the cells align correctly. Here is the url followed by the code:
I hope someone can help... thank you in advance!
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="#000000" onload="runSlideShow()">
<table border="0" cellpadding="0" cellspacing="0" width="720" bgcolor="#000000" align="center">
<tr>
<td colspan="18" width="720" valign="bottom">
<img src="images/index header rev.jpg" width="720">
</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">
<tr>
<td colspan="15">
<P>Hat Horizons will make you think differently about what you put on your head.<br> With their endless variations, hats and headdresses are a tribute to the diversity of<br> the worlds cultures. Knowledge of headgear can instill an awareness and appreciation<br>of our cultural differences. At the same time, by understanding the purposes for which<br> they are worn, hats may act as a bridge, reinforcing attitudes and values that are shared<br> by people around the globe.

</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">
<P>Hats and headdresses from the collection are available for exhibit. The head coverings make an engaging and educational visual display for museums, galleries and schools and other public spaces.
<br>
<P>Head coverings provide the foundation for programs we offer on cultural diversity and ethnic understanding. Presentations and workshops can be customized for a variety of audiences and ages in educational, community and corporate environments.<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>

**DeadMeatGF** · 09-11-2006, 03:03 PM

Here's the problem, I think

Code:

</head>
<body bgcolor="#000000" onload="runSlideShow()">
<table border="0" cellpadding="0" cellspacing="0" width="720" bgcolor="#000000" align="center">
<tr>
<td colspan="18" width="720" valign="bottom">
<img src="images/index header rev.jpg" width="720">
</tr>
</td>
<tr>

Swap your </tr> and </td> over and you should be fine.

**designkitt** · 09-11-2006, 05:58 PM

thank you for the quick reply. I corrected as you suggested, just cannot check to see if it works in IE because I am on a mac right now. Any chance you could check this to see if it works? There was a space between the header and the rest of the table... hopefully that is gone.

Thanks once again

**DeadMeatGF** · 09-12-2006, 03:04 AM

Can't see any problems with it in mine - IE7b3.

**designkitt** · 09-13-2006, 06:04 PM

There is still a problem in IE.

I was able to fix the space between the header and the rest of the table but it still shifts to the right... slightly.

It seems as though I have tried everything. Any suggestions would be greatly appreciated.

Here is the revised code and new url:

http://kittelbergerdesign.com/indextest7.html

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

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

<script language="JavaScript">
// (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="000000" onload="runSlideShow()">
<img src="images/trans.gif" width="700" height="30">
<br>
<table border="0" cellpadding="0" cellspacing="0" width="717" height="512" bgcolor="#ffffff" align="center">

<tr>
<td colspan="18" background="images/index header3.jpg" width="717" height="74">

</td>
</tr>

<tr>
<td colspan="4" valign="top" background="images/yellow box2.jpg" width="155" height="411">

<table border="0" cellspacing="10" cellpadding="0" width="155" height="382">
<tr>
<td colspan="2" width="58" valign="top">
<img src="images/whitebox.jpg" width="58" height="55" 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 valign="top" height="103" width="562">

<img src="images/subtitle.jpg" height="36" align="left" valign="top">
<img src="images/goldhat bottom.jpg" width="87" height="103" valign="top" align="right">

<br>
<br>

<P>    
Hat Horizons will make you think differently about what you put on your head.<br>    With their endless variations, hats and headdresses are a tribute to the diversity of<br>    the worlds cultures. Knowledge of headgear can instill an awareness and<br>    appreciation of our cultural differences. At the same time, by understanding the<br>    purposes for which they are worn, hats may act as a bridge, reinforcing attitudes and<br>    values that are shared by people around the globe.
<br>

<table border="0" cellpadding="8" cellspacing="0" bgcolor="#ffffff" width="562" height="208" valign="top">

<tr>
<td id="VU" height=200 width=234>

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

<td colspan="6" height="200" width="308" valign="top">

<P>Hats and headdresses from the collection are available for exhibit. The head coverings make an engaging and educational visual display for museums, galleries and schools and other public spaces.
<br>

<P>Head coverings provide the foundation for programs we offer on cultural diversity and ethnic understanding. Presentations and workshops can be customized for a variety of audiences and ages in educational, community and corporate environments.<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="18" valign="top">
<img src="images/bottom header rev.jpg" width="717" height="27" valign="top">

</td>
</tr>

</table>

</body>
</html>

Thread: Hello...new to forum need help with html table alignment

Thread Tools

Related

html css element alignment Forum: CSS Forum

nested table relative column alignment Forum: HTML Forum

HTML table cell alignment Forum: HTML Forum

HTML Forum Forum: HTML Forum

Table alignment Forum: HTML Forum

Hello...new to forum need help with html table alignment

Re: Hello...new to forum need help with table alignment

Re: Hello...new to forum need help with table alignment

Re: Hello...new to forum need help with table alignment

Re: Hello...new to forum need help with table alignment

Tags for this Thread