Browsers Shifting Elements -- Ugh!

[Flameborne]

Alright -- attempting to put together this page for my business partner and I'm having some problems.

www.dedaananwarmbloods.com/Joie/SavanaPed.html

Anytime a "favorites" menu is opened, all of my JS elements shift off the table. If it is closed, they shift back. I am assuming that this is going to happen with browsers/monitors that are smaller than my own (and lemmie tell ya, I thought 17" was pretty standard these days!!)

It seems to be only the things that I have in an actual element. The straight HTML graphics / text are not shifting out of proportion.

I can't figure if this is a full-page problem, an element problem, or a table problem.

Can anyone recommend a fix, please?

Thanks!

[Ryan Fait]

Yikes! The code on this page is a nightmare. Why do you have all of that absolute positioning? It's hard to say what's wrong with such muddled HTML.

[Flameborne]

That's a particularly positive way to help troubleshoot.

The code is that way because it makes sense to ME. However, I am MORE than willing to listen to some constructive, helpful remarks to make it more easy to navigate through and get to the bottom of whether shifting elements is an element-based, table-based, or page-based issue.

[Flameborne]

Apologies for smarting off in response. However, that was particularly offensive and not exactly conducive to encouraging new designers to modify their techniques and learn more effective, condensed, ways of coding.

[Ryan Fait]

Er, sorry. I didn't really mean it to be rude, but it's just not very neat and tidy HTML.

Here's a few things you should do with the page in general terms:

• Add doctype to the page.
• You've got inline CSS strewn about through your pages. Take it an put it all in an external file. Take this: style="position: absolute; top: 434px; left: 239px; width: 118px; height: 195px; z-index: 15" id="element41" and make it just this id="element41". Then make a CSS file with this in it:
  

  Code: Select all

  #element41 {
      position: absolute;
      top: 434px;
      left: 239px;
      width: 118px;
      height: 195px;
      z-index: 15
  }

• The <font> tag has been depreciated. Use <p> with CSS styling. This <font face="Arial, Helvetica, sans-serif" class="size10" color="#2F4F4F"> becomes this:
  

  Code: Select all

  p {
      color: #2f4f4f;
      font-family: arial,helvetica,sans-serif;
      font-size: 1em;
  }

  All text wrapped in <p> tags would then be in arial with a font size of 1 em in that color.
• This is a poor method of alignment when used so many times: <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
• On a more extreme note, a solid XHTML and CSS driven website would allow you to drop the tables and run a more accessible website.

There are several more things, but take care of these and you'll be on your way.