Help with css layout issue...

Hi,

I’m re-designing an existing MODX site and have just started using the WayFinder snippet to generate a menu. This is styled by a menu from cssplay (http://www.cssplay.co.uk/menus/latest-flyout.html).

My problem is that the css styles for the menu is making my existing layout wonky (content div is shifted down and to the left).

If anyone has the time to have a look and suggest some fixes I would be very grateful - this one has me stumped!

Page: http://www.friendsofroshni.co.uk/index.php?id=24
CSS (menu css is under copyrighted section): http://www.friendsofroshni.co.uk/new_roshni.css

Thanks,

James.

I would suggest fixing your validation errors first. Once you do that post back and I will take a second look for ya.

You can use this link to validate CSS... http://jigsaw.w3.org/css-validator/

Quote from: AMDbuilder at Nov 08, 2009, 08:48 PM

I would suggest fixing your validation errors first. Once you do that post back and I will take a second look for ya.

Ah - thanks for spotting that - all validated now.

Hi jimjamyaha.....


I had a similar problem with Wayfinder... and the way Wayfinder works is similar to using <ul> (a list)
If you have two Wayfinder calls... then you get it the next one below....

You could try putting display:inline; in here....



you could also make the menu text size smaller...
That might fix the main page... at http://www.friendsofroshni.co.uk/index.php?id=1

I still show validation errors (http://validator.w3.org/check?uri=http://www.friendsofroshni.co.uk/index.php?id=24&amp;doctype=Inline) These are likely causing the problem so please fix them first so we can eliminate them as the cause of the problem.

I agree. Those are serious HTML errors that could definitely confuse a browser.

There are a number of these:



I would take out all the self-closing tags (change ’/>’ to ’>’) on the divs and close them explicitly with a </div> tag.