Programming Help

Web Development



What's Here?

  • Members: 132,613
  • Replies: 471,704
  • Topics: 73,133
  • Snippets: 2,541
  • Tutorials: 666
  • Total Online: 922
  • Members: 61
  • Guests: 861

Who's Online?

Welcome to Dream.In.Code
Getting Help is Easy!

Join 132,613 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 922 people online right now. Registration is fast and FREE... Join Now!




Centering tables on a webpage in XHTML

 
 Reply to this topicStart new topic

Centering tables on a webpage in XHTML, IE7 gets it right; FF3 and Opera don't!
bpb
post 4 Jul, 2008 - 11:05 AM
Post #1


New D.I.C Head

*
Joined: 2 May, 2008
Posts: 15



Thanked 1 times
My Contributions
I've developed the framework and layout for this site and just have to add the actual content. But, I can't get a table to display on the center of the page; Firefox 3 and Opera 9.51 both place the table on the left-hand side of the page. Only IE7 gets it right and centers the table. The page (site) is valid XHTML 1.0 and valid CSS 2.1. The CSS for the page is below:
CODE

body {
    background-color:#ffffff;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    text-align:center;
    }

.header {
    background-image:url(images1/ujsredwhite.gif);
    background-repeat:no-repeat;
    background-position:center bottom;
    background-color:#990000;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:24px;
    color:#ffffff;
    font-variant:small-caps;
    height:184px;
    width:auto;
    text-align:center;
    border-color:#FFFFFF;
    border-style:solid;
    border-width:thin;
    border-collapse:collapse;
    }

.menu {
    text-align:center;
    background-color:#CCCCCC;
    border-color:#FFFFFF;
    border-style:solid;
    border-width:thin;
    }

.mainContent {
    background-color:#999999;
    border-style:solid;
    border-color:#ffffff;
    border-width:thin;
    border-collapse:collapse;
    text-align:center;
    }

table {
    text-align:center;
    background-color:#ffffff;
    padding-top:5px;
    border-color:#990000;
    border-style:solid;
    border-width:thin;
    border-collapse:collapse;
    margin:5px;
    }

table th {
    text-align:center;
    color:#990000;
    border-bottom-color:#990000;
    border-bottom-style:solid;
    border-bottom-width:thin;
    }

table td {
    width:350px;
    text-align:justify;
    }

.footer {
    background-image:url(images1/valid_xhtml_css.gif);
    background-color:#CCCCCC;
    background-position:left;
    background-repeat:no-repeat;
    width:auto;
    height:30px;
    border-style:solid;
    border-color:#ffffff;
    border-width:thin;
    border-collapse:collapse;
    font-family:Arial, Helvetica, sans-serif;
    text-align:left;
    font-size:medium;
    color:#990000;
    text-indent:176px;
    }


The page is online at http://10jcdev.alacourt.gov/links.html if you'd like to take a look. Only the Home and Links pages have any content. For more fun, compare and contrast the "index.htm" page with the "links.html" page. The tables on the links.html page are all the way to the left unless you're looking with IE7. Regardless of your browser, (including Konqueror in Linux) the image of the courthouse on the index.htm page ("Home" tab) is centered right where I want it. Why can't I do that with the tables? I'm not using any inline CSS on the tables at all; the tables are in a div tag with class = .mainContent from the CSS posted above.

It all validates as far as xhtml and css go; if it was the other way around and only IE7 was putting the tables to the left I wouldn't be surprised. But IE7 is the only browser that displays the page the way I want it! Does anyone have any ideas on how to get the dang tables in the center of the page?!?!
User is offlineProfile CardPM

Go to the top of the page

BetaWar
post 4 Jul, 2008 - 12:12 PM
Post #2


#include <soul.h>

Group Icon
Joined: 7 Sep, 2006
Posts: 1,987



Thanked 78 times

Dream Kudos: 1175
My Contributions
I am pretty sure it is because you are using the text-align: center to get the content centered. Mozill and FF don't like tha tand won't work correctly with it (unless it is actually text that is being aligned to the center). Try adding this around your content:

CODE
<center>PAGE CONTENT TABLE ECT.</center>


THat should work.
User is offlineProfile CardPM

Go to the top of the page

BrainStew
post 4 Jul, 2008 - 12:21 PM
Post #3


D.I.C Head

**
Joined: 2 Aug, 2007
Posts: 149



Thanked 1 times
My Contributions
Use align: center instead of text-align in your divs. I don't think text-align applies to objects, just text.
User is offlineProfile CardPM

Go to the top of the page

bpb
post 4 Jul, 2008 - 12:43 PM
Post #4


New D.I.C Head

*
Joined: 2 May, 2008
Posts: 15



Thanked 1 times
My Contributions
QUOTE(BrainStew @ 4 Jul, 2008 - 03:21 PM) *

Use align: center instead of text-align in your divs. I don't think text-align applies to objects, just text.


