css and html table probs

[tuzz]

Hi, I am having problems with CSS displaying HTML tables incorrectly. Its annoying me so much I am almost ready to give CSS the boot. The problem is, I am using CSS for layout but need to display tabular data from a database. The HTML table incorrectly takes up the screen width (ie. at 1024x768 the table width is 1024 px, at 1280x1024 is is 1280px, etc), even though the DIV it is contained in has a left margin of 230 px, that is, it is 230 px from the left side of the screen.

So what I get is a table that scrolls off the right of the webpage, looking very untidy. I am sure there is a way around this... I just can't figure it out.

I am using IE6 and Mozilla (which works perfectly), but 100% of clients are using either IE5 or IE6. Any help please?

 

[Barnaby W. Füi]

url?

 

[tuzz]

yup here it is:

http://www.a2jesus.com/maint/blog_louis_maintain.php

 

[Barnaby W. Füi]

Hm well, you do have width="100%" in the table's opening tag; I assume that's what's causing it. I can actually recall running into this before, but don't remember what I did about it. You have a ton of css so I couldn't really go through it, I tend to keep my css as small and simple as possible. Dunno if it will help at all but here's a little website I did the layout for. In general, using absolute positioning will cause a lot of problems (notice your header is off-kilter in my browser), so I try to stick to relative positioning and non-pixel sizes/positions.

 

[tuzz]

Thanks for your reply BingBong. Taking out the ' width ="100%" ' part of the table tag doesn't affect how it looks, the best I could do was limit it to something like 60% so it looked ok at 800x600 but had a lot of extra whitespace at higher res's. I think I might have a workaround for it though by using tables with invisible gif's. Thanks again!

 

[jgbishop]

Hi there, tuzz. I have a few suggestions for you and the fix for your table problems. First, for the fix:

Simply remove the align="left" portion in your table tag, and the table should flow properly (no horizontal scroll bar). A strange bug, but it seemed to fix it in my testing. Tables are aligned based on their parent element (I think), so if your #content area is left-aligned, the table will be as well.

As far as your markup goes, I have several suggestions:

• You are not using a DOCTYPE for the document. This has an important role in how the page is rendered. For more information, check out this brief overview.
• You never close your "content" DIV. Make sure to put the closing tag after your closing table tag (or wherever your content area ends).
• Don't use the <font> tag. I see you are using it in several places. Instead, set the font information in the relevant styles in your style sheet. The <font> tag has been deprecated (and this is one thing that CSS takes care of).
• Run your HTML through a validator to check for bugs. A very helpful one can be found right here.
• I highly recommend visiting A List Apart if you are interested in web design. There are some excellent articles there on various topics and how to do things properly (from a web standards point of view).

I hope some of this helps.

 

[tuzz]

Hey jgbishop, taking out the align="left" and width="100%" fixed the problem! Thanks a lot, your help is greatly appreciated.

About the <font> tag markup, which tag should I use instead? I am still using stylesheets to set all the font information and only using the font tag to tell the browser which style i want to use like this:

<font class="header">My Heading</font>

 

[Barnaby W. Füi]

<span class="foo">some text</span>

edit: and if it's a header - use the header tags. <h1>, <h2> ... <h6>

 

[jgbishop]

Exactly what the other user said. Use the <span> tags for inline editing/formatting and the <div> tags for block level. You should always use the <h1> through <h6> tags for section headings, as that is what they were intended for. The markup in your HTML should reflect the structure of your page. Using these kinds of structural tags will help ensure that.

Another problem I noticed is that your CSS file respecifies the font in many places. This isn't bad, but if you want to change the font you use, you will have to change it in all of those locations. I recommend specifying the standard font size and font family in your "body" selector.

I will do my best (when I get home this afternoon) to whip up a "cleaner" version of your page, so that you can look at it. I'll be sure to add some comments, so that you can see what I'm doing.

One other point: be very careful about your use of classes. You can get yourself into a problem known as "classitis" where you classes are used in places where they are not required. For example, using the <span class="header"></span> tags to format text. If you can replace those tags with something else (like an <h2> or something), then do that instead. CSS classes, while useful, can be a needless crutch for web designers, and should be used sparingly.

Happy designing!

 

[jgbishop]

OK, tuzz. I have a new copy of your test page available right here. I have commented in places best I could, but here is an overview of what I changed on the page:

• The first row in your table (the header row) has changed. If you take a look at my code, you will notice how much more compact the code for the first row is. All I did was change the <td> tags to <th> instead. I then set a rule for the <th> tag in my CSS so that the background color was set as you had it.
• The "bgcolor" attributes on the <tr> tags has been removed. CSS takes care of this for us.
• All <font> tags have been removed and replaced with the proper markup. No <span> tags were needed!
• The #header selector has changed a little. The line-height was removed, as was the element's height. Now, if you scale the fonts, that area scales with them.

If you scale the fonts big enough, you will see problems with your absolute positioning scheme. There are ways to correct this by using floats, but what you have is probably OK for now. I have not yet run this new page through the validator, so I'm not sure if I've caught everything yet.

Things to Keep in Mind

• Your ID selectors are case sensitive. You had "content" as the id for one of your <DIV> tags, but your CSS selector was "Content". This matters (believe it or not), so keep everything the same case. As a rule of thumb, I just leave everything lowercase. If you ever make a transition to XHTML instead of HTML, you are required to have tag names in lowercase. Otherwise, it isn't XHTML.
• Practice, Practice! This stuff is fun (at least to me), so practice all the time to get better.

I hope this has helped a little. Good luck, and let me know if you have any other questions or problems.

Update (5:20 PM EST): I ran the page through the W3C validator and it failed. The problem is some of the characters you used in your blog entries. Certain characters must use appropriate HTML codes instead of the actual character themself. Here is a nice article on the subject.

 

[tuzz]

wow, thanks for all the info. I have always wanted to look into making "nicer" code but just didn't know where to start, this'll be a great head-start. I am going to look into putting in all this stuff in the next few weeks, when I have some time. Thanks jgbiship, especially for the commented cleaner code.