5 replies [Last post]
rbfree
Offline
Enthusiast
Last seen: 13 years 10 weeks ago
Timezone: GMT-7
Joined: 2007-12-19
Posts: 124
Points: 0

Greetings,

I'm using simple tables to demonstrate reporting methods in my profession. They usually have fewer than five columns and only a few rows, fairly simple. However, I am attempting to use them inside a definition list (as some of these definitions are complicated enough to use tables for explication). Is nesting a table as such problematic? (The document validates strict xhtml.)
I can't seem to style them to align centered within the main content element. What am I missing?

I'll try to get away with showing the css and xhtml separately to show what I'm trying to do. If I have to, I'll embed the css and try again. Thanks yet again.

table.main {
border-collapse: collapse;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 0px;
font-size: 80%;
align: center;
}
table.main th, table.main td {
padding: 4px;
border: 1px solid #000066;
}
table.main th {
text-align: left;
padding-top: 0;
padding-bottom: 0;
padding-left: 4px;
padding-right: 2px;
font-weight: bold;
}
table.main caption {
font-size: x-small;
text-align: center;
padding-top: 5px;
padding-bottom: 0px;
font-weight: bold;
}


Fuel Classes


A fuel class is....

Fuel Classes and Fuel Size

Fuel Class
Dimensions


10-hr fuels
less than 1-inch diameter


100-hr fuels
less than 1-inch diameter


1,000-hr fuels
greater than 3-inch diameter


Technically,......



To return to the top of this page, click on this link



CSS n00b

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 24 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

By default, Firefox gives

By default, Firefox gives <dd> a 40px left margin.

From the FF html.css,

dd {
  display: block;
  -moz-margin-start: 40px;
}

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 32 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

And you won't get them to

And you won't get them to center if you try and place HTML attributes in stylesheet rulesets; there is no 'align:center'. Width and auto margins.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

rbfree
Offline
Enthusiast
Last seen: 13 years 10 weeks ago
Timezone: GMT-7
Joined: 2007-12-19
Posts: 124
Points: 0

interesting

Gary, Thanks for the tip re. Mozilla. I'm curious as to why, but I imagine they explain themselves in the doc you referenced, so I can see for myself. Also, thanks for that reference (FF html.css). By the way, I'm also using opera and IE 6x to look at these doc, and the problem persists, but I think Hugo addressed that.

Hugo, again, thanks. I was hoping to create a style (simply enough, a centered style) for all the little tables I'll be using in these docs (another table has 5 or 6 columns and about the same number of rows) to illustrate concepts. But, I see that's not possible, so I'll create ids for each and use width and auto-margins (as using the same width for all these tables would look awkward).

Thanks for the help. -- rbfree

CSS n00b

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 24 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I should have been more

I should have been more explicit. All browsers indent the dd element by 40px. They probably all use the left margin to do so. One or another may have chosen to use left padding.

In ol and ul, the list container (not the li) is indented. Firefox and Konqueror/Safari use left padding, while IE and Opera use left margin.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

rbfree
Offline
Enthusiast
Last seen: 13 years 10 weeks ago
Timezone: GMT-7
Joined: 2007-12-19
Posts: 124
Points: 0

quirky table margins

The below explains a mild quirk in my left sidebar. I had problems with the left sidebar, which I finally corrected. Now I know why I had the problems.

In ol and ul, the list container (not the li) is indented. Firefox and Konqueror/Safari use left padding, while IE and Opera use left margin.

It would be great if all these browsers used the same ruleset.

Thanks again!

CSS n00b