1 reply [Last post]
greenstork
Offline
Regular
Last seen: 17 years 28 weeks ago
Joined: 2003-07-16
Posts: 16
Points: 0

Hi all, I'm having trouble positioning my navigation bar in IE 6. I designed the site and tested it on a Mac in Safari and IE 5.2 (Mac). The navigation bar lines up fine on both of those browsers (perhaps a couple pixels off in IE 5.2) but is about 5-7 pixels too high on the page in IE 6 (Win).

Can anyone offer any suggestions, what am I doing wrong here?

The site in question is www.dayinthepark.org

I don't believe that it is a problem with absolute positioning since I had it positioned relatively too and that still caused issues. Here is the HTML in question and corresponding CSS:

<body id="home">
<div id="container"> 
  <div id="banner"> 
    <h3><span> Earth Share of Washington &amp; IKEA present</span></h3>
    <h2><span>Day in the Park - June 12, 2004</span></h2>
    <ul id="minitabs">
      <li><a href="/"  class="active">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/directions">Directions</a></li>
      <li><a href="/work">Work &amp; Maps</a></li>
      <li><a href="/sponsors">Sponsors</a></li>
    </ul>
	</div>

And here's the CSS:

#banner h3 { 
	height:50px;  
	background-image:  url(../images/ikea_header.gif); 
	background-repeat: no-repeat;  
}

#banner {
            border-bottom: 1px solid #333;
            background: rgb(224,239,246);
            margin:0;
            }

#banner h2 {
	height:214px;   
	background:   url(../images/ditp_banner.gif) no-repeat; 
	}

#minitabs {
   	position:absolute;
	top:233px;
	
	}

#minitabs li {
	margin: 0; 
	
	display: inline;
	list-style-type: none;
	}
	
#minitabs a:link, #minitabs a:visited {
	float: left;
	font-size: 135%;
	line-height: 14px;
	padding:0 2px;
	font-weight: bold;
	font-variant:small-caps;
	
	margin: 0px 10px;
	text-decoration: none;
	color: rgb(224,239,246);
	}

#minitabs a.active:link, #minitabs a.active:visited, #minitabs a:hover {
	border-bottom: 4px solid rgb(224,239,246);
	padding-bottom: 3px;
	background: transparent;
	color: rgb(224,239,246);
	}

#minitabs a:hover {
	color: rgb(224,239,246);
	}

Any help appreciated, thanks in advance.

Dave

EDIT: Figured it out finally. I added a display:block to #minitabs and it works in every browser now. It even fixed the 2 pixel misalignment in IE 5.2. Ahhh, the joy of not spending 2 hours troubleshooting one of these problems, woohoo!

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 37 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

IE6 Navigation bar positioning problem

There is a way to get your menu at the bottom of the banner area and get it to grow UP rather than down. If you create an absolutely positioned div of sufficient size with its bottom edge at the bottom of your banner, and absolutely position WITHIN it your ul#minitabs with a property bottom:0; - it will anchor at the bottom of your banner and any font-size changes will make it grow upwards. You need to do some fine tuning to make it work. It would require something like:

    <div id="tabholder"><ul id="minitabs">
      <li><a href="/"  class="active">Home</a></li>
      <li><a href="/about">About</a></li>

      <li><a href="/directions">Directions</a></li>
      <li><a href="/work">Work &amp; Maps</a></li>
      <li><a href="/sponsors">Sponsors</a></li>
    </ul></div>
...
#tabholder {display:block;
   	position:absolute;
   	top:166px;
   	height:100px;
}   	
#minitabs {
   	position:absolute;
	bottom:0px;
	margin:0;
	display:block;
	/*may have to play with some ems based bottom-margin or padding*/
	}

Anyhow, give it a whirl if you want.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS