www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] moving CSS to external style sheet - HELP!!!

  1. #1
    Join Date
    Aug 2006
    Location
    Michigan
    Posts
    1,046

    resolved [RESOLVED] moving CSS to external style sheet - HELP!!!

    Hey CSS Gurus,

    need some help.

    Im planning to use some code for a navbar form this site, but having issues.

    The issue is if I copy the code from the Live Demo the code works great, but I wanted to move the CSS to an external style sheet.

    When I separate the CSS to an external style sheet something breaks. All the submenus display when you hover the mouse over the main top categories instead of displaying on hover over the sub categories.

    Any help would be great.

    This issus is with Firefox, IE 7 only shows the top nav, no hover or dropdowns.

    // External CSS
    Code:
        /* Overarching Menu
            -----------------------------------*/
            .cssnav {
                position:relative; 
                z-index:1000;
                font-size:12px;
                font-family:Verdana, Arial, Helvetica, sans-serif;
                font-weight:bold;
                text-align:center;
            }
            .cssnav ul {
                padding:0;
                margin:0;
                list-style-type:none;
            }
            .cssnav ul ul {
                width:149px;
                text-align:left;
        }
        /*	Main list 
            -----------------------------------*/
            .cssnav li {
                float:left;
                width:150px;
                position:relative;
            }
        /*	First Level
            -----------------------------------*/
            /* Links */
            .cssnav a, .cssnav a:visited {
                display:block;
                text-decoration:none; 
                color:#fefefe; 
                border:1px solid #fff; 
                border-width:1px 0px 1px 1px; 
                background:#467aa7; 
                line-height:25px;
            }
            /* Links on hover */
            .cssnav a:hover, .cssnav ul ul a:hover{
                color:#fff; 
                background:#80b0da;
            }
            .cssnav :hover > a, .cssnav ul ul :hover > a {
                color:#fff;
                background:#80b0da;
            }
        /*	Second Level
            -----------------------------------*/
            /* Links */
            .cssnav ul ul a, .cssnav ul ul a:visited {
                background:#578bb8;
                line-height:1em; 
                padding:5px 10px; 
                width:128px;
                border-width:0 1px 1px 1px;
            }
            /* Links on hover */
            .cssnav ul ul a:hover {
                background:#80b0da;
            }
            /* Visibility */
            .cssnav ul li:hover ul, .cssnav ul a:hover ul{
                visibility:visible; 
            }
        /*	Third Level
            -----------------------------------*/
            /* Links */
            .cssnav ul ul ul a, .cssnav ul ul ul a:visited {
                background:#578bb8;
            }
            /* Links on hover */
            .cssnav ul ul ul a:hover {
                background:#80b0da;
            }
            /* Positioning */
            .cssnav ul ul ul{
                left:150px; 
                top:-1px; 
            }
            .cssnav ul ul ul.left {
                left:-150px;
            }
            /* Visibility */
            .cssnav ul :hover ul ul{
                visibility:hidden;
            }
            .cssnav ul :hover ul :hover ul{
                visibility:visible;
            }
        /*	All Sub Levels 
            -----------------------------------*/
            /* Default visibility */
            .cssnav ul ul {
                visibility:hidden;
                position:absolute;
                top:26px;
                left:0; 
                border-top:1px solid #fff;
            }
        /*	IE Table 
            -----------------------------------*/
            .cssnav table {
                position:absolute;
                top:0;
                left:0;
                border-collapse:collapse;
            }
    // Html
    HTML Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="testnav.css" media="screen" />
    </head>
    <body>
    <div class="cssnav">
      <ul>
        <li><a href="#">Home</a></li>
        <li>
          <a href="#">Pages
          <!--[if IE 7]><!--></a><!--<![endif]-->
          <!--[if lte IE 6]><table><tr><td><![endif]-->
          <ul>
            <li><a href="#" title="Page 1">Page 1</a></li>
            <li><a href="#" title="Page 2">Page 2</a></li>
            <li><a href="#" title="Page 3">Page 3</a></li>
            <li><a href="#" title="Page 4">Page 4</a></li>
            <li>
              <a class="drop" href="#" title="Page5">Page 5
              <!--[if IE 7]><!--></a><!--<![endif]-->
              <!--[if lte IE 6]><table><tr><td><![endif]-->
              <ul>
                <li><a href="#" title="Sub Page 1">Sub Page 1</a></li>
                <li><a href="#" title="Sub Page 1">Sub Page 2</a></li>
                <li><a href="#" title="Sub Page 1">Sub Page 3</a></li>
              </ul>
              <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
          </ul>
          <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li>
          <a href="#">Links
          <!--[if IE 7]><!--></a><!--<![endif]-->
          <!--[if lte IE 6]><table><tr><td><![endif]-->
          <ul>
        	<li><a href="#" title="Link 1">Link 1</a></li>
        	<li><a href="#" title="Link 2">Link 2</a></li>
            <li><a href="#" title="Link 3">Link 3</a></li>
          </ul>
          <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
    	<li>
          <a href="#">More Links
          <!--[if IE 7]><!--></a><!--<![endif]-->
          <!--[if lte IE 6]><table><tr><td><![endif]-->
          <ul>
            <li><a href="#" title="More Links 1">More Links 1</a></li>
            <li>
              <a class="drop" href="#" title="More Links 2">More Links 2
              <!--[if IE 7]><!--></a><!--<![endif]-->
              <!--[if lte IE 6]><table><tr><td><![endif]-->
              <ul class="left">
                <li><a href="#" title="More Sub Links 1">More Sub Links 1</a></li>
                <li><a href="#" title="More Sub Links 2">More Sub Links 2</a></li>
                <li><a href="#" title="More Sub Links 3">More Sub Links 3</a></li>
              </ul>
        	  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        	</li>
    		<li><a href="#" title="More Links 3">More Links 3</a></li>
            <li><a href="#" title="More Links 4">More Links 4</a></li>
            <li><a href="#" title="More Links 5">More Links 5</a></li>
    	  </ul>
    	  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    	</li>
      </ul>
    </div>
    </body>
    </html>

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Wild - that menu is almost a direct copy of Stu Nichol's: http://www.cssplay.co.uk/menus/final_drop.html
    which has been around for a while....

    You might take a look at this coding to see what the differences are - that could solve your problem.
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  3. #3
    Join Date
    Aug 2006
    Location
    Michigan
    Posts
    1,046
    Funny I needed to add the DOCTYPE for it to work.

    Thanks for the help and yes looks a lot like Stu's nav.

    So now my HTML is
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Demo Test Nav</title>
    <link rel="stylesheet" type="text/css" href="testnav.css" media="screen" />
    </head>
    <body>
    <div class="cssnav">
      <ul>
        <li><a href="#">Home</a></li>
        <li>
          <a href="#">Pages
          <!--[if IE 7]><!--></a><!--<![endif]-->
          <!--[if lte IE 6]><table><tr><td><![endif]-->
          <ul>
            <li><a href="#" title="Page 1">Page 1</a></li>
            <li><a href="#" title="Page 2">Page 2</a></li>
            <li><a href="#" title="Page 3">Page 3</a></li>
            <li><a href="#" title="Page 4">Page 4</a></li>
            <li>
              <a class="drop" href="#" title="Page5">Page 5
              <!--[if IE 7]><!--></a><!--<![endif]-->
              <!--[if lte IE 6]><table><tr><td><![endif]-->
              <ul>
                <li><a href="#" title="Sub Page 1">Sub Page 1</a></li>
                <li><a href="#" title="Sub Page 1">Sub Page 2</a></li>
                <li><a href="#" title="Sub Page 1">Sub Page 3</a></li>
              </ul>
              <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
          </ul>
          <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li>
          <a href="#">Links
          <!--[if IE 7]><!--></a><!--<![endif]-->
          <!--[if lte IE 6]><table><tr><td><![endif]-->
          <ul>
        	<li><a href="#" title="Link 1">Link 1</a></li>
        	<li><a href="#" title="Link 2">Link 2</a></li>
            <li><a href="#" title="Link 3">Link 3</a></li>
          </ul>
          <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
    	<li>
          <a href="#">More Links
          <!--[if IE 7]><!--></a><!--<![endif]-->
          <!--[if lte IE 6]><table><tr><td><![endif]-->
          <ul>
            <li><a href="#" title="More Links 1">More Links 1</a></li>
            <li>
              <a class="drop" href="#" title="More Links 2">More Links 2
              <!--[if IE 7]><!--></a><!--<![endif]-->
              <!--[if lte IE 6]><table><tr><td><![endif]-->
              <ul class="left">
                <li><a href="#" title="More Sub Links 1">More Sub Links 1</a></li>
                <li><a href="#" title="More Sub Links 2">More Sub Links 2</a></li>
                <li><a href="#" title="More Sub Links 3">More Sub Links 3</a></li>
              </ul>
        	  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        	</li>
    		<li><a href="#" title="More Links 3">More Links 3</a></li>
            <li><a href="#" title="More Links 4">More Links 4</a></li>
            <li><a href="#" title="More Links 5">More Links 5</a></li>
    	  </ul>
    	  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    	</li>
      </ul>
    </div>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles