[Pro] CSS Menu and IE

Hello

I wonder if anyone can spot why IE messes up the CSS menu on this site

I wondered if it was a layer problem but as this site is built with the box model it seems I can’t reorder layers to make the menu appear on top (if that was a solution).

The submenus get masked by the the lower text boxes. I’ve investigated various threads and tried solutions such as the background colour in the action and anything else I could find but no joy. Firefox on Mac and PC works just fine (of course). I’ve been trying to get the index page to work so try that - it may be slightly altered compared to the others but visually and functionally all is OK in firefox and Safari in all the pages.

Thanks very much


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

I had a similar problem with a site. I had to construct the ‘header’ section containing the menus in a conventional non box-model CSS positional layout, and then make the body content of the pages in a separate box-model setup. The menu section was never going to need to move anywhere so it was OK to be positioned absolutely via CSS.

This allowed me to bring the top section with the CSS menus to the top in the layering structure.

Your site works OK in IE8 Beta - maybe there is some hope for IE then!


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

Thanks Ian

A bit more playing around has got the layer to the top and the menu now appears in full but suddenly it displays a couple of other problems.

In IE (running in Parallels XP) the menu appears but the drop down will not remain when hovered over. One has to click on the top item, hold and drag onto the dropdown and then navigate to the required section. Not good.

Also the position of the menu items box appears to be handled differently by IE and Firefox/Safari. The page I’m experimenting on is the Contact us page accessed via the footer bar.

http://www.sunset-designs.com/sunset-designs-contact-det.html#

also a screengrab of the layout here

http://www.petemackenzie.co.uk/sdcssmenu.tiff

What happens is that the whole menu shifts to the left in one or other of the browsers depending on the positioning setting in the Inspector. If I make the 150px dimension active all is well in FF but not IE. If I deactivate the same position box the menu shifts left in FF but is ok in IE.

Nice to know that IE8 might handle things the same as the others but I might not have much hair left by then…


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

On 10 Mar 2009, at 10:25, petemac wrote:

In IE …the drop down will not remain when hovered over.

This is a noted problem and usually occurs when you have no background
to your menu titles. The fix is to add a background by choosing a
transparent gif.

See: http://www.softpress.com/kb/questions/140/Are+your+CSS+Menu's+submenus+disappearing+in+Internet+Explorer+7+and+Opera%3F

Colin


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

Colin

Thanks for the tip re the transparent gif. That’s the dropdown sorted (lots of boring plodding through Actions boxes on every page ahead…).

Now just got to get that positioning thing nailed.

Pete


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

Hi,

Upgrading to 5.3.2 will do this fix automatically (the transparent gif).

Best regards,

Joe Billings
Softpress Systems Ltd.

Freeway. Web design for designers.
http://www.softpress.com

On 10 Mar 2009, at 11:04, “petemac” email@hidden wrote:

Colin

Thanks for the tip re the transparent gif. That’s the dropdown
sorted (lots of boring plodding through Actions boxes on every page
ahead…).

Now just got to get that positioning thing nailed.

Pete


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


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

Doh! now you tell me… :slight_smile: - just been through all the pages.

OK I’m off to get the upgrade. I was still on 5.3.1


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

Now if you had had your menu on a master page, one change would have
done them all!

Colin

On 10 Mar 2009, at 11:30, petemac wrote:

Doh! now you tell me… :slight_smile: - just been through all the pages.


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

Colin

if only… the box model doesn’t work with masters. I’ve got one set up but discovered that it is pretty useless in this case. It only works as a template for new pages but can’t update changed ones. :frowning:


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

Going back to the positioning problem - it appears that Firefox/Safari and IE are interpreting the distance from the edge of the page differently. The CSS menu box is set to 150px for left edge of box to left edge of page/container and this works for IE. If I set it to 230 it looks better in Firefox but the whole box has moved to the right in IE.

Is this something to do with the underlying layers? Everything is within one main container box but the menu is now on the top layer. When I had it inserted into the topstrip graphic box it held its position properly but the dropdown was obscured by the following objects in the box model. Now that it is “loose” it is playing up.


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

On 10 Mar 2009, at 12:01, petemac wrote:

… the box model doesn’t work with masters.

Should have remembered that! Something else to ‘master’ when I start
my first box model site, later this week.

Colin


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

Had a sudden recollection that one can use percentages aswell as pixels in the measurement units. Entering 20% for distance from edge creates an acceptable compromise in the way the different browsers place the menu - not exactly the same but good enough in this instance.

And the dropdowns are all visible so I’m going for a lie down…

thanks for all help on these issues.

Pete


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