JeevesBond — Thu, 03 Feb 2005 13:24:50 +0000

Sorry to double-post, but...
I should note that I could/should have used tags in the element, if you do it just provides even mor hooks to play with, and that's what you need when using css.

JeevesBond — Thu, 03 Feb 2005 13:22:38 +0000

Yes you're learning the technical way that css works - and you may not like what I'm about to say, but it has relevance to your problem - but there are some fundamentals missing from the way you're trying to code.

1. No DOCTYPE - not detrimental, but a browser does make some decisions based upon this and it's needed for using the W3C validator.

2. Your css is suffering from an attack of the classes! It is all too tempting to define everything by classes, and to only take half-measures when learning css.

3. Not using consistent semantic markup. You're not utilising the strengths of (X)HTML to provide 'hooks' for your css, hence the need for many classes. For example: There is no or tags that could be used as hooks.

4. Using the 'tree' model of (X)HTML allows you to add a class or id hook to an element high up the tree and then use css to change its child elements, I'll clarify with an example:

<table id="testtable">
 <thead>
  <tr>
   <td>...</td>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>...</td>
  </tr>
 </tbody>
</table>

Then you can use css selectors to format the table - for example:

#testtable thead td {
  ...
}
#testtable tbody td {
  ...
}

This is far easier to understand, you can group all these selectors together and see a clear formatting path for every element, rather than having multiple ambiguous classes that could apply to anthing.

Overall: This will cut-down your (X)HTML and CSS code substantially, making it a lot easier to debug, provide more hooks, whilst making the code semantic that will make the code easier to read and portable across pages without having to create yet-more classes.

I know this isn't the answer you wanted, but it'll be a lot easier for all of us to read the code and provide answers to your questions if you do this!

Also, if you - or anyone - spot any errors in what is written please correct me, this was all written from memory!

Busy — Thu, 03 Feb 2005 10:34:54 +0000

With tables its best to 'size' the cells to desired width, even if you need to put width="100%" in a td cell.
Another way (and there are several) is to nest the content table in a fixed sized table, this way the nested table wont (shouldn't) exceed the main tables width.

My belief for data tables (such as your example) should be fixed width. while the big table (width 100%) looks ok at 800x600, on a screen size twice or three times as big things can be really spread out.

Since your learning CSS try make what you have without tables, a good challenge for you