Re: [css-d] Site Check and IE6 Help

[Aaron Roberson]

That vertical-align trick did the job on the header. Thank you very
much... I was definately stuck.

Now I only have to get the bug out of the navigation footer. Do you or
anyone else have any ideas on how to fix that?

Here is the html in question:

<div id="wrapper-nav-footer">
                       <p id="page-top"><a href="#top" title="Top">Top</a></p>
                       <ul id="nav-footer">
                               <li><a href="about/index.cfm">About Us</a></li>
                               <li><a
href="products/index.cfm">Products</a></li>
                               <li><a
href="articles/index.cfm">Articles</a></li>
                               <li><a
href="broadcast/index.cfm">Broadcast</a></li>
                               <li><a
href="donations/index.cfm">Donations</a></li>
                               <li><a href="contact/index.cfm">Contact</a></li>
                       </ul>
               </div>
               <div id="wrapper-footer">
                       <p id="copyright">Copyright &copy;
<cfoutput>#DateFormat(Now(),
"yyyy")#</cfoutput> White Horse Media. All Rights Reserved.</p>
</div>

Here is the css in question:

#wrapper-nav-footer{
       clear:both;
       height:56px;
       position:relative;
       background:url(../images/nav_footer_bg.jpg) no-repeat 0 0;
}

#wrapper-footer {
       background: url(../images/footer_bg.gif) no-repeat 0 0;
       /*clear: both;
       position: relative; */
       height: 43px;
}

#page-top a {
       background: url(../images/top_btn.jpg) no-repeat 0 0;
       left: 536px;
       overflow: hidden;
       position: absolute;
       text-indent: -9999px;
       top: 13px;
       width: 20px;
       height: 20px;
       vertical-align:bottom;
}

#nav-footer {
       font-size: 95%;
       height: 33px;
       padding: 26px 10px 0 10px;
}

#nav-footer li {
       display: inline;
       float: left;
       margin: 0;
       list-style-type: none;
}

#nav-footer li a {
       display: block;
       letter-spacing: .2em;
       padding: 7px 0 9px 0;
       text-align: center;
       text-decoration: none;
       text-transform: uppercase;
       font-weight: bold;
       width: 123px;
       background: url(../images/nav_footer_bullet.jpg) no-repeat 50% bottom;
}

I hope that helps to narrow things down to the problem area. Can
anyone see from this why there is a gap between the footer navigation
and the footer itself?

Thanks for the help,
Aaron


> Hi Aaron,
>
> The gap is there due to the image inside the <a> element inside the
> masthead div. The original Inverness JumpStart has a background image
> there, so that's why it doesn't display this problem. An image is inline
> content, so it displays on the baseline of the linebox it's in. That
> means that there is a gap below the image to leave room for potential
> text descenders (like the tail on the "y") that could potentially sit in
> the same linebox with the image.
>
> To fix it, you can either apply "vertical-align: bottom" or "display:
> block" to that image. Block might be problematic because it's inside an
> <a> element, and IE often doesn't like that, but try it and let us know
> how it goes.
>
> Zoe
>
> --
> Zoe M. Gillenwater
> Design Services Manager
> UNC Highway Safety Research Center
> http://www.hsrc.unc.edu
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/