Welcome to WebmasterWorld Guest from 54.162.239.134

Forum Moderators: open

Message Too Old, No Replies

Table alignment issue in Netscape and Firefox

Looks fine in Opera and IE

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

10+ Year Member



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?

Thanks.

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

10+ Year Member



Anyone help?

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

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

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

10+ Year Member



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)

10+ Year Member



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)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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:
[webmasterworld.com...]

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

10+ Year Member



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)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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):

[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!

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

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

10+ Year Member



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)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

10+ Year Member



Thanks.

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)

10+ Year Member



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)

10+ Year Member



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)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

10+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month