[Pro] Firefox squishes my CSS Menus upwards

Can anyone tell me why Firefox does this to my site?

Everything looks fine in Safari, but Firefox ‘slides’ the CSS Menu boxes upwards, sometimes overlapping. (It also slides my AddThis box up too).

This is my test site … only look at the first page (Ritz) :

http://homepage.mac.com/grantsymon/Sites/sF/e/ritz.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay … I can answer some of my own question.

I’ve used the Relative Page Layout Action on a test page and it fixes the Firefox problem.

But before I delve into totally re-doing my site with this Action … (which means putting some things on layers, plus my site is in 2 languages and and and … it’ll take probably a couple of hours) … can anyone tell me if there are any disadvantages to making my site with this Action? My site is pretty simple so I’m wondering if there would be any long term advantage to just biting the bullet and start from scratch? It’ll take a day I guess. If so there are advantages, then is there anything I should look out for to avoid? I’ve never done a CSS version of my site and to be honest, I have no idea what the implications of it are … or even … what it means!

Any help much appreciated on this!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

So, to answer my other questions … it isn’t enough for Firefox, to just set everything as a layer. I had to run the Relative Page Layout Action on all my pages.

Once I’d fixed the several bits that I’d missed, that weren’t set as layers, then it uploaded without errors and Firefox is happy.

Of course I still don’t know if this is a good way to build my site … but if it works, then it must be okay.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The main structural consideration about building a site with CSS positioning is that you have to be aware that different Browsers/Platforms will display text at different sizes.

In a CSS positioned site this can mean that these ‘layers’ can expand and overlap one another. It is easy to see this for yourself.

Look at your site using Safari. In the View Menu enable ‘Zoom Text Only’.

Now use Cmd+ (do it a couple of times) to increase the text size. Look again at your page. Anything overlapping?

Using px to define your text size can help across browsers/platforms, as can leaving a bit of wriggle room (for expansion).

The best method to avoid this ‘overlap’ is to build your site using an inline method - sometimes referred to as ‘the Box Model’ - but it is not easy to do!

FW provides the RPL action which endeavours to create this inline construction for you but it is not fool proof.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Dave. This has all been extremely helpful.

I have found that I have to use the FW Action that excludes Relative Page Layout, on my iFrames, otherwise they ‘wrap’ when text size is increased. But all my pages now work very well in all browsers, unless, someone is pushing the limits with ‘Zoom Text Only’, which is pretty unlikely on my type of site.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options