40 users online (0 members and 40 guests)  


  Results 1 to 5 of 5

Related

  1. html css element alignment    Forum: CSS Forum
    Replies: 5
  2. nested table relative column alignment    Forum: HTML Forum
    Replies: 2
  3. HTML table cell alignment    Forum: HTML Forum
    Replies: 1
  4. HTML Forum    Forum: HTML Forum
    Replies: 4
  5. Table alignment    Forum: HTML Forum
    Replies: 5
  1. #1
    designkitt's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2006
    Posts
    8

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

    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>

  2. #2
    DeadMeatGF's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    381

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

    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.

  3. #3
    designkitt's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2006
    Posts
    8

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

    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

  4. #4
    DeadMeatGF's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    381

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

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

  5. #5
    designkitt's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2006
    Posts
    8

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

    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>&nbsp;&nbsp;&nbsp;&nbsp;
    Hat Horizons will make you think differently about what you put on your head.<br>&nbsp;&nbsp;&nbsp;&nbsp;With their endless variations, hats and headdresses are a tribute to the diversity of<br>&nbsp;&nbsp;&nbsp;&nbsp;the worlds cultures. Knowledge of headgear can instill an awareness and<br>&nbsp;&nbsp;&nbsp;&nbsp;appreciation of our cultural differences. At the same time, by understanding the<br>&nbsp;&nbsp;&nbsp;&nbsp;purposes for which they are worn, hats may act as a bridge, reinforcing attitudes and<br>&nbsp;&nbsp;&nbsp;&nbsp;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>



Tags for this Thread