We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Problem with CSS in Andreas00 template

    • 31051
    • 23 Posts
    Unforgiven Reply #1, 16 years, 6 months ago
    Hi,

    I’ve installed modx with the Andreas00 template. So far so good...I want to edit the menu to get a vertical fly-out menu eventually.
    However, I run into a problem. I want to edit the css of the menu, but for example the ’list-style:none’ for the whole <ul> is not reflected in the menu. I would expect the bullets to dissapear, but this is not the case. Any one can help me out on this ?

    The site is http://www.kwestievan.nu.

    The css concerning the menu is:

    #leftside {clear:left; float:left; margin:0 0 10px; padding:0; width:150px;}
#leftside ul {list-style:none; margin:0 0 18px; padding:0; width:150px;}
#leftside ul li {display:inline; padding:0; width:150px;}
#leftside ul li a {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; border-bottom:1px solid #d8d8d8; border-left:4px solid #ccc; border-right:1px solid #d8d8d8; border-top:1px solid #d8d8d8; color:#505050; float:left; font-size:1em; font-weight:700; margin-bottom:5px; padding:5px 1px 5px 5px; text-decoration:none; width:138px;}
#leftside ul li a:hover,#leftside ul li a.current {background:url(img/menubg2.gif) repeat-x bottom left #eaeaea; border-bottom:1px solid #b0b0b0; border-left:4px solid #505050; border-right:1px solid #b0b0b0; border-top:1px solid #b0b0b0; color:#505050;}
#leftside ul ul {font-size:0.9em; margin:0 0 0 15px; padding:0 0 5px 0; width:133px;}
#leftside ul ul a {padding:3px 1px 3px 5px; width:123px;}
#leftside ul ul ul {font-size:1em; width:120px;}
#leftside ul ul ul a {width:108px;}
#leftside h2 {font-size:1.5em; font-weight:400;}
#leftside .announce {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; border-bottom:1px solid #d8d8d8; border-left:4px solid #ccc; border-right:1px solid #d8d8d8; border-top:1px solid #d8d8d8; clear:left; color:#505050; line-height:1.3em; margin:10px 0; padding:5px 5px 5px; width:134px;}
#leftside p,.announce p {font-size:0.9em;}


    Cheers,
    Andy
      • 15152
      • 360 Posts
      jwmsales Reply #2, 16 years, 6 months ago
      Andy
      Not sure what you’re asking. The list doesn’t have any bullets in the link you sent and there is the list-style: none declaration in the CSS - second line down.
        There are no boring projects. Only boring executions. ~ Etzkorn
        www.impress-design.com
        • 31051
        • 23 Posts
        Unforgiven Reply #3, 16 years, 6 months ago
        Hi,

        I’m really getting confused of this whole wayfinder & css stuff....
        Anyway...If you click on one of the links, the bullets appear.
        So, my questions right now are:

        - Where does the inconsistency come from ?
        - How do I fix it ?

        I have spent days already to create a vertical-flyout menu, like the one on the site of muddydogpaws ( http://www.muddydogpaws.com/development/wayfinder/examples/example-6.html )
        So far, I’ve been stuck on getting my css changes to reflect in the site, let alone creating the flyout-menu.
        I’m getting desperate, so if anyone could lend me a hand on this, would be appreciated a LOT !.

        cheers,
        Unforgiven
          • 28042 ☆ A M B ☆
          • 24,524 Posts
          sottwell Reply #4, 16 years, 6 months ago
          I don’t get any bullets. However, on the inner pages, I don’t see the opening UL...
          	<div id="leftside">

		<h2 class="hide">Sample menu:</h2>
		<li >
<a  href="/index.php?id=3" title="weekmenu's" >Weekmenu's</a>
<li >
<a  href="/index.php?id=14" title="test" >test</a>

</li>

          The home page is different...
          		<ul class="navigation"><li><a href="/index.php?id=3" title="weekmenu's" >Weekmenu's</a></li>
<li><a href="/index.php?id=4" title="Kant en klaar maaltijden" >Kant en klaar maaltijden</a></li>
<li><a href="/index.php?id=5" title="Bereken uw ideale gewicht" >Bereken uw ideale gewicht</a></li>
<li><a href="/index.php?id=6" title="Nieuws" >Nieuws</a></li>
<li><a href="/index.php?id=7" title="forum" >forum</a></li>
<li><a href="/index.php?id=8" title="Online diëtiste" >Online diëtiste</a></li>

<li><a href="/index.php?id=9" title="Korting" >Korting</a></li>
<li class="last"><a href="/index.php?id=16" title="Bestelformulier" >Bestelformulier</a></li>
</ul>

          That missing <ul class="navigation"> is breaking your menu in the inner pages. You should always run a page through the W3C Validator if you’re having styling problems. 9 times out of 10 it’s something like this.

          http://validator.w3.org/check?uri=http%3A%2F%2Fwww.kwestievan.nu%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

          The error on the home page is just the target="_blank" in a link XHTML foolishness.

          But the inner pages...

          http://validator.w3.org/check?uri=http%3A%2F%2Fwww.kwestievan.nu%2Findex.php%3Fid%3D4&charset=%28detect+automatically%29&doctype=Inline&group=0

            Studying MODX in the desert - http://sottwell.com
            Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
            Join the Slack Community - http://modx.org
            • 31051
            • 23 Posts
            Unforgiven Reply #5, 16 years, 6 months ago
            Hi,

            thanks for the tip !

            Woah...61 errors....
            Well..let’s see if I can get them fixed...*sigh*....this site should go live this week...and I’m not near half finished...

            cheers,
            Unforgiven
              • 31051
              • 23 Posts
              Unforgiven Reply #6, 16 years, 6 months ago
              OK,

              Solved one issue with the menu, it appeared that the opening <ul> was missing in the chunk ’outer’ which Wayfinder uses.
              So, let’s see if I can fix some more smiley

              cheers,
              Unforgiven