Forum Moderators: open
The frontpage I've built comprises a fairly large table - 12 rows, 21 columns - and I've come across an alignment issue testing in the main browsers.
In IE6 and Opera 7.5, everything shows as it should
However, in Netscape and Firefox, six or seven of the cells (the same cells in both browsers) are out of alignment by around 15 pixels or so.
Is there any reason for this? How can I get around it?
Thanks.
Please? I'm lost as to why this happens.
1. What's the DTD?
2. What elements are not aligned as you envision (images, text, forms)?
3. Is that misalignment vertical or horizontal?
4. Are you using any css rules? table, tr, or td attributes?
Its actually four images (not six!) that are out of vertical alignment.
I have built the page using layers first of all, and then converted them to tables using DW MX2004, so this might be a contributing factor, I dont know.
I'm not using css on this page, and as far as I can tell the table is constructed normally.
I didnt know what you meant by DTD but I recalled seeing it in another document I've built.
I've just pasted this code into the top of the page with the layout errors :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
and now everything is aligned OK : However, when the page first loads, the images appear to be spaced further apart, and then half a second later "jump" into the correct position.
What the heck is going on?
As you can probably gather, I'm new at this.
Here's a place to begin learning:
[webmasterworld.com...]
Should I have that code at the start of every page then?
[w3.org...]
When you are writing HTML to a specific DTD, then you can use the W3C's free validator to find errors that might cause problems with your page.
[validator.w3.org...]
When something isn't right about your page in this or that browser, the first step is to be sure the mark-up is valid. Once you're sure that there are no errors, then you can start working with browsers bugs and peculiarities. But if you "try to make it look right" on top of errors, you can become very confused, very quickly.
You are at the beginning of quite an adventure. There's quite a difference between using a wysiwyg editor, not understanding what the mark-up is all about, and becoming equipped with the knowledge that underlies the web.
Have fun - we're here for you!
However, when the page first loads, the images appear to be spaced further apart, and then half a second later "jump" into the correct position.
This usually happens when images do not have width and height assigned to them. Set the width and height on all images and the jumping will cease. You'll now see image placeholders until the images have loaded.
Out of interest, and a little bit off topic : what is the best editor to use? I hear dreamweaver getting a right slating in places, but what is the best tool for the job?
All my images on the page I've mentioned have height and width attributes, but the page still "jumps" into position every time it is loaded, and now it does it on all browsers.
Have I used the wrong DTD perhaps? Or is it something else that might be wrong?
I can supply a URL if anyone wants to take a look.
It's not neccesarily an indication that there's something wrong with your mark-up. Many modern browsers start rendering something on screen before all their internal calculations are done.
Thanks again.
