CSS Menu Problems on Safari/IE for Mac

Not sure what you're veiwing it on when you say "looks ok on PC" but it doesn't look too hot on FF, no image either ! and the menu does not look quite right.

Before you can really determine whether you actually have problems you must ensure that you have VALID MARKUP!! honestly it really does help. Have a look at the ul menu structure as it's not correct, if you are nesting ul lists then the list parent should be unclosed then the child ul starts and finishes then you can close out the parent list. You also seem to have a an extra or missing div (can't remember which).

Fix up the errors then repost so that we can have another look and see if there are still problems.

Hugo.

HI Hugo,

Thanks for the comments. I have altered the Markup and it validates now. It all looks OK in IE6/Win and I did notice that it breaks down in FF/Win, no idea why. I expect - although can't check - that the problems still remain in Safari/Mac & IE/Mac...?

Advice greatly appreciated

Andy

Yep it looks as though it validates , but you now need to look at what you are actually doing with the top most element as it is a bit of a jumble.

For starters you have no image as your masking it out with the .four div the contents of which you have commented out of the markup. Remove that div as it seems to serve no purpose and you'll have your banner image.

For the rest of that area may I suggest that you follow a modicum of convention as to structure and naming as for someone like myself trying to understand your markup it makes no sense. Naming things .six, .one, .four is meaningless, for the sake of clarity rename .six to #header and use this to group all the elements for the Header area! next in the flow is your #navtop which should be fine then your image which you could try setting to display:block and loosing the div holding it as it unnecessary, then close out the #header as you have problems with the navigation at the bottom with it nested it will probably be simpler to flow the main nav in it's ul the full width of the wrapper then arrange the li,a elements within it; again the div called #mainmenu isn't really necessary the ul should be sufficient as the container for these elements.

Something close to or along those lines will give a better structured markup and if you observe some naming conventions you then you fulfil one of the points of CSS in that it is supposed to be easy for anyone with sufficient skill to take over and work with so ID's and classes need to have some meaningful naming to describe their purpose; also when closing out grouping divs just add a comment after so that it is clear what is being closed i.e:

Last but not least you should not be using the
tag in this fashion you create space by using margins or padding and if you need to clear an element then use the clear property in the CSS

Hugo.

HI Hugo,

I have made some alterations - although I almost resorted to tables, a step too far methinks. I have posted to sonsofgalloway.org.uk/index_v2.htm and an associated css file. I would be grateful for any advice.
I seem to have lost part of the main image and also the bottom line of the navigation menu (Win/FF). Adding a number of "br style="clear:both;"" would seem to resolve in Win/FF but surely this is an abuse of the "br"? And would knock it all to hell in IE. I guess positioning the div in css is the way to go? If so, relative or absolute bearing in mind the rapper is relatively positioned? ** edit: just read your post about the height. Must have done this accidentally(?). Deleting it seems to replaced the flow.**
I wondered whether you could explain more upon the lack of requirement of the "mainMenu" div? Should the formatting set there be copied to the ul menuList id?
Unable to check Mac browsers, but one step at a time I suppose.

Many thanks your advice is greatly appreciated.

Andy

Why have you made the #header height:20px ? remove that height and maincontent should position itself in the flow properly, below header and it's children.

As a rule of thumb avoid setting heights on things as part of the natural order is that elements should expand with content setting height in pixels fixes height to that size, rigid in all except IE which incorrectly always expands fixed height.

The main menu doesn't really need that div holding it a ul element is a container, you should be able to place any rules required directly on the ul itself.

Hugo.

Any additional comments are welcomed. The site is very much in development.

Cheers
Andy

Strange I could have sworn my last comment here was in reply to yours they look to be in reverse order though.

The mainmanu div is not needed really the ul is a containeryou should be able to place any rules required on it.

Hugo.

HI Hugo,
The replies do seem to have got jumbled somehow. I was getting a bit lost...lol. I have been using www.browsershots.org to try to visualise the pages in other browsers too.
I'll transfer formatting of the mainmenu to the ul and see what happens. It'll get there in the end.... hopefully...

Cheers
Andy