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

Where to find skilled freelance designers?

photoshop

Photoshop or Sketch?

Is Directory Submissions still an effective way for link...

How to get PR for website?

What is Google Admob?