Text jumping up and down in Firefox, but looks good in IE

[Gnocchi]

Please help:

I use tables for my site's layout. Everything looks fine in IE, but the menu bar's text on some pages jumps up and down in Firefox.

Here is one of the pages that has the problem:
http://www.shaydaphotoart.com/Htmls/...ection/wa1.htm

I have no idea how to fix this, as I made the pages in Dreamweaver, and know very little about HTML code and CSS.

I really appreciate if you can give some help.

Thank you.

[Blake]

I don't see the problem.

[mburt]

Hmm... I don't see a problem either. Could you say which version of FireFox you are using?

[jscheuer1]

The only real problem I see is that the page doesn't fit on a 1024px wide or smaller screen.

[Gnocchi]

I don't have Firefox on my computer, so I tested it with Netscape 8.0 and I saw the same problem.

If you didn't see it with Firefox, could you check the link with Netscape please?

Thank you very much.

[Gnocchi]

Sorry, I think I may have confused you with my description of the problem. When I said the menu text jumping up and down, I meant that on one page it was at the top right corner of the gray bar, and on another page, it jumped down to the middle of the bar, and so on.

It isn't jumping up and down in one page.

[jscheuer1]

Not too many folks use NS 8. It's rendering engine has flaws. If you were to view the page in its IE mode, things should be OK. You probably could work out the problem even in its FF mode though. It probably has to do with nesting of positioned elements but, I cannot be certain without more time to look into it. If I get a chance, or someone else does, we will get back to you.

[Gnocchi]

Thanks for the reply! Yes, I'm more concerned about the problem in FF mode than NS mode.

I've also thought that the problem had something to do with nesting, so although I'm just a novice, I've tried a few things:

1. At first I put all the menu text in a layer and relatively-positioned the layer to the table cell (I know it is sth like a <div> tag within a <td> tag), the mentioned problem appeared.

2. So I copied all the menu-texts, deleted the layer, put them directly into the table cell, but somehow there is still a <div> tag within the <td> tag, only this time there was no layer. Still was there the problem!

3. I then decided to get rid of all the <div> (I had no idea what it really was, but I just tried anything), put the texts directly into <td> without any <div>. Still was the problem!

Don't know what to do next. Hope to get some advice from you experts!

Thank you!

Gnocchi

[Blake]

My advise is to learn to code by hand with CSS/html. You'll constantly run into problems like this otherwise. The code made by html editors tends to be buggy and unreadable. When something goes wrong, its almost impossible to fix.

These tutorials are a good starting point:

http://www.w3schools.com/html/html_intro.asp
http://www.w3schools.com/css/css_intro.asp

Also, using CSS instead of tables to position elements makes for much cleaner code.

[Gnocchi]

Thank you, Blake, for the advice. This is the second website that I've built, the first one runs fine. I thought I wouldn't have to go deep into coding to make simple sites (I'm an artist, not a real web developer), but I realize now that I may have to, in order to solve problems like this. Thanks for the links to the tutorials also. It's very helpful!

So do you think that it's not possible to fix the problem on my current site unless I remake it using CSS instead of tables?