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/Photo%20section/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. :confused:

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

[Blake]

It's definitely possible to fix your current layout, but it would be very difficult. There's a lot of code there, and since it was not written by a human being, it's not very readable. Considering the effort that it would take, I think you would be better off learning html and css. It's not as hard as you might think, and you can always ask questions here.

[jscheuer1]

Looking at this further, it appears that the content:


<div align="right">
<p class="menu" align="right"><a href="../Photo%20section/portrait1.htm" class="menu">portrait</a>&nbsp;&nbsp;</p>
<p class="menu" align="right">documentary:&nbsp;&nbsp;<br>
<span class="submenu"><a href="../Photo%20section/wa1.htm">west africa&nbsp;&nbsp;<br>
</a><a href="../Photo%20section/ea1.htm" class="submenu">east asia&nbsp;&nbsp;</a><br>
<a href="../Photo%20section/oxf1.htm" class="submenu">the oxford hotel&nbsp;&nbsp;</a></span></p>
<p class="menu" align="right"> irresistible horizons:&nbsp;&nbsp;<br>
<span class="submenu"><a href="../Photo%20section/desert1.htm" class="submenu">utah desert-scapes</a>&nbsp;&nbsp;</span></p>
<p class="menu" align="right"> <a href="../Photo%20section/aboutphoto.htm" class="menu">about the photography</a>&nbsp;&nbsp;</p>
<p class="menu" align="right"><a href="../Photo%20section/travellinks.htm" class="menu">travel links</a>&nbsp;&nbsp;</p>
<p class="menu" align="right"><a href="../../index.htm" class="menu">home</a>&nbsp;&nbsp;</p>
</div>

Belongs in a td farther up the page:


<table border="0" cellpadding="0" cellspacing="0" height="628" width="1024">
<tbody><tr>
<td colspan="5" bgcolor="#ff9900" height="5"><img src="../../Images/b1.gif" height="4" width="1024"></td>
</tr>
<tr>
<td bgcolor="#dd1b1b" height="103" width="187">&nbsp;</td>
<td rowspan="6" bgcolor="#ff9900" height="600" width="35"><img src="../../Images/b3.gif" height="601" width="35"></td>
<td colspan="3" height="103"><img src="../../Images/b4.jpg" height="103" width="802"></td>
</tr>
<tr>
<td rowspan="2" bgcolor="#7b7b7b" height="15" width="187">&nbsp;</td>

And, that it should be changed like so:


<td rowspan="3" valign="top" bgcolor="#7b7b7b" height="15" width="187">
<div align="right">
<p class="menu" align="right"><a href="../Photo%20section/portrait1.htm" class="menu">portrait</a>&nbsp;&nbsp;</p>
<p class="menu" align="right">documentary:&nbsp;&nbsp;<br>
<span class="submenu"><a href="../Photo%20section/wa1.htm">west africa&nbsp;&nbsp;<br>
</a><a href="../Photo%20section/ea1.htm" class="submenu">east asia&nbsp;&nbsp;</a><br>
<a href="../Photo%20section/oxf1.htm" class="submenu">the oxford hotel&nbsp;&nbsp;</a></span></p>
<p class="menu" align="right"> irresistible horizons:&nbsp;&nbsp;<br>
<span class="submenu"><a href="../Photo%20section/desert1.htm" class="submenu">utah desert-scapes</a>&nbsp;&nbsp;</span></p>
<p class="menu" align="right"> <a href="../Photo%20section/aboutphoto.htm" class="menu">about the photography</a>&nbsp;&nbsp;</p>
<p class="menu" align="right"><a href="../Photo%20section/travellinks.htm" class="menu">travel links</a>&nbsp;&nbsp;</p>
<p class="menu" align="right"><a href="../../index.htm" class="menu">home</a>&nbsp;&nbsp;</p>
</div>
</td>

This may cause problems on some pages or in some browsers if the row that this content is moved from is not removed but, it may not. It may even need to remain.

[Demonicman]

wow some of the picture on that site turn me on :P

[Gnocchi]

John, I don't understand your message at all! :(

[jscheuer1]

John, I don't understand your message at all! :(

That's an awfully broad statement. Where did I lose you? Was it at:


Looking

or somewhere later on?

[Gnocchi]

John, sorry, I didn't understand what you said at the bottom:
"This may cause problems on some pages or in some browsers if the row that this content is moved from is not removed but, it may not. It may even need to remain."

I read your message over and over, and I guessed you suggested to bring the code of the menu bar up to another <td> above it. So I've tried that. And it didn't work.

If you have time, could you pls explain it to me a little bit more?

Thank you very much!

Gnocchi

[jscheuer1]

That's OK. Don't worry about it. I was using FF's developer's extension and editing the HTML in it. However, when I copy your page's source and try the same thing, even though it does work out really well in FF, it messes things up a lot in IE.

So, I guess the page needs a complete redesign.