Loading ...
Sorry, an error occurred while loading the content.

Help with CSS --- Inheritance problems .... cannot see links in drop down

Expand Messages
  • dpasseng
    Message 1 of 16 , Feb 11, 2006
    View Source
    • 0 Attachment
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
      <head>

      <style type="text/css">

      /* without text */
      #menu {display:block; height:24px;}
      #menu ul {margin:0; padding:0; list-style-type:none;}
      #menu li {float:left; margin-right:1px; display:block; width:auto;
      border:1px solid #000;}
      #menu li.list1 {background:transparent url(menu_images/home_off.gif)
      no-repeat; width:87px;}
      #menu li.list2 {background:transparent url(menu_images/forum_off.gif)
      no-repeat; width:118px;}
      #menu li.list3 {background:transparent url(menu_images/moving_off.gif)
      no-repeat; width:125px;}
      #menu li.list4 {background:transparent url(menu_images/living_off.gif)
      no-repeat; width:117px;}
      #menu li.list5 {background:transparent
      url(menu_images/activities_off.gif) no-repeat; width:137px;}
      #menu li.list6 {background:transparent url(menu_images/store_off.gif)
      no-repeat; width:91px;}
      #menu li.list7 {background:transparent url(menu_images/travel_off.gif)
      no-repeat; width:118px;}

      /* this next line is the problem ... it is killing the links in the
      drop down as well as in the
      top links in the line it is designed to hide */
      /*#menu a {display:block; padding-top:24px; height:0; color:#000;
      text-decoration:none; overflow:hidden;}
      * html #menu a:link, * html #menu a:visited {height:24px; he\ight:0;}*/

      #menu a#item1 {background:transparent url(menu_images/home_off.gif)
      no-repeat; width:87px;}
      #menu a#item2 {background:transparent url(menu_images/forum_off.gif)
      no-repeat; width:118px;}
      #menu a#item3 {background:transparent url(menu_images/moving_off.gif)
      no-repeat; width:125px;}
      #menu a#item4 {background:transparent url(menu_images/living_off.gif)
      no-repeat; width:117px;}
      #menu a#item5 {background:transparent
      url(menu_images/activities_off.gif) no-repeat; width:137px;}
      #menu a#item6 {background:transparent url(menu_images/store_off.gif)
      no-repeat; width:91px;}
      #menu a#item7 {background:transparent url(menu_images/travel_off.gif)
      no-repeat; width:118px;}


      #menu a#item1:hover {background: url(menu_images/home_on.gif)
      no-repeat; z-index:50; width:87px;}
      #menu a#item2:hover {background: url(menu_images/forum_on.gif)
      no-repeat; z-index:50; width:125px;}
      #menu a#item3:hover {background: url(menu_images/moving_on.gif)
      no-repeat; z-index:50; width:125px;}
      #menu a#item4:hover {background: url(menu_images/living_on.gif)
      no-repeat; z-index:50; width:117px;}
      #menu a#item5:hover {background: url(menu_images/activities_on.gif)
      no-repeat; z-index:50; width:137px;}
      #menu a#item6:hover {background: url(menu_images/store_on.gif)
      no-repeat; z-index:50; width:91px;}
      #menu a#item7:hover {background: url(menu_images/travel_on.gif)
      no-repeat; z-index:50; width:118px;}


      * html #menu a:hover {height:24px; he\ight:0;}

      #menu div.popup { background-color: #cdd7e1; color: #003366; }
      #menu div.popup a:hover { background-color: #666666; color: #ffffcc; }
      #menu li:hover div:first-child { border-top: 5px solid #fff; }
      #menu div.popup { display: none; }
      #menu li:hover div.popup {
      z-index:60;
      display: block;
      background-color: #cdd7e1;
      color: #f0f;
      }
      #menu div.popup a:hover {display:block; color:#fff; text-decoration:none;}
      * html #menu a:link, * html #menu a:visited {height:24px; he\ight:0;}




      </style>
      </head>

      <body>
      <div id="wrapper">
      <div id="menu">
      <ul>
      <li class="list1"><a id="item1" href="#nogo" title="Item 1">Item
      1</a></li>
      <li class="list2"><a id="item2" href="#nogo" title="Item 2">Item
      2</a></li>
      <li class="list3"><a id="item3" href="#nogo" title="Item 3">Item 3</a>
      <div class="popup">
      <a href="huh.txt">why this link</a><br>
      test why are these on their own lines?<br>
      <a href="#">One fish</a><br>
      <a href="#">Two fish</a><br>
      <a href="#">Red fish</a><br>
      <a href="#">Blue fish</a><br>
      </div></li>
      <li class="list4"><a id="item4" href="#nogo" title="Item 4">Item 4</a>
      <div class="popup">
      <a href="#">One fish</a><br>
      <a href="#">Two fish</a><br>
      <a href="#">Red fish</a><br>
      <a href="#">Blue fish</a><br>
      </div></li>
      <li class="list5"><a id="item5" href="#nogo" title="Item 5">Item 5</a>
      <div class="popup">
      <a href="#">One fish</a><br>
      <a href="#">Two fish</a><br>
      <a href="#">Red fish</a><br>
      <a href="#">Blue fish</a><br>
      </div></li>
      <li class="list6"><a id="item6" href="#nogo" title="Item 6">Item 6</a>
      <div class="popup">
      <a href="#">One fish</a><br>
      <a href="#">Two fish</a><br>
      <a href="#">Red fish</a><br>
      <a href="#">Blue fish</a><br>
      </div></li>
      <li class="list7"><a id="item7" href="#nogo" title="Item 7">Item 7</a>
      <div class="popup">
      <a href="#">One fish</a><br>
      <a href="#">Two fish</a><br>
      <a href="#">Red fish</a><br>
      <a href="#">Blue fish</a><br>
      </div></li>
      </ul>
      </div>
      </div>

      </body>
      </html>
    • sisterscape
      I have used CSS dropdowns (see http://www.prodigytek.com and a test page - http://www.strawbalehouse.com/new/verdana.html) but still have a hard time wrapping
      Message 2 of 16 , Feb 11, 2006
      View Source
      • 0 Attachment
        I have used CSS dropdowns (see http://www.prodigytek.com and a test
        page - http://www.strawbalehouse.com/new/verdana.html) but still have a
        hard time wrapping my brain around them. The code is based on the
        Suckerfish examples and also those of Paul O'Brien. All these examples
        require a little bit of Javascript. I suggest you take a look at them
        and base your code on them. Here are some useful links.

        http://www.htmldog.com/articles/suckerfish/
        http://www.htmldog.com/articles/suckerfish/dropdowns/example/
        http://www.pmob.co.uk/

        Be aware though that so far they are not working in IE 7 Beta 2. :(

        One other thing that looks funny in your code is a <div> contained
        within a <li>. I don't think I have ever seen this before and don't
        know if it is 'legal' or why you need to have a div there at all.

        That should get you started.

        sisterscape



        --- dpasseng <don@...> wrote:

        > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        > "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
        > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
        > <head>
        >
        > <style type="text/css">
        >
        > /* without text */
        > #menu {display:block; height:24px;}
        > #menu ul {margin:0; padding:0; list-style-type:none;}
        > #menu li {float:left; margin-right:1px; display:block; width:auto;
        > border:1px solid #000;}
        > #menu li.list1 {background:transparent url(menu_images/home_off.gif)
        > no-repeat; width:87px;}
        > #menu li.list2 {background:transparent url(menu_images/forum_off.gif)
        > no-repeat; width:118px;}
        > #menu li.list3 {background:transparent
        > url(menu_images/moving_off.gif)
        > no-repeat; width:125px;}
        > #menu li.list4 {background:transparent
        > url(menu_images/living_off.gif)
        > no-repeat; width:117px;}
        > #menu li.list5 {background:transparent
        > url(menu_images/activities_off.gif) no-repeat; width:137px;}
        > #menu li.list6 {background:transparent url(menu_images/store_off.gif)
        > no-repeat; width:91px;}
        > #menu li.list7 {background:transparent
        > url(menu_images/travel_off.gif)
        > no-repeat; width:118px;}
        >
        > /* this next line is the problem ... it is killing the links in the
        > drop down as well as in the
        > top links in the line it is designed to hide */
        > /*#menu a {display:block; padding-top:24px; height:0; color:#000;
        > text-decoration:none; overflow:hidden;}
        > * html #menu a:link, * html #menu a:visited {height:24px;
        > he\ight:0;}*/
        >
        > #menu a#item1 {background:transparent url(menu_images/home_off.gif)
        > no-repeat; width:87px;}
        > #menu a#item2 {background:transparent url(menu_images/forum_off.gif)
        > no-repeat; width:118px;}
        > #menu a#item3 {background:transparent url(menu_images/moving_off.gif)
        > no-repeat; width:125px;}
        > #menu a#item4 {background:transparent url(menu_images/living_off.gif)
        > no-repeat; width:117px;}
        > #menu a#item5 {background:transparent
        > url(menu_images/activities_off.gif) no-repeat; width:137px;}
        > #menu a#item6 {background:transparent url(menu_images/store_off.gif)
        > no-repeat; width:91px;}
        > #menu a#item7 {background:transparent url(menu_images/travel_off.gif)
        > no-repeat; width:118px;}
        >
        >
        > #menu a#item1:hover {background: url(menu_images/home_on.gif)
        > no-repeat; z-index:50; width:87px;}
        > #menu a#item2:hover {background: url(menu_images/forum_on.gif)
        > no-repeat; z-index:50; width:125px;}
        > #menu a#item3:hover {background: url(menu_images/moving_on.gif)
        > no-repeat; z-index:50; width:125px;}
        > #menu a#item4:hover {background: url(menu_images/living_on.gif)
        > no-repeat; z-index:50; width:117px;}
        > #menu a#item5:hover {background: url(menu_images/activities_on.gif)
        > no-repeat; z-index:50; width:137px;}
        > #menu a#item6:hover {background: url(menu_images/store_on.gif)
        > no-repeat; z-index:50; width:91px;}
        > #menu a#item7:hover {background: url(menu_images/travel_on.gif)
        > no-repeat; z-index:50; width:118px;}
        >
        >
        > * html #menu a:hover {height:24px; he\ight:0;}
        >
        > #menu div.popup { background-color: #cdd7e1; color: #003366; }
        > #menu div.popup a:hover { background-color: #666666; color: #ffffcc;
        > }
        > #menu li:hover div:first-child { border-top: 5px solid #fff; }
        > #menu div.popup { display: none; }
        > #menu li:hover div.popup {
        > z-index:60;
        > display: block;
        > background-color: #cdd7e1;
        > color: #f0f;
        > }
        > #menu div.popup a:hover {display:block; color:#fff;
        > text-decoration:none;}
        > * html #menu a:link, * html #menu a:visited {height:24px; he\ight:0;}
        >
        >
        >
        >
        > </style>
        > </head>
        >
        > <body>
        > <div id="wrapper">
        > <div id="menu">
        > <ul>
        > <li class="list1"><a id="item1" href="#nogo" title="Item 1">Item
        > 1</a></li>
        > <li class="list2"><a id="item2" href="#nogo" title="Item 2">Item
        > 2</a></li>
        > <li class="list3"><a id="item3" href="#nogo" title="Item 3">Item
        > 3</a>
        > <div class="popup">
        > <a href="huh.txt">why this link</a><br>
        > test why are these on their own lines?<br>
        > <a href="#">One fish</a><br>
        > <a href="#">Two fish</a><br>
        > <a href="#">Red fish</a><br>
        > <a href="#">Blue fish</a><br>
        > </div></li>
        > <li class="list4"><a id="item4" href="#nogo" title="Item 4">Item
        > 4</a>
        > <div class="popup">
        > <a href="#">One fish</a><br>
        > <a href="#">Two fish</a><br>
        > <a href="#">Red fish</a><br>
        > <a href="#">Blue fish</a><br>
        > </div></li>
        > <li class="list5"><a id="item5" href="#nogo" title="Item 5">Item
        > 5</a>
        > <div class="popup">
        > <a href="#">One fish</a><br>
        > <a href="#">Two fish</a><br>
        > <a href="#">Red fish</a><br>
        > <a href="#">Blue fish</a><br>
        > </div></li>
        > <li class="list6"><a id="item6" href="#nogo" title="Item 6">Item
        > 6</a>
        > <div class="popup">
        > <a href="#">One fish</a><br>
        > <a href="#">Two fish</a><br>
        > <a href="#">Red fish</a><br>
        > <a href="#">Blue fish</a><br>
        > </div></li>
        > <li class="list7"><a id="item7" href="#nogo" title="Item 7">Item
        > 7</a>
        > <div class="popup">
        > <a href="#">One fish</a><br>
        > <a href="#">Two fish</a><br>
        > <a href="#">Red fish</a><br>
        > <a href="#">Blue fish</a><br>
        > </div></li>
        > </ul>
        > </div>
        > </div>
        >
        > </body>
        > </html>
        >
        >
        >
        >
        >


        __________________________________________________
        Do You Yahoo!?
        Tired of spam? Yahoo! Mail has the best spam protection around
        http://mail.yahoo.com
      • loro
        ... What do think should happen when you set the height to 0? Lotta
        Message 3 of 16 , Feb 11, 2006
        View Source
        • 0 Attachment
          Don wrote:
          >/* this next line is the problem ... it is killing the links in the
          >drop down as well as in the
          > top links in the line it is designed to hide */
          >/*#menu a {display:block; padding-top:24px; height:0; color:#000;
          >text-decoration:none; overflow:hidden;}

          What do think should happen when you set the height to 0?

          Lotta
        • Don - HtmlFixIt.com
          ... I want the height to zero for the top row of links because I am using images there. But for the drop downs I want to see the item. How do I get the
          Message 4 of 16 , Feb 11, 2006
          View Source
          • 0 Attachment
            loro wrote:
            > Don wrote:
            >> /* this next line is the problem ... it is killing the links in the
            >> drop down as well as in the
            >> top links in the line it is designed to hide */
            >> /*#menu a {display:block; padding-top:24px; height:0; color:#000;
            >> text-decoration:none; overflow:hidden;}
            >
            > What do think should happen when you set the height to 0?
            >
            > Lotta
            >
            >
            >
            > CSE HTML Validator Lite - it's free: http://home.earthlink.net/~5wink/dl/cselite652.exe
            >
            > Fookes Software Home: http://www.fookes.us/redir
            >
            > Yahoo! Groups Links
            >
            >
            >
            >
            >
            >
            >
            I want the height to zero for the top row of links because I am using
            images there. But for the drop downs I want to see the item. How do I
            get the second level to be full height ... if that makes sense.
          • Philip Pawley
            Hi, I m not sure what you re trying to do but you do need to replace your with as the first is not legal xhtml. ;-) The div s in li are fine.
            Message 5 of 16 , Feb 12, 2006
            View Source
            • 0 Attachment
              Hi,

              I'm not sure what you're trying to do but you do need to replace your
              <br> with <br /> as the first is not legal xhtml. ;-)
              The div's in li are fine. Personally, I would scrap the br's altogether
              and enclose each link in its own div.

              All the best,

              Philip Pawley



              dpasseng wrote:
              > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
              > "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
              > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
              > <head>
              >
              > <style type="text/css">
              >
              > /* without text */
              > #menu {display:block; height:24px;}
              > #menu ul {margin:0; padding:0; list-style-type:none;}
              > #menu li {float:left; margin-right:1px; display:block; width:auto;
              > border:1px solid #000;}
              > #menu li.list1 {background:transparent url(menu_images/home_off.gif)
              > no-repeat; width:87px;}
              > #menu li.list2 {background:transparent url(menu_images/forum_off.gif)
              > no-repeat; width:118px;}
              > #menu li.list3 {background:transparent url(menu_images/moving_off.gif)
              > no-repeat; width:125px;}
              > #menu li.list4 {background:transparent url(menu_images/living_off.gif)
              > no-repeat; width:117px;}
              > #menu li.list5 {background:transparent
              > url(menu_images/activities_off.gif) no-repeat; width:137px;}
              > #menu li.list6 {background:transparent url(menu_images/store_off.gif)
              > no-repeat; width:91px;}
              > #menu li.list7 {background:transparent url(menu_images/travel_off.gif)
              > no-repeat; width:118px;}
              >
              > /* this next line is the problem ... it is killing the links in the
              > drop down as well as in the
              > top links in the line it is designed to hide */
              > /*#menu a {display:block; padding-top:24px; height:0; color:#000;
              > text-decoration:none; overflow:hidden;}
              > * html #menu a:link, * html #menu a:visited {height:24px; he\ight:0;}*/
              >
              > #menu a#item1 {background:transparent url(menu_images/home_off.gif)
              > no-repeat; width:87px;}
              > #menu a#item2 {background:transparent url(menu_images/forum_off.gif)
              > no-repeat; width:118px;}
              > #menu a#item3 {background:transparent url(menu_images/moving_off.gif)
              > no-repeat; width:125px;}
              > #menu a#item4 {background:transparent url(menu_images/living_off.gif)
              > no-repeat; width:117px;}
              > #menu a#item5 {background:transparent
              > url(menu_images/activities_off.gif) no-repeat; width:137px;}
              > #menu a#item6 {background:transparent url(menu_images/store_off.gif)
              > no-repeat; width:91px;}
              > #menu a#item7 {background:transparent url(menu_images/travel_off.gif)
              > no-repeat; width:118px;}
              >
              >
              > #menu a#item1:hover {background: url(menu_images/home_on.gif)
              > no-repeat; z-index:50; width:87px;}
              > #menu a#item2:hover {background: url(menu_images/forum_on.gif)
              > no-repeat; z-index:50; width:125px;}
              > #menu a#item3:hover {background: url(menu_images/moving_on.gif)
              > no-repeat; z-index:50; width:125px;}
              > #menu a#item4:hover {background: url(menu_images/living_on.gif)
              > no-repeat; z-index:50; width:117px;}
              > #menu a#item5:hover {background: url(menu_images/activities_on.gif)
              > no-repeat; z-index:50; width:137px;}
              > #menu a#item6:hover {background: url(menu_images/store_on.gif)
              > no-repeat; z-index:50; width:91px;}
              > #menu a#item7:hover {background: url(menu_images/travel_on.gif)
              > no-repeat; z-index:50; width:118px;}
              >
              >
              > * html #menu a:hover {height:24px; he\ight:0;}
              >
              > #menu div.popup { background-color: #cdd7e1; color: #003366; }
              > #menu div.popup a:hover { background-color: #666666; color: #ffffcc; }
              > #menu li:hover div:first-child { border-top: 5px solid #fff; }
              > #menu div.popup { display: none; }
              > #menu li:hover div.popup {
              > z-index:60;
              > display: block;
              > background-color: #cdd7e1;
              > color: #f0f;
              > }
              > #menu div.popup a:hover {display:block; color:#fff; text-decoration:none;}
              > * html #menu a:link, * html #menu a:visited {height:24px; he\ight:0;}
              >
              >
              >
              >
              > </style>
              > </head>
              >
              > <body>
              > <div id="wrapper">
              > <div id="menu">
              > <ul>
              > <li class="list1"><a id="item1" href="#nogo" title="Item 1">Item
              > 1</a></li>
              > <li class="list2"><a id="item2" href="#nogo" title="Item 2">Item
              > 2</a></li>
              > <li class="list3"><a id="item3" href="#nogo" title="Item 3">Item 3</a>
              > <div class="popup">
              > <a href="huh.txt">why this link</a><br>
              > test why are these on their own lines?<br>
              > <a href="#">One fish</a><br>
              > <a href="#">Two fish</a><br>
              > <a href="#">Red fish</a><br>
              > <a href="#">Blue fish</a><br>
              > </div></li>
              > <li class="list4"><a id="item4" href="#nogo" title="Item 4">Item 4</a>
              > <div class="popup">
              > <a href="#">One fish</a><br>
              > <a href="#">Two fish</a><br>
              > <a href="#">Red fish</a><br>
              > <a href="#">Blue fish</a><br>
              > </div></li>
              > <li class="list5"><a id="item5" href="#nogo" title="Item 5">Item 5</a>
              > <div class="popup">
              > <a href="#">One fish</a><br>
              > <a href="#">Two fish</a><br>
              > <a href="#">Red fish</a><br>
              > <a href="#">Blue fish</a><br>
              > </div></li>
              > <li class="list6"><a id="item6" href="#nogo" title="Item 6">Item 6</a>
              > <div class="popup">
              > <a href="#">One fish</a><br>
              > <a href="#">Two fish</a><br>
              > <a href="#">Red fish</a><br>
              > <a href="#">Blue fish</a><br>
              > </div></li>
              > <li class="list7"><a id="item7" href="#nogo" title="Item 7">Item 7</a>
              > <div class="popup">
              > <a href="#">One fish</a><br>
              > <a href="#">Two fish</a><br>
              > <a href="#">Red fish</a><br>
              > <a href="#">Blue fish</a><br>
              > </div></li>
              > </ul>
              > </div>
              > </div>
              >
              > </body>
              > </html>
              >
              >
            • sisterscape
              Wouldn t it be better to put the links in a list rather than divs? Makes more sense semantically. ... __________________________________________________ Do You
              Message 6 of 16 , Feb 12, 2006
              View Source
              • 0 Attachment
                Wouldn't it be better to put the links in a list rather than divs?
                Makes more sense semantically.

                --- Philip Pawley <notetab@...> wrote:

                > Hi,
                >
                > I'm not sure what you're trying to do but you do need to replace your
                > <br> with <br /> as the first is not legal xhtml. ;-)
                > The div's in li are fine. Personally, I would scrap the br's
                > altogether
                > and enclose each link in its own div.
                >
                > All the best,
                >
                > Philip Pawley
                >
                >


                __________________________________________________
                Do You Yahoo!?
                Tired of spam? Yahoo! Mail has the best spam protection around
                http://mail.yahoo.com
              • Don - HtmlFixIt.com
                ... I agree with both of you to be honest. I quick tossed in br s manually and yes you are right not good xhtml. What I am trying to do is have a menu with
                Message 7 of 16 , Feb 12, 2006
                View Source
                • 0 Attachment
                  sisterscape wrote:
                  > Wouldn't it be better to put the links in a list rather than divs?
                  > Makes more sense semantically.
                  >
                  > --- Philip Pawley <notetab@...> wrote:
                  >
                  >> Hi,
                  >>
                  >> I'm not sure what you're trying to do but you do need to replace your
                  >> <br> with <br /> as the first is not legal xhtml. ;-)
                  >> The div's in li are fine. Personally, I would scrap the br's
                  >> altogether
                  >> and enclose each link in its own div.
                  >>
                  >> All the best,
                  >>
                  >> Philip Pawley

                  I agree with both of you to be honest. I quick tossed in br's manually
                  and yes you are right not good xhtml.

                  What I am trying to do is have a menu with images that change on hover.
                  That part is in fact working fine. Each image says what it is, so I
                  don't want the words in the link to appear on the buttons. In my
                  example, the buttons are just white boxes with borders because I didn't
                  include the images.

                  For all but the left two, when you hover, a drop down menu drops below
                  the button. That part is working, but they will not have images, so I
                  want the words of the links to appear. They aren't because the coding I
                  put to hide the links in the top image row are carrying over. Try
                  taking that line out once ... then is it close to right for the lower
                  half. How do I get both.

                  I will put them in a nested ul sister I agree with you and that will
                  remove the need for my badly coded br's as well Phillip.

                  More help? Please ...
                • sisterscape
                  Well, first off, the dropdowns work in FF but NOT in IE. The little snippet of Javascript that I referred to before is needed to get them working in IE. Again
                  Message 8 of 16 , Feb 12, 2006
                  View Source
                  • 0 Attachment
                    Well, first off, the dropdowns work in FF but NOT in IE. The little
                    snippet of Javascript that I referred to before is needed to get them
                    working in IE.

                    Again I suggest you check out the various menus and rollovers at
                    http://www.pmob.co.uk/ Paul is pure genius. If you look at his code,
                    I'm sure you'll get some ideas about how to fix things. If you want to
                    ask him yourself, hop over to the CSS forum at
                    http://www.sitepoint.com/forums/forumdisplay.php?f=53 As I said
                    before, I have difficulty wrapping my brain around CSS rollovers so
                    just unapologetically rely on code created by others. ;)

                    sisterscape

                    --- "Don - HtmlFixIt.com" <don@...> wrote:
                    >
                    > For all but the left two, when you hover, a drop down menu drops
                    > below
                    > the button. That part is working, but they will not have images, so
                    > I
                    > want the words of the links to appear. They aren't because the
                    > coding I
                    > put to hide the links in the top image row are carrying over. Try
                    > taking that line out once ... then is it close to right for the lower
                    >
                    > half. How do I get both.
                    >
                    > I will put them in a nested ul sister I agree with you and that will
                    > remove the need for my badly coded br's as well Phillip.
                    >
                    > More help? Please ...
                    >


                    __________________________________________________
                    Do You Yahoo!?
                    Tired of spam? Yahoo! Mail has the best spam protection around
                    http://mail.yahoo.com
                  • Don - HtmlFixIt.com
                    ... Nope, javascript is not an option. I am using ie7 on this machine and they work fine. I have not put this particular one to the test on ie 6 ... but that
                    Message 9 of 16 , Feb 12, 2006
                    View Source
                    • 0 Attachment
                      sisterscape wrote:
                      > Well, first off, the dropdowns work in FF but NOT in IE. The little
                      > snippet of Javascript that I referred to before is needed to get them
                      > working in IE.
                      >
                      Nope, javascript is not an option. I am using ie7 on this machine and
                      they work fine. I have not put this particular one to the test on ie 6
                      ... but that isn't what I wanted to hear. I know for some rollovers
                      they used a .hta file with ie6. I guess I need to go grab another
                      computer and try it in ie6.

                      Thanks for the other suggestions. I know this can be done in pure css
                      ... I just need to figure out how.
                    • sisterscape
                      Yeah, it s a bummer that IE 6 can t do CSS properly. Unfortunately, IE 6 will be with us for years to come. :( I have only seen CSS dropdowns for IE 6 done
                      Message 10 of 16 , Feb 12, 2006
                      View Source
                      • 0 Attachment
                        Yeah, it's a bummer that IE 6 can't do CSS properly. Unfortunately, IE
                        6 will be with us for years to come. :( I have only seen CSS
                        dropdowns for IE 6 done with Javascript never an .hta file but that's
                        not to say it couldn't be done that way.

                        If you ever come up with a solution that works in IE 6 and 7, I hope
                        you'll be willing to share. :D


                        --- "Don - HtmlFixIt.com" <don@...> wrote:

                        > sisterscape wrote:
                        > > Well, first off, the dropdowns work in FF but NOT in IE. The little
                        > > snippet of Javascript that I referred to before is needed to get
                        > them
                        > > working in IE.
                        > >
                        > Nope, javascript is not an option. I am using ie7 on this machine
                        > and
                        > they work fine. I have not put this particular one to the test on ie
                        > 6
                        > ... but that isn't what I wanted to hear. I know for some rollovers
                        > they used a .hta file with ie6. I guess I need to go grab another
                        > computer and try it in ie6.
                        >
                        > Thanks for the other suggestions. I know this can be done in pure
                        > css
                        > ... I just need to figure out how.
                        >


                        __________________________________________________
                        Do You Yahoo!?
                        Tired of spam? Yahoo! Mail has the best spam protection around
                        http://mail.yahoo.com
                      • Philip Pawley
                        ... Agreed. Of course, it makes absolutely no difference to the site visitor: they see exactly the same thing either way.
                        Message 11 of 16 , Feb 12, 2006
                        View Source
                        • 0 Attachment
                          sisterscape wrote:
                          > Wouldn't it be better to put the links in a list rather than divs?
                          > Makes more sense semantically.
                          Agreed. Of course, it makes absolutely no difference to the site
                          visitor: they see exactly the same thing either way.
                        • Rudolf Horbas
                          ... On a standard client, for standard users, that is. Semantically adequate tagging is important for non-visual representations. (Screen readers and the
                          Message 12 of 16 , Feb 12, 2006
                          View Source
                          • 0 Attachment
                            Philip Pawley schrieb am 13.02.2006 00:12:
                            > Agreed. Of course, it makes absolutely no difference to the site
                            > visitor: they see exactly the same thing either way.

                            On a "standard" client, for "standard" users, that is.

                            Semantically adequate tagging is important for non-visual
                            representations. (Screen readers and the like.)

                            Rudi
                          • sisterscape
                            Ah! You beat me to the punch line!! ... __________________________________________________ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam
                            Message 13 of 16 , Feb 12, 2006
                            View Source
                            • 0 Attachment
                              Ah! You beat me to the punch line!!

                              --- Rudolf Horbas <rhorbas@...> wrote:
                              >
                              > On a "standard" client, for "standard" users, that is.
                              >
                              > Semantically adequate tagging is important for non-visual
                              > representations. (Screen readers and the like.)
                              >
                              > Rudi
                              >


                              __________________________________________________
                              Do You Yahoo!?
                              Tired of spam? Yahoo! Mail has the best spam protection around
                              http://mail.yahoo.com
                            • loro
                              I still don t understand what you want to do but... ... No, that s not what s happening. This rule: #menu a {display:block; padding-top:24px; height:0;
                              Message 14 of 16 , Feb 12, 2006
                              View Source
                              • 0 Attachment
                                I still don't understand what you want to do but...

                                Don wrote:
                                >For all but the left two, when you hover, a drop down menu drops below
                                >the button. That part is working, but they will not have images, so I
                                >want the words of the links to appear. They aren't because the coding I
                                >put to hide the links in the top image row are carrying over.

                                No, that's not what's happening. This rule:

                                #menu a {display:block; padding-top:24px; height:0; color:#000;
                                text-decoration:none;}

                                applies to _all_ A inside #menu, i.e. all your links. You set the height to
                                0 and the padding to 24px. That effectively moves the text of each "item"
                                down one notch, 24 pixels to be exact. All that remains where the text
                                would have been is the padding. If no other styles were used you would see
                                an empty box at top. Where you'd expect the second link you'd see the first
                                and so on and the last link would appear below the whole construct. But now
                                you also apply 'over-flow: hidden' to those links. Since all text
                                overflows, all text is hidden and what you have is a stack of top-paddings.

                                Lotta
                              • dave
                                Hi the drop down menu s work fine in IE7 I assume they drop down and leave a space for were it goes to, the first 2 don t work. THANKYOU DAVE M ... From:
                                Message 15 of 16 , Feb 12, 2006
                                View Source
                                • 0 Attachment
                                  Hi
                                  the drop down menu's work fine in IE7 I assume they drop down and leave a
                                  space for were it goes to,
                                  the first 2 don't work.
                                  THANKYOU DAVE M

                                  ----- Original Message -----
                                  From: "sisterscape" <sisterscape@...>
                                  To: <ntb-html@yahoogroups.com>
                                  Sent: Monday, February 13, 2006 8:49 AM
                                  Subject: Re: [NH] Help with CSS --- Inheritance problems .... cannot see
                                  links in drop down


                                  > Well, first off, the dropdowns work in FF but NOT in IE. The little
                                  > snippet of Javascript that I referred to before is needed to get them
                                  > working in IE.
                                  >
                                  > Again I suggest you check out the various menus and rollovers at
                                  > http://www.pmob.co.uk/ Paul is pure genius. If you look at his code,
                                  > I'm sure you'll get some ideas about how to fix things. If you want to
                                  > ask him yourself, hop over to the CSS forum at
                                  > http://www.sitepoint.com/forums/forumdisplay.php?f=53 As I said
                                  > before, I have difficulty wrapping my brain around CSS rollovers so
                                  > just unapologetically rely on code created by others. ;)
                                  >
                                  > sisterscape
                                  >
                                  > --- "Don - HtmlFixIt.com" <don@...> wrote:
                                  >>
                                  >> For all but the left two, when you hover, a drop down menu drops
                                  >> below
                                  >> the button. That part is working, but they will not have images, so
                                  >> I
                                  >> want the words of the links to appear. They aren't because the
                                  >> coding I
                                  >> put to hide the links in the top image row are carrying over. Try
                                  >> taking that line out once ... then is it close to right for the lower
                                  >>
                                  >> half. How do I get both.
                                  >>
                                  >> I will put them in a nested ul sister I agree with you and that will
                                  >> remove the need for my badly coded br's as well Phillip.
                                  >>
                                  >> More help? Please ...
                                  >>
                                  >
                                  >
                                  > __________________________________________________
                                  > Do You Yahoo!?
                                  > Tired of spam? Yahoo! Mail has the best spam protection around
                                  > http://mail.yahoo.com
                                  >
                                  >
                                  > CSE HTML Validator Lite - it's free:
                                  > http://home.earthlink.net/~5wink/dl/cselite652.exe
                                  >
                                  > Fookes Software Home: http://www.fookes.us/redir
                                  >
                                  > Yahoo! Groups Links
                                  >
                                  >
                                  >
                                  >
                                  >
                                  >
                                  >
                                • sisterscape
                                  Well, the dropdowns don t work in IE 6. BTW, there are no dropdowns on the first two items. ;) ... __________________________________________________ Do You
                                  Message 16 of 16 , Feb 12, 2006
                                  View Source
                                  • 0 Attachment
                                    Well, the dropdowns don't work in IE 6. BTW, there are no dropdowns on
                                    the first two items. ;)

                                    --- dave <dmc43959@...> wrote:

                                    > Hi
                                    > the drop down menu's work fine in IE7 I assume they drop down and
                                    > leave a
                                    > space for were it goes to,
                                    > the first 2 don't work.
                                    > THANKYOU DAVE M
                                    >
                                    > ----- Original Message -----
                                    > From: "sisterscape" <sisterscape@...>
                                    > To: <ntb-html@yahoogroups.com>
                                    > Sent: Monday, February 13, 2006 8:49 AM
                                    > Subject: Re: [NH] Help with CSS --- Inheritance problems .... cannot
                                    > see
                                    > links in drop down
                                    >
                                    >
                                    > > Well, first off, the dropdowns work in FF but NOT in IE. The little
                                    > > snippet of Javascript that I referred to before is needed to get
                                    > them
                                    > > working in IE.
                                    > >
                                    > > Again I suggest you check out the various menus and rollovers at
                                    > > http://www.pmob.co.uk/ Paul is pure genius. If you look at his
                                    > code,
                                    > > I'm sure you'll get some ideas about how to fix things. If you
                                    > want to
                                    > > ask him yourself, hop over to the CSS forum at
                                    > > http://www.sitepoint.com/forums/forumdisplay.php?f=53 As I said
                                    > > before, I have difficulty wrapping my brain around CSS rollovers so
                                    > > just unapologetically rely on code created by others. ;)
                                    > >
                                    > > sisterscape
                                    > >
                                    > > --- "Don - HtmlFixIt.com" <don@...> wrote:
                                    > >>
                                    > >> For all but the left two, when you hover, a drop down menu drops
                                    > >> below
                                    > >> the button. That part is working, but they will not have images,
                                    > so
                                    > >> I
                                    > >> want the words of the links to appear. They aren't because the
                                    > >> coding I
                                    > >> put to hide the links in the top image row are carrying over. Try
                                    > >> taking that line out once ... then is it close to right for the
                                    > lower
                                    > >>
                                    > >> half. How do I get both.
                                    > >>
                                    > >> I will put them in a nested ul sister I agree with you and that
                                    > will
                                    > >> remove the need for my badly coded br's as well Phillip.
                                    > >>
                                    > >> More help? Please ...
                                    > >>
                                    > >
                                    > >
                                    > > __________________________________________________
                                    > > Do You Yahoo!?
                                    > > Tired of spam? Yahoo! Mail has the best spam protection around
                                    > > http://mail.yahoo.com
                                    > >
                                    > >
                                    > > CSE HTML Validator Lite - it's free:
                                    > > http://home.earthlink.net/~5wink/dl/cselite652.exe
                                    > >
                                    > > Fookes Software Home: http://www.fookes.us/redir
                                    > >
                                    > > Yahoo! Groups Links
                                    > >
                                    > >
                                    > >
                                    > >
                                    > >
                                    > >
                                    > >
                                    >
                                    >


                                    __________________________________________________
                                    Do You Yahoo!?
                                    Tired of spam? Yahoo! Mail has the best spam protection around
                                    http://mail.yahoo.com
                                  Your message has been successfully submitted and would be delivered to recipients shortly.