Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Junior Member
    Join Date
    Apr 2006
    Location
    Near Keighley Yorkshire UK
    Posts
    12
    Member #
    13087
    Hi I am learning XHTML strict and ASP and making sample pages to help me learn ( a solution to a bad memory).
    My ASP program out puts a table and I would like this table in the center. As the HTML align="center" in the Table definition is not allowed in the strict doc type I used a div around the table with a style class called centre instead.
    This worked but with the added effect of also aligning the text centrally in the table.
    I thought I had "got around this" by aligning each cell left or right using a style classes I am testing using Internet Explorer.
    But when I test in mozilla/netscape and oprea it is nolonger centralised.
    Can anybody help please?

  2.  

  3. #2
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    How about some code there Pat? Better yet... a link!
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  4. #3
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,720
    Member #
    5580
    Liked
    718 times
    <!DOCTYPE html PUBLIC "-//W3C//DTD xhtml 1.0 strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Untitled</title>
    <style type="text/css">
    .center {width:500px; margin: 0 auto; border:1px solid #000;}
    </style>
    </head>

    <table class="center">
    <tr><td> this is a table!</td></tr>
    </table>

    </body>
    </html>


  5. #4
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    It would've been nice to see what he tried to do first :ermm:
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  6. #5
    Junior Member
    Join Date
    Apr 2006
    Location
    Near Keighley Yorkshire UK
    Posts
    12
    Member #
    13087
    Quote Originally Posted by karinne
    How about some code there Pat? Better yet... a link!
    Hi Here is the code I think I understand how to post code correctly - looks OK in preview!
    Netscape does not center the buttons in the outer table's cell, but Internet Explorer does.
    I have tried to remove all the Dreamweaver template, rollover and pre load stuff. I have retested with Explorer and Netscape.
    Code:
     <!DOCTYPE html UBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Home page Strict</title>
    <link href="Style01.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    body,td,th {
        color: #6666FF;
        background-color: #FFFFCC;
    }
    .centre {text-align: center;}
    td,th {
            border: 1px solid;
            col#cble: width: 20%;
            col#cbtn: width: 60%;
            col#cbrt: width: 20%;
            col#cbut: width: 20%;
    }
    #db { background: #FFFF66;
    }
    #colle { background: #FFFF66;
             width: 20%;
    }
    #colrt { background: #FFFF66;
             width: 20%;
    }
    #coled { background: #FFFFCC;
             width: 60%;
    }
    -->
    </style>
    </head>
    <body>
    <table width="100%"  border="0" summary="Layout table" class="centre">
      <col id="cble" /><col id="cbut" /><col id="cbrt" />
      <tr>
        <td id="cble">Template left top. </td>
        <td id="cbtn" class="centre">
        <table border="0" cellpadding="0" cellspacing="0"  summary="button Table layout" class="centre">
                      <tr>
                          <td id="cbut"><a href="index.htm"><img src="Images/Button-File/WhiteButtons/button1up.png" alt="Button one image"  width="124" height="25"  id="Button1" /></a></td>
                          <td id="cbut"><a href="Next page2.htm"><img src="Images/Button-File/WhiteButtons/button2up.png" alt="Button2 image"  id="Button2" /></a></td>
                          <td id="cbut"><a href="Next page3.htm"><img src="Images/Button-File/WhiteButtons/button3up.png" alt="Button 3 image"  id="Button3" /></a></td>
                     </tr>
                </table>
       </td>
       <td id="cbrt">Template right top</td>
      </tr>
     <tr>
        <td  id="db" colspan="3"><h1 class="banner centre">Heading in the template area</h1></td>
     </tr>
     <tr>
         <td id="colle" >Template area </td>
         <td id="coled"><!-- InstanceBeginEditable name="EditRegion3" -->
              <p><a href="ListMusicDB.asp">Music Downloads</a></p>
                <p>This page is where all the music resides which has all been made by our own
                fine green hands.</p>
        </td>
        <td id="colrt" class="centre"><a href="Form%20page4.htm"><img src="Images/contactus.gif" alt="Contact us button" width="105" height="123" /></a></td>
     </tr>
    </table>
    <hr />
    </body>
    </html>

  7. #6
    Junior Member
    Join Date
    Apr 2006
    Location
    Near Keighley Yorkshire UK
    Posts
    12
    Member #
    13087
    Quote Originally Posted by mlseim
    <!DOCTYPE html PUBLIC "-//W3C//DTD xhtml 1.0 strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Untitled</title>
    <style type="text/css">
    .center {width:500px; margin: 0 auto; border:1px solid #000;}
    </style>
    </head>

    <table class="center">
    <tr><td> this is a table!</td></tr>
    </table>

    </body>
    </html>
    Your code works in Netscape. I will go and try to understand how.

  8. #7
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Thanks Pat!

    You might need to add a text-align: center; to body { }. I think it's IE that needs that to understand the margin: 0 auto;

    Post back if you have problems.
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  9. #8
    Junior Member
    Join Date
    Apr 2006
    Location
    Near Keighley Yorkshire UK
    Posts
    12
    Member #
    13087
    I tried again:
    Internet Explorer and Opera centralised everything - what I expected.
    Netscape and Firefox did not centralise the buttons, but did the rest of the cells.
    Internet Explorer renders the borders white and the rest blue (I can solve this by setting the border color attribute).
    This is just a problem I discovered as I was converting this example to "strict". This is not a real website, but I would like to know the answer if possible. I do not use table layouts normally, but I need to understand CSS and XHTML (strict) for tables so this example.
    The new embedded style sheet.
    Code:
    <style type="text/css">
    <!--
    body,td,th {
     color: #6666FF;
     background-color: #FFFFCC;
     text-align: center;
    }
    .centre {text-align: center;}
    .spaw   {text-align: left;}
    .rite   {text-align: right;} 
    td,th {
      border: 1px solid;
      text-align: center;
      col#cble: width: 20%;
      col#cbtn: width: 60%;
      col#cbrt: width: 20%;
      col#cbut: width: 20%;
    }
    #db { background: #FFFF66;
    }
    #colle {background: #FFFF66;
      text-align: center;
      width: 20%; 
    }
    #colrt {background: #FFFF66;
      text-align: center;
      width: 20%; 
    }
    #coled {background: #FFFFCC;
      text-align: center;
      width: 60%; 
    }
    -->
    </style>


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:24 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com