SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop Down Issues

    Let my start out by saying that I hate how every browser has to be effin different, even on different platforms. My dropdowns are just fine and dandy on OSX with safari and firefox. But when I look at them on IE the drop downs are shifted way too far to the right. Firefox for windows has the drop downs about a pixel too low. What a headache.

    Here is my html
    Code:
    <div id="nav2">
    <ul id="nav">
      <li><a href="aboutus.html">ABOUT US</a>
    	<div id="navmargin">
    	<ul>
    	  <li><a href="">Our History</a></li>
          <li><a href="">Leadership</a></li>
          <li><a href="">Contact Us</a></li>
    		</ul>
    		</div>
    	</li>
    
      <li><a href="ourapproach.html">OUR APPROACH</a>
    	<div id="navmargin">
    	<ul>
          <li><a href="">Safety
            </a></li>
          <li><a href="">Project Controls</a></li>
          <li><a href="">Industry Affilations</a></li>
        </ul>
    	</div>
      </li>
    
      <li><a href="services.html">SERVICES</a>
        <div id="navmargin">
    	<ul>
          <li><a href="">Fabrication - High Purity/Plastics</a></li>
          <li><a href="">Fabrication - High Purity/Micro Welding</a></li>
          <li><a href="">Fabrication - Industrial <br />Pipe</a></li>
          <li><a href="">Fabrication - Skid and Modular</a></li>
          <li><a href="">Field Install - <br />Process Piping</a></li>
    	  <li><a href="">CAD</a></li>
        </ul>
    	</div>
      </li>
      
            <li><a href="projects.html">FACILITIES</a>
       <div id="navmargin">
        <ul>
          <li><a href="">Clean Room</a></li>
          <li><a href="">Traditional Fabrication Area</a></li>
        </ul>
    	</div>
      </li>
       
       <li><a href="industriesserved.html">INDUSTRIES</a>
        <div id="navmargin">
    	<ul>
          <li><a href="">Food and Beverage</a></li>
          <li><a href="">Semiconductor</a></li>
          <li><a href="">Water and Waste Water</a></li>
          <li><a href="">Biotech and <br />Pharmeceutical</a></li>
          <li><a href="">Chemical</a></li>
    	  <li><a href="">Ethanol</a></li>
    	  <li><a href="">Power</a></li>
    	  <li><a href="">Pulp and Paper</a></li>
    	  <li><a href="">Nuclear</a></li>
        </ul>
    	</div>
      </li>
      
       <li><a href="projects.html">PROJECTS</a>
       <div id="navmargin">
        <ul>
          <li><a href="">Put Stuff Here</a></li>
         
        </ul>
    	</div>
      </li>
      
    </ul>
    
    </div>

    Here is my CSS
    Code:
    #nav2 {
    	min-height:23px;
    	height:23px;
    	width:652px;
    	float:left;
    	background-image:url(images/navbg.jpg);
    	background-repeat:repeat-x;
    	text-align:center;
    	font-family:arial;
    	font-size:10px;
    	color:#FFFFFF;
    	border-bottom:solid;
    	border-bottom-color:#FFFFFF;
    	border-bottom-width:1px;
    	}	
    	
    #nav, #nav ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
    
    }
    
    #nav li li a {
    font-family:arial;
    font-size:10px;
    color:#FFFFFF;
    text-decoration:none;
    padding: 0px;
    margin: 0px;
    }
    
    
    #nav li li a:hover {
    font-family:arial;
    font-size:10px;
    color:#FFFFFF;
    text-decoration:none;
    padding: 0px;
    margin: 0px;
    background-color:#4E4F4E;
    }
    
    #nav a {
    display: block;
    width: 10.75em;
    padding: 0px;
    margin: 0px;
    }
    
    #nav li {
    float: left;
    width: 10.75em;
    padding:6px 0px 0px 0px;
    margin: 0px;
    
    }
    
    #nav li a {
    font-family:arial;
    font-size:10px;
    color:#FFFFFF;
    text-decoration:none;
    padding: 0px;
    margin: 0px;
    }
    
    #nav li ul {
    	position: absolute;
    	width: 10.75em;
    	left: -999em;
    	background-color:#999999;
    	padding: 0px 2px 5px 2px;
    	margin: 0px;
    	border-bottom-color:#FFFFFF;
    	border-bottom-width:1px;
    	border-left-color:#FFFFFF;
    	border-left-width:1px;
    	border-right-color:#FFFFFF;
    	border-right-width:1px;
    	border-right-style: solid;
    	border-bottom-style: solid;
    	border-left-style: solid;
    }
    
    #nav li:hover ul {
    left: auto;
    }
    
    #nav li:hover ul, #nav li.sfhover ul {left: auto;}
    
    #navmargin {
    	margin-top:6px;
    }

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you provide a link cos you haven't included the javascript to make it work in IE?


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
  •