Thanks for your replies. Using the <center> tag works, but my problem with the <center> tag is that it has been depreciated in HTML 4.01 and XHTML 1.0 Strict, which is what I wanted to write this page in. With the align: center, I get a CSS error of unknown property "align", declaration dropped (and it doesn't work).

By the way, that's using the align: center this way:
CODE
<div class="mainContent" align="center">


Does anyone know how to do this in strict XHTML 1.0 & CSS 2.1?

This post has been edited by bpb: 4 Jul, 2008 - 12:46 PM
User is offlineProfile CardPM

Go to the top of the page

BrainStew
post 4 Jul, 2008 - 01:02 PM
Post #5


D.I.C Head

**
Joined: 2 Aug, 2007
Posts: 149



Thanked 1 times
My Contributions
hmmm, you get a css error?
http://msdn.microsoft.com/en-us/library/ms533069(VS.85).aspx

I'm assuming you put the attribute in your mainContent div?

This post has been edited by BrainStew: 4 Jul, 2008 - 01:06 PM
User is offlineProfile CardPM

Go to the top of the page

bpb
post 4 Jul, 2008 - 01:05 PM
Post #6


New D.I.C Head

*
Joined: 2 May, 2008
Posts: 15



Thanked 1 times
My Contributions
QUOTE(BrainStew @ 4 Jul, 2008 - 04:02 PM) *

try using align as a style instead of an attribute of the div object:

CODE

.menu {
    align:center;
    background-color:#CCCCCC;
    border-color:#FFFFFF;
    border-style:solid;
    border-width:thin;
    }



I got it; your answer got me looking at the CSS closely and I needed to change the margin in the table, like so:
CODE

table {
    text-align:center;
    background-color:#ffffff;
    padding-top:5px;
    border-color:#990000;
    border-style:solid;
    border-width:thin;
    border-collapse:collapse;
    margin:auto;
    }

The margin was set at 5px; changing it to auto seems to have fixed things. But thanks for your help - always good to look at the code in different ways.
User is offlineProfile CardPM

Go to the top of the page

BrainStew
post 4 Jul, 2008 - 01:17 PM
Post #7


D.I.C Head

**
Joined: 2 Aug, 2007
Posts: 149



Thanked 1 times
My Contributions
I think using:

text-align: -moz-center;

for the div instead could work. Either way, glad you found an answer.



This post has been edited by BrainStew: 4 Jul, 2008 - 01:18 PM
User is offlineProfile CardPM

Go to the top of the page

level1
post 6 Jul, 2008 - 01:31 PM
Post #8


New D.I.C Head

*
Joined: 12 Jun, 2008
Posts: 34



Thanked 5 times
My Contributions
I would suggest using
CODE
margin: 0 auto;
this will set the top and bottom margins to 0, left and right to auto. Also, if you set the width of the table it will solve your problems. Now, that being said I don't think you should be using any tables for this layout. Look at it. It looks likes lists and headers, so I would use those html tags to make the document. Or, at the very least just use one table if you insist on using them for structure. And even then I would use html that more semantically matches the layout - like header row, list row - where the header row has the headers then the list row has a list inside of it - like this ( this is only if you insist on using tables here )
CODE

<table>
    <tr class="header_row">
        <td>Local Links</td>
        <td>Bar Associations & Legal Associations</td>
    </tr>
    <tr class="list_row">
        <td>
            <ul class="judicial_list">
                <li>Tuscaloosa County</li>
                <li>Tuscaloosa County Sheriff</li>
            </ul>
        </td>
        <td>
            <ul class="judicial_list">
                <li>Birmingham Bar Association</li>
                <li>Alabama State Bar</li>
                <li>Tuscaloosa County Sheriff    American Bar Association</li>
                <li>Birmingham American Inn of Court</li>
            </ul>
        </td>
    </tr>
    <tr class="header_row">
        <td>blah</td>
        <td>blah 2</td>
    </tr>
    <tr class="list_row">
        <td>
            <ul class="judicial_list">
                <li>more blah</li>
                <li>blah county</li>
                <li>more blah</li>
                <li>blah county</li>
            </ul>
        </td>
        <td>
            <ul class="judicial_list">
                <li>more blah</li>
                <li>blah county</li>
                <li>more blah</li>
                <li>blah county</li>
            </ul>
        </td>
    </tr>
    ...
    ...
</table>

But really, don't tables for structure in an xhtml file defeat the purpose of using xhtml in the first place? Ah, that is just me ranting, I'm sure there are a million factors that lead to it. Anyway, props for usign xhtml.
User is offlineProfile CardPM

Go to the top of the page

bpb
post 7 Jul, 2008 - 06:55 AM
Post #9


New D.I.C Head

*
Joined: 2 May, 2008
Posts: 15



Thanked 1 times
My Contributions
QUOTE(level1 @ 6 Jul, 2008 - 04:31 PM) *

I would suggest using
CODE
margin: 0 auto;
this will set the top and bottom margins to 0, left and right to auto. Also, if you set the width of the table it will solve your problems.
...
But really, don't tables for structure in an xhtml file defeat the purpose of using xhtml in the first place? Ah, that is just me ranting, I'm sure there are a million factors that lead to it. Anyway, props for usign xhtml.


That's probably a good idea on the margin; can't remember why I didn't do that.

As for the tables & structure, I'm using a table there because those links in the table are copied over from site to site. Only the ones in the first table are changed, and not all of them at that. So it's generally easier just to copy the links.html file from one site to another and work the table into place, changing the header and footer. You're probably right about using tables for structure in xhtml, but it is convenient for some of my other sites which do have a fixed width for the header, footer, and table. Plus, I'm not entirely sure what content they're going to give me for the other pages; this format could change between now and then. I guess ultimately old habits, like tables, die hard. I am trying to keep everything I do these days in xhtml though. Thanks for the advice.
User is offlineProfile CardPM

Go to the top of the page

Fast ReplyReply to this topicStart new topic
Time is now: 11/23/08 02:43AM
Invision Power Board v2.1.7 © 2008  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

Bye Bye Ads

Free DIC T-Shirt

T-Shirt Example

Related Sites

Monthly Drawing

Thumb Drive

Partners

Top Contributors

Top 10 Kudos This Month