SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict ghostme's Avatar
    Join Date
    Feb 2005
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Navigation bar not showing in IE

    Hello good pple of the forum i am having some issues in trying to implement a drop down navigation bar in my layout, it is not appearing in IE.
    Ok here goes my css code:
    Code CSS:
    html{
    margin:0px;
    padding:0px;
    }
    body {
    	margin:0;
    	padding:0;
    	background-image: url(images/bodybg.jpg);
    	background-repeat: repeat-y;
    	background-attachment: scroll;
    	background-position: right top;
    }
    #wrapper {
    	padding: 0px;
    	width:768px;
    	margin:0px;
    	position:relative;
    	}
     
    div#wrapper div.row div#maincontent{
    	width:768px;
    	float:left;
    	}
    div#wrapper div#masthead{
    	width:768px;
    	padding:0px;
    	margin:0px;
    	background-image: url(images/toplayerbg.jpg);
    	background-repeat: repeat-x;
    	height: 205px;
    	float:left;
    	overflow:hidden;
    	position:relative;
     
    	}
     
    div#wrapper div#masthead div#logo{
    	width:252px;
    	height:65px;
    	float:left;
    	margin-top:20px;
    	margin-left:4px;
    	background-color: #FFCC33;
    }
    div#wrapper div#masthead div#mainpic{
    width:312px;
    height:190px;
    float:left;
    margin-top:9px;
    }
    div#wrapper div#masthead div#profilelinks{
    width:195px;
    height:43px;
    float:right;
    background-image: url(images/topmenubg.jpg);
    background-repeat: no-repeat;
    margin-top:9px;
    background-color: #FFCC33;
    	}
    /*start drop down navigation bar*/
     div.navbar
    {
    	width: 768px;
    	padding-top: 0px;
    	position:absolute;
    	bottom:29px;
    	left:0px;
    	height:34px;
    }
    * html div.navbar {
    height:1%;
     
    }
    /* Fix IE. Hide from IE Mac \*/
    * html div.navbar li { float: left; height: 1%; }
    * html div.navbar  li a { height: 1%; }
    /* End */
     div.navbar ul{
    	padding:0px;
    	list-style:none;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left:auto;
    }
     div.navbar ul li
    {
    	padding:0px;
    	list-style:none;
    	float:left;
     
    	margin-left:6px;
    	position:relative;
    	width: 146px;
    }
    div.navbar ul li a:link, div.navbar ul li a:visited{
    	text-transform:capitalize;
    	color:#000000;
    	text-decoration:none;
    	width:146px;
    	background-repeat:no-repeat;
    	display:block;
    	font-family: "Myriad Pro", Verdana, sans-serif;
    	font-size: 13px;
    	text-align:center;
    	background:url(images/menubg.gif);
    	line-height:30px;
    	}
     div.navbar ul li a:hover{
    	text-transform:capitalize;
    	color:#000000;
    	text-decoration:none;
    	width:146px;
    	display:block;
    	font-family: "Myriad Pro", Verdana, sans-serif;
    	font-size: 12px;
    	text-align:center;
    	background:url(images/menuhover.gif);
    	}
     
     div.navbar li ul {
    	display: none;
    	position: absolute;
    	top: 1.9em;
    	left:-1px;
    	list-style: none;
     
    	}
     div.navbar li > ul {
    	top: auto;
    	left: auto;
    	}
     div.navbar li ul a:link,div.navbar li ul a:visited{
    background-color:#fc3;
    color:#000;
    text-decoration:none;
    display:block;
    background-image:none;
     
    }
     
    div.navbar  li ul a:hover{
    background-color:#fff;
    color:#000;
    text-decoration:none;
    display:block;
    background-image:none;
     
    }
    div.navbar ul li:hover ul,div.navbar ul li.over ul{ display: block;}
    /*drop down navigation bar*/

    The html code:
    Code HTML4Strict:
    <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <link href="mycareer.css" rel="stylesheet" type="text/css" />
    </head>
    //Javascript to enable drop down navigation in IE
    <script language="javascript" type="text/javascript">
    	startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("navv");
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
      }
      node.onmouseout=function() {
      this.className=this.className.replace("over", "");
       }
       }
      }
     }
    }
    window.onload=startList;
    </script>
    <body>
    <div id="wrapper">
    <div id="masthead">
    <div id="profilelinks"></div>
    </div>
    <div class="navbar">
    <ul id="navv">
    <li><a href="index.asp">home</a></li>
    <li><a href="aboutus.htm">About Us</a>
    <ul> 
    <li><a href="vision.htm">Vision</a></li> 
    <li><a href="mission.htm">Mission</a></li> 
    <li><a href="competitiveedge.htm">Competitive edge</a></li> 
    <li><a href="successfactor.htm">Success Factor</a></li> 
    </ul> 
    </li>
    <li><a href="index.asp">going places</a></li>
    <li><a href="index.asp">career tree</a></li>
    <li><a href="index.asp">link 4 U</a></li>
    </ul>
    </div>
    <div id="maincontent"> srsgsgsrsgsg srsgsg srsgsg srsgsg srsgsg srsgsg srsgsg srsgsg srsgsgsrsgsg  v srsgsg srsgsg srsgsg srsgsg</div>
    </div>
    </body>
    </html>
    Thank you
    What sitepoint made me to do:
    Select from 1,2,3,4,5,6,7 8 9where name='ghostme'

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't really have time to investigate this much further but the problem is with this bit of code

    Code:
     div.navbar
    {
        width: 768px;
        padding-top: 0px;
        position:absolute;
        bottom:29px;
        left:0px;
        height:34px;
    }
    If you remove that then the menu appears so presumably it's a problem with absolute positioning. If you could position the menu using margin and padding then it'd be a better option.

    Hope that helps.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Its another IE bug which can be fixed like this:
    Code:
     div.navbar
    {
        width: 768px;
        padding-top: 0px;
        position:absolute;
        bottom:29px;
        left:0px;
        height:34px;
            clear:both
    }
    It's nonsense of course but it works

    I hope the first line of that page isn't output in the html or it will cause ie6 to go into quirks mode.

    Code:
    <&#37;@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>

    There should be nothing above the doctype (not even the xml declaration).

  4. #4
    SitePoint Addict ghostme's Avatar
    Join Date
    Feb 2005
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey thanks guy, y'all did it again.
    Cheers
    What sitepoint made me to do:
    Select from 1,2,3,4,5,6,7 8 9where name='ghostme'


Bookmarks

Posting Permissions

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