Forum Moderators: open
<Sorry, no personal URLs. See TOS [webmasterworld.com]>
Might this have something to do with the absence of padding? I created layout cells that were the exact dimensions of the animated gifs. Everything lines up perfectly in Dreamweaver, but gets misaligned in a browser.
Any help would be greatly appreciated.
Yours,
Buddy Grizzard
[edited by: tedster at 11:24 pm (utc) on April 19, 2004]
Imagine how much help this site could be
Now... to answer the actual question ;)
The problem might be two things, depending on what you mean when you say "misaligned".
1) You have not reset the default cellspacing or cellpadding. In most browsers they default to two pixels.
2) Images are inline elements, which means that they rest on the baseline of inline content. This usually results in a space below the image, even though the rest of the cell fits snugly around it. The reason for this is that all baseline content will leave room for the descenders on letters like p q y j g. To avoid this problem, specify the vertical alignment (using CSS or the valign attribute on the image) as "bottom".
And, last but not least, Welcome to Webmaster World!
Disclaimer:
If you are using a table to control the placement of graphics, you can run into several problems, which is why CSS was created. Obviously you are new to web design, so maybe CSS is more than you can bite off for now, but I thought it would only be fair to warn you that using tables for layout causes problems for even the best web developers.
However, tables can still be levereaged successfully if you follow some of these concepts:
1. Don't mix % and px. within the same table. If you have a table set to 100% width, don't set a cell within the table to be a fixed pixel width. Dreamweaver will let you do it, but it tends to be buggy when rendered by various browsers. Keep all cells %'s if your table is a % width (and height) table. Similarly, make all cells px's if your table is a fixed pixel width (and height) table.
2. If you want your table to be invisible and work simply as a grid to the define location of graphics, then set the tables padding, spacing, and border to "0". If you don't specifically define it, the browser might do it for you.
3. If you set up your table with fixed pixel dimensions and then use colspan or rowspan, you may loose your fixed dimensions for the cells involved in the colspan and row span. The work around here is to use nested tables. For example, if you have a 2 column wide table that is 2 rows high, and you set the top row of the right column to be 10 px high and the bottom row to be 50 px high, it should work just fine. But, if you span the two rows on the left column to work as a single cell, many browsers will set the row heigth to be equal, rather than the 10 px and 50 px sizes you chose. The way around this would be to create a 2 column table 1 row high and nest a table 1 column wide and 2 rows high in the right column of the parent table.
Hopefully these tips help. I have worked with tables for years and there are a lot of unspoken tricks to getting them to behave. Feel free to send me a sticky mail message if I can be of further assistance.
