Awkward problem needs solving :S

Discussion in 'HTML & Website Design' started by Lipgut, Jul 19, 2010.

  1. #1
    At the moment I am in the middle of designing a blog template, but I've ran into a problem and cannot continue until this problem is solved.


    Problem:
    My drop down menu is not working properly in internet explorer and firefox, BUT works fine in Chrome and Opera. Check it out yourself...

    Template Link( hover over top buttons ):
    click here

    Style sheet:
    Click here


    The testing page for the drop down:
    <link href="stylesheet.css" rel="stylesheet">
    <style type="text/css">
    .nd_wrap{
    	width:1000px;
    	height:auto;
    }
    .ndtut{
    	position:relative;
    	width:200px;
    	height:auto;
    	padding-top:5px;
    	padding-left:10px;
    	padding-right:10px;
    	padding-bottom:5px;
    	z-index:2;
    	background:url(images/qnbg.jpg);
    	text-align:left;
    	float:right;
    }
    </style>
    <script language="JavaScript">
    function setVisibility(id, visibility) {
    document.getElementById(id).style.display = visibility;
    }
    </script>
    <a class="ntut" href="#" on onMouseOver="setVisibility('drop1', 'inline');" onMouseOut="setVisibility('drop1', 'none');" ></a>
    <div class="nd_wrap">
    	<div id="drop1" class="ndtut" onMouseOver="setVisibility('drop1', 'inline');" onMouseOut="setVisibility('drop1', 'none');">
    	   <div>link1</div>
    	   <div>link1</div>
    	   <div>link1</div>
    	</div>
    </div>
    <!--onMouseOver="setVisibility('drop1', 'inline');" onMouseOut="setVisibility('drop1', 'none');"-->
    
    
    HTML:




    So forum, how can I make this work in both internet explorer and firefox?
     
    Lipgut, Jul 19, 2010 IP
  2. Rimona

    Rimona Active Member

    Messages:
    123
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    63
    #2
    Personally I would only use Position: relative; on the dropdowns.

    However a quick fix could be

    .ndtut{
    position:fixed;
    width:200px;
    height:auto;
    padding-top:5px;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:5px;
    z-index:3;
    background:url(images/qnbg.jpg);
    text-align:left;
    margin-left:-120px;
    margin-top:50px;
    display: none;
    }

    Bold for right value for FF.
    You then can use conditional comments for IE and FF

    NB. I have taken ndtut as an example
     
    Rimona, Jul 19, 2010 IP
    Lipgut likes this.
  3. Lipgut

    Lipgut Member

    Messages:
    328
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    35
    #3


    Problem solved :) I used you code +

    
    		<!--[if IE]>
    			<link rel="stylesheet" type="text/css" href="ie_only.css" media="all" />
    		<![endif]-->
    HTML:
     
    Lipgut, Jul 19, 2010 IP
  4. Rimona

    Rimona Active Member

    Messages:
    123
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    63
    #4
    Glad I could help
     
    Rimona, Jul 19, 2010 IP