Page 1 of 1

[SOLVED] CSS Vertical Menu issues (a problem revisited)

Posted: Thu Feb 07, 2008 10:28 am
by glennrichards
Further to earlier note - none of this is necessary!!  My CS, TonyP's tweak because the problem is in the default CMSMS template.  The js for the menu should read if lte IE 6 not if IE - becasue IE7 doesn't need it to work just fine. 

Members TonyP and dstauth both identified an issue with IE7 displaying extra margin on menuparent on hover and TonyP provided a fix.  However, this now creates a problem for IE6 which previously worked just fine.  The IE6 issue is the reverse of course and doesn't give you the drops issue.

I tried to to fix this with a conditional statement in first the template header then in the globals but smarty doesn't like this.



#primary-nav li.menuparenth {margin-bottom: -2px; padding-bottom: 0px; }



Any thoughts on how I can add the statement?

And before anyone comments - IE6 represents about 30% of the browser market in the UK so still need to build for this.

Still on the CSS Vertical Menu - why do we have to use javascript to make it work in IE.  Can't we have a CSS menu using the whatever:hover attached to the IE specific behavior property - or one that doesn't need hacks?

Visit tanfa.co.uk and cssplay.co.uk to see how it's done (I'm not a whiz with PHP/MySQL else I'd have a go!)

Re: [SOLVED] CSS Vertical Menu issues (a problem revisited)

Posted: Thu Jun 12, 2008 5:16 am
by casidougal
Yes, this is an annoying problem.

To answer the question about getting your conditional style to work, just wrap it in literal tags . . . {literal} . . . {/literal}

Re: [SOLVED] CSS Vertical Menu issues (a problem revisited)

Posted: Thu Jun 12, 2008 8:18 pm
by Dr.CSS
IE6 doesn't understand the li:hover so it has to have JS to help...

Most of the CSS only menus like cssplays have weird calls like...


DEMOS






   
   

I've been asked to make a menu template for this before, personally it's just easier to use JS as most ppl. have it in the browser, it adds h or menuh to the end of the list/li to make it work...

If you have a strange/custom ul id instead of default you can change the call in the JS to reflect this...

var cssid = "primary-nav"; // CSS ID for the menuwrapper  this should be changed in the core to ul