h2g2 The Hitchhiker's Guide to the Galaxy: Earth Edition

Im having trouble with my tables resizing in all browsers. When the browser is set to view a font size bigger than smaller than normal gaps appear between the cells, this is made obvious by the splitting of the background images. The Table backgrounds are set using CSS in document and all TD and TABLE tags have width and heights set. All font sizes are set to strict points so they don't resize with the browser (yes i know about disability options and am currently looking into it) The whole document approves as valid HTML 4.01. The rough version im working on can be found at:

http://www.birdwatchnorthumbria.com/table%20tester2.htm

with it's CSS at:

http://www.birdwatchnorthumbria.com/defaults.css

view the source and please suggest a reason that these gaps appear.

CK

It looks just fine in Mozilla and IE for Mac. What browser are you using when you see the gaps? You might have to adjust for the buggy implementation of CSS in IE 5 for Windows, there are little tricks to do that.

Or, the reason it looks OK on the Mac might be because you use "pt" as the measurement for your fonts. This will always look smaller on a Mac (assuming you design your pages on Windows. If you design on a Mac, the fonts will look bigger on Windows, it's all relative), and the recommendation is to use "px" if you want it to look the same on different platforms, or even on different browsers on the same platform. Take a look at http://developer.apple.com/internet/fonts/ for specifics. The table will always expand to accommodate the text, thus the gaps with the bigger fonts.

And of course, since you are using CSS anyway, you could just place the image on the background of the body without slicing it, and leave it at that.

Oh, I see what you mean - when you use the browser's "View" menu to enlarge the fonts on the page. Yeah, that will happen. I don't think there is anything you can do about that, beyond avoiding tables for layout that is.

I got the same problems with my cornered tables.

Linux also shows pt font sizes smaller.

-- DoctorMO --

Using CSS for positioning will generally fix this problem. It's time consuming to convert a site but well worth it.

If you decide to take the plunge, I would recommend that you look at the CSS2 spec [http://www.w3.org/TR/REC-CSS2] as some parts of the box model are counter-intuitive. The spec itself is quite readable and fairly easy to understand.

I am using CSS-2, I found some of the CSS did help, but I still get problems with the text being too big.

-- DoctorMO --

If the user resizes it so that text would have to wrap mid-word, there's not much you can do...

You could try fewer, taller table cells with fewer, taller picture slices. Since the table cells will be bigger, when the font is enlarged the text may have room to flow without forcing the cell to stretch. But this is one of those details that you should not torment yourself with. Just accept that you can't have 100% control over the look of the page, and take solace in the fact that the gaps in the image are barely noticable unless you look closely.

what I did was do a span on top-bottom center cells, and use the hight of the extra cells below the corners as a buffer. it can make the rows a bit big, but it works.

-- DoctorMO --

I have heard that you can replace tables with CSS somehow, but I prefer tables

Doc, theoretically, if you put the text above the image using an image program, and then use the new image with the text on, you shouldn't have the problem of resizing table cells, as the cells are 'bulging' because the text size has been increased, although, because you're using CSS to manage the text sizes, and not HTML FONT tags, they stay the same size anyway - It may not work due to whitespace on the page if any, but it *should*

If you really can't stand the resizing, then you could try that

I used to prefer tables too but they're much less powerful and flexible than CSS layout. Tables are for data. DIVs and CSS are for layout.

Your recommendation about putting text into image files is a step in the wrong direction, I'm afraid. Navigation images are less accessible, less flexible, and slower than their text equivalents.

FONT tags are depreciated in favour of CSS text sizes - CSS is more flexible. The idea of CSS is to separate content (structure, i.e. HTML) from style (e.g. layout, colours, fonts). If you turn off styling, images, and Client side scripting (e.g. JavaScript), you should still be able to use the site. To see what I mean, go to your websites in the Lynx text based browser or by Telnetting to port 80 on the web server and typing GET /pagename.html. If you can't use the site like this, neither can anyone visually impaired.

As an added bonus with CSS over embedded styling, you can use the same CSS over multiple pages just by adding one tag to the header.

I know pure text is better than text on an image, but if CK was really desperate to not have the resizing, that seems to be a cure

I'd prefer to shy away from the method myself

an image would not be worth the time, I needed a flexable table system, although I've used DIV (with and with out tables) I just can't see how you could contruct a table with them, would you for instance use the DIVs for rows and the spans for cells? or is there some method to doing this with purly DIV elements, because If this solves a few problems, I'd like to try it out.

-- DoctorMO --

As far as I know, DIVs and SPANs are the same, although apparently one doesn't work in all browsers - I forget which now - I think its SPAN, but I also think its DIV, so that doesn't really solve anything

setting the position:absolute/relative and the actual X and Y positions (not sure of the CSS for this) in either of these tags positions it, so no more fiddly colspans and whatnot, although I still prefer tables - the 'easy' approach (at least when you don't know very much about CSS positioning )

hmmm, no very suitable then is it?

Span tags only go around the selected text, Divs take over a whole line.

-- DoctorMO --

Hm - Well that's webmonkey for you.. things..

No don't think of divs like you would tables. There are no rows and columns, only position. If you've used page layout software like Pagemaker or Quark Xpress, it's more like that. You have to divide your page into logical chunks (like "navbar", "menu", "header") and place the divs accordingly.

And there are some things tables can do that CSS can't. I still can't figure out how to make 3 columns of equal height using CSS and divs, when I want the height to equal the longest amount of text in any one of the columns. With tables, that's the default behavior.

Well, that's webdev for you, d'Elaphant - It's always impossible to be perfect, but one can try!

Making three columns of equal height wouldn't be hard if Microsoft would properly support min and max heights in Internet Explorer. This should be fairly easy to do in a browser that supports the whole CSS2 spec.

No constructing tables with DIVs allowed! :P That's what tables are for.

Seriously, tables are still useful - I can think of one proper use for tables: Tabular data. Go figure.

Oo! Oo! Illustrative example time!

Using DIVs:
http://ionizor.dhs.org/h2g2/div.html

and the CSS:
http://ionizor.dhs.org/h2g2/layout.css

The same page using tables instead:
http://ionizor.dhs.org/h2g2/table.html

Note: I've cheated a little because this is just a quick example - the float: right; on the content div in the DIV example makes the footer look goofy if you actually add content. For a layout example that works just about flawlessly, see: http://torstar.ionizor.dhs.org/msgcore.cgi

So view source on both of those and tell me which is more readable. Actually they're simple pages and they're probably about the same so you also must consider:

a) This code is simple. No nesting at all on the table side, and only one div with nested divs.

b) The table layout is static. You have to cut and paste nearly identical looking chunks of code to change the layout. The DIV version's layout can be changed by editing an external file.

c) The navigation bar in the table layout can't be repositioned without changing the code. In CSS I can tell the navigation bar to move to the left hand side of the page so that navigation doesn't interfere with the scrollbar and vice versa but the structure itself means that the navigation bar is read after the content they are interested in.

d) The CSS file that defines the display layout of one DIV page as above can be used for all others with the same id tags. When the CSS file changes, all the pages on your site reflect those changes without a hand edit. Tables have to be replicated in each page, so if you make a layout change you have to edit every file.

e) Table tags on sites beyond the very basic level of complexity will make the code significantly larger. The actual layout code for a complex site is smaller when you use DIVs and the CSS file only has to be downloaded once.

f) Screen reader software generally can't reads information in layout tables poorly.

g) There's no content in this page to would obscure the markup.