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

5390Re: [NH] Help with CSS --- Inheritance problems .... cannot see links in drop down

Expand Messages
  • Philip Pawley
    Feb 12, 2006
    • 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>
      >
      >
    • Show all 16 messages in this topic