homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Browsers / Opera Browser Usage and Support
Forum Library, Charter, Moderator: open

Opera Browser Usage and Support Forum

Table alignment issue in Netscape and Firefox
Looks fine in Opera and IE

 1:19 pm on Jun 21, 2004 (gmt 0)

Hi peeps - quick question I'm sure someone can answer for me.

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?




 12:56 pm on Jun 22, 2004 (gmt 0)

Anyone help?

Please? I'm lost as to why this happens.


 1:27 pm on Jun 22, 2004 (gmt 0)

We need more information, I think.

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?


 1:40 pm on Jun 22, 2004 (gmt 0)

Thankyou -

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.


 1:55 pm on Jun 22, 2004 (gmt 0)

Ok something very odd has happened.

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.


 2:00 pm on Jun 22, 2004 (gmt 0)

By using a complete Document Type Declaration (one that includies the URL) you changed the rendering mode of the browsers from Quirks Mode to Standards Mode.

Here's a place to begin learning:


 2:10 pm on Jun 22, 2004 (gmt 0)

That is extremely helpful, thanks a lot.

Should I have that code at the start of every page then?


 2:31 pm on Jun 22, 2004 (gmt 0)

Yes, it's a good idea to have one of the DTD's to begin every page. There are several possibilities, and each one is different -- and there are reasons for each one. Here's the complete list for the W3C (the standards body for HTML):


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.


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!


 2:34 pm on Jun 22, 2004 (gmt 0)

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.


 2:48 pm on Jun 22, 2004 (gmt 0)

Thanks very much for all your help.

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?


 7:37 pm on Jun 22, 2004 (gmt 0)

What I do is write my HTML in an editor (Homesite) and monitor the appearance in an actual browser (or 3) as I go along. I usually monitor in Opera, Firefox and Explorer as I compose the page, trying not to bury any mistakes in a complication as I go along.


 9:18 am on Jun 23, 2004 (gmt 0)


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.


 12:07 pm on Jun 24, 2004 (gmt 0)

first thing that struck me is...do you have the right number of colspan and/or rowspan?


 12:27 pm on Jun 24, 2004 (gmt 0)

Yeah I'm pretty sure thats OK. It just seems to be out by, like, 10 or 20 px for literally a split second, then "jumps" into correct alignment on the screen.


 7:48 pm on Jun 24, 2004 (gmt 0)

That sounds like a common rendering situation on modern browsers - I see it all the time. A few versions of recent browsers nearly made me seasick.

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.


 7:07 am on Jun 25, 2004 (gmt 0)

OK, thanks guys. Havent been able to find anything obviously wrong with it, and funnily enough when tested in IE5 compared to IE6, and an earlier version of Netscape, it doesnt do it, so I guess you're right Tedster.

Thanks again.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Browsers / Opera Browser Usage and Support
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved