Connecting Tech Pros Worldwide Help | Site Map
bytes > topic > html css > answers

Nav bar problems in IE7

Newbie
  
Join Date: Oct 2008
Posts: 1
#1: Oct 7 '08
I'm having problems with the spacing of my navigation bar for IE7. It works in other browsers but drops down to a second line in IE7. Here is the page:
http://www.honeymoonersreviewguide.com/index2.php

Thanks so much,
Michelle

Expand|Select|Wrap|Line Numbers
  1.  
  2. #nav-container {
  3.     height: 28px; 
  4.     width: 100%;
  5.     top: 1em;
  6.     left: 1em;
  7.     background: #3068B1 url('../interior/bkg_header.png') 0 0 repeat-x; 
  8.     border-top: 1px solid #23518E;
  9.     border-bottom: 1px solid #23518E; }
  10.  
  11. #nav {
  12.     font-size: 10px;
  13.     float: left;
  14.     margin: 0; 
  15.     padding: 0; }
  16.  
  17. #nav a     {
  18.     text-align: left;
  19.     display: block;
  20.     border: 1px solid #23518E;
  21.     border-top: none;
  22.     white-space: nowrap;
  23.     margin: 0;
  24.     padding: 4px; }
  25.  
  26. #nav a:link, #nav a:visited, #nav a:active {
  27.     color: #FFFFFF;
  28.     background-color: #3068B1;
  29.     text-decoration: none; }
  30.  
  31. #nav a:hover {
  32.     color: #23518E;
  33.     background-color: #CCCCCC;
  34.     text-decoration: none; }    
  35.  
  36. #nav a.top_parent {     
  37.         margin: 0;
  38.         padding: 7px 18px;
  39.         background: #3068B1 url('../interior/bkg_header.png') 0 0 repeat-x; 
  40.         text-align: center;
  41.         font-weight: bold; 
  42.         border-right: none; }
  43.  
  44. #nav a.top_parent:hover {
  45.     color: #FFFFFF;
  46.     background: none;
  47.     background-color: #3068B1; }    
  48.  
  49. #nav a.align { 
  50.     margin: 0; 
  51.     padding: 7px 18px;
  52.     background: #3068B1 url('../interior/bkg_header.png') 0 0 repeat-x; 
  53.     text-align: center;
  54.     font-weight: bold; 
  55.     border: none; 
  56.     border-bottom: 1px solid #23518E; }
  57.  
  58. #nav a.align:hover {
  59.     color: #FFFFFF;
  60.     background: none;
  61.     background-color: #3068B1;}
  62.  
  63. #nav ul {
  64.     list-style: none;
  65.     margin: 0;
  66.     padding: 0;
  67.     float: left;
  68.        width: auto; }
  69.  
  70. #nav li {
  71.     position: relative;
  72.     min-height: 1px; 
  73.     vertical-align: bottom; }
  74.  
  75. #nav ul ul {
  76.     position: absolute;
  77.     z-index: 500;
  78.     top: auto;
  79.     display: none;
  80.     padding: 1em;
  81.     margin: -1em 0 0 -1em; 
  82.     width: auto; }
  83.  
  84. div#nav li:hover {
  85.     cursor: pointer;
  86.     z-index: 100; }
  87.  
  88. div#nav li:hover ul ul,
  89. div#nav li li:hover ul ul,
  90. div#nav li li li:hover ul ul,
  91. div#nav li li li li:hover ul ul
  92. {display:none;}
  93.  
  94. div#nav li:hover ul,
  95. div#nav li li:hover ul,
  96. div#nav li li li:hover ul,
  97. div#nav li li li li:hover ul
  98. {display:block;}
  99.  
  100. <!--[if lt IE 7]>
  101. <style type="text/css" media="screen">
  102. #nav{float:none;}
  103. body{behavior:url(csshover.htc); font-size:100%;}
  104. #nav ul li{float:left; width: 100%;}
  105. #nav a{height:1%;font:normal 0.7em/1.4em arial, sans-serif;}
  106. </style>
  107. <![endif]-->
  108.  
  109.  
  110. <div id="nav-container" >
  111.  
  112. <div id="nav">
  113.  
  114. <ul><li><a href="http://www.honeymoonersreviewguide.com/index.php" class="align">Home</a></li></ul>
  115.  
  116. <ul><li><a href="http://www.honeymoonersreviewguide.com/planning/index.html" class="top_parent">Planning Tools</a>
    <ul><li><a href="http://www.honeymoonersreviewguide.com/planning/your-perfect-honeymoon.html">Your Perfect Honeymoon QUIZ</a></li><li><a href="http://www.honeymoonersreviewguide.com/planning/timeline.html">Planning Timeline</a></li><li><a href="http://www.honeymoonersreviewguide.com/planning/budget-ideas.html">Budget Ideas &amp; Worksheet</a></li><li><a href="http://www.honeymoonersreviewguide.com/contests/free-honeymoon.html">WIN a Free Honeymoon</a></li><li><a href="http://www.honeymoonersreviewguide.com/planning/honeymoon-registry-tips.html">Registry Tips</a></li></ul></li></ul>
    <ul><li><a href="http://www.honeymoonersreviewguide.com/destinations/index.html" class="top_parent">Destinations</a>
    <ul><li><a href="http://www.honeymoonersreviewguide.com/destinations/top-10-honeymoon-hotspots.html">Top Honeymoon Destinations</a></li><li><a href="http://www.honeymoonersreviewguide.com/africa/index.html">Africa</a></li><li><a href="http://www.honeymoonersreviewguide.com/asia/index.html">Asia</a></li><li><a href="http://www.honeymoonersreviewguide.com/canada/index.html">Canada</a></li><li><a href="http://www.honeymoonersreviewguide.com/destinations/adventure.html">Adventure Locations</a></li></ul></li></ul>
    <ul><li><a href="http://www.honeymoonersreviewguide.com/resorts/index.html" class="top_parent">Hotels</a>
    <ul><li><a href="http://www.honeymoonersreviewguide.com/search.php">Hotel Finder - SEARCH!</a></li><li><a href="http://www.honeymoonersreviewguide.com/resorts/all-inclusive-honeymoons.html">All-inclusive Honeymoon Resorts</a></li><li><a href="http://www.honeymoonersreviewguide.com/resorts/private-islands.html">Private Island Resorts</a></li><li><a href="http://www.honeymoonersreviewguide.com/resorts/vacation-rentals.html">Vacation Rentals</a></li><li><a href="http://www.honeymoonersreviewguide.com/resorts/romantic-room.html">Booking the Perfect Room</a></li></ul></li></ul>
    <ul><li><a href="http://www.honeymoonersreviewguide.com/resorts/packages.html" class="top_parent">Hot Packages</a></li></ul>
  117.  
  118. <ul><li><a href="http://www.honeymoonersreviewguide.com/travel-agents/index.html" class="top_parent">Book a Honeymoon</a></li></ul>
  119.  
  120. <ul><li><a href="http://www.honeymoonersreviewguide.com/cruises/index.html" class="top_parent">Cruises</a>
    <ul><li><a href="cruises/luxury-cruises.html">Luxury Cruise Honeymoons</a></li><li><a href="cruises/destination-weddings.html">Cruise Destination Weddings</a></li></ul></li></ul>
    <ul><li><a href="http://www.honeymoonersreviewguide.com/destination-weddings/index.html" class="top_parent">Destination Weddings</a>
    <ul><li><a href="destination-weddings/wedding-locations.html">Destination Wedding Locations </a></li><li><a href="destination-weddings/styles-ideas.html">Wedding Styles and Ideas</a></li><li><a href="destination-weddings/top-locations.html">Best Wedding Destinations</a></li><li><a href="destination-weddings/celebrity.html">Celebrity Destination Weddings</a></li></ul></li></ul>
    <ul><li><a href="http://www.honeymoonersreviewguide.com/search/search.php" class="top_parent">Search</a></li></ul>
  121.  
  122. </div>
  123. </div>
Reply

« previous question | next question »

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,295 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved