Menu in table - help w. Mozilla + Firefox please

[mfrie01]

I've licensed the menu for a single client and have their site on my server for development. It's at http://www.cowlesgraphicdesign.com/vista1

Dropdown menus were a late request, and I'd developed a fixed width, left aligned site. I added the menu and everything worked fine, but I didn't like the menu moving as the page was resized. Now they want a centered page, so I built a menu in table cell according to the sample.

You'll see that the rest of the design is all CSS, with liberal use of divs, so everything gets shoved down by the table at the top of the page. I set the main div to a negative top position and it works fine with Dreamweaver testing on my machine in IE, Mozilla, Firefox. Once I uploaded to the test server IE and Safari work (Safari adds a little space at the top of the submenu, but not bad), but Mozilla and Firefox push the main div up above the top of the window. OK, maybe I do a box hack or something, but why does it work locally?

I've checked and rechecked but I'm stumped with this so I'm asking for help. The table layout is a real pain since it can't be in a div and I don't know how to test if it's different local and remote.

Thanks and happy Father's Day to all you dads.
Michael

[Ruth]

Hi,

First, on my desktop, Netscape shows the problem the same as on the web.

Now, I can't tell you why, since what I know about using css would fit through the eye of a needle, but I have a fix for it, and maybe that will tell you why it is doing it.

I changed your main div in the html to

Code: Select all

<DIV id=main style="border:1px solid transparent">

and in the vista.css changed the body margin to

Code: Select all

MARGIN: 10px 0px 0px -1px;

That fixed in in Netscape and Firefox on my desktop, and the -1px made sure there was no little 1px empty space where the border was, showing the white background through it. I have no clue why it works.

Ruth

[mfrie01]

Ruth,

Thank you for your modifications and prompt response. Again, everything seems to work fine locally, but when I tried them on the server the results are the same, with the main div displaying for a flash in position and then bouncing up. The menu is also shifted to the left.

Instead of negative positioning I'm going to play with negative margins. I'd use absolute positioning for the main div, but then I can't center it in the brower window. This may take some work!

[Ruth]

Well, you could always do what I do for everything....divs, tables, that I want to center. I just bracket the div with center tags. Works perfectly all the time.

I don't really know what it is you're trying to do. If you're just trying to have the site be centered all the time, then I would think that would be the way to go.

Ruth