At 8:32 PM -1000 2/12/06, David Faulhaber wrote:
>Things have been going pretty
>well but I'm snagged on the navigation. I followed the "Scalable Navigation"
>example in chapter two of Dan Cederholm's and everything looked great in
>Safari... until I checked the site in Explore, Firefox, and Opera, all of
>which screwed up the nav tabs. Opera displays only two of the tabs (inline),
>while Explorer and Firefox stack all the tabs one on top of the other
>against the left side. I've been trying to troubleshoot this all day but my
>brain is shot and I just can't "see" what the problem might be.

Ah, yes, I found that bug too. I followed that tutorial for my site at

http://www.collageartists.org/

http://www.collageartists.org/stylesheets/caa.css

and I found a bug in the book. Looking at my scribbles, on page 32, 
the problem was the float: left; on the #nav a. You need it for Mac 
IE but not the others.

here's my version:

/* styling horz nav bar  */
div#nav {
        float: left;
        margin: 0;
        padding-left: 15px;
        width: 755px; /* 770 minus padding*/
        border-bottom-width: 2px;
        border-bottom-style: solid;
        border-bottom-color: #7CCB94; /* green*/
        position: absolute; /* *** make #nav flush bottom with #banner  *** */
        bottom: 0; /* *** make #nav flush bottom with #banner  *** */
}
#nav ul {
        margin: 0;
        padding: 0;
}
#nav ul li {
        float: left;
        margin: 0;
        padding: 0;
        display: block;
        list-style: none;
        font-family: "Trebuchet MS", "Lucida Grande", Geneva, Arial, 
sans-serif;
        font-size: 75%;
        letter-spacing: 1px;
}
#nav a {
        float: left; /* *** for IE55Mac - hidden below from others  *** */
        margin: 0 8px 0 0px;
        padding: 4px 6px;
        color: #DCFFD9;
        display: block;
        text-decoration: none;
        background: #000 url(../navbar/navtab_a.gif) repeat-x top left;
        background-color: #3B7980; /*match btm of tab color */

        border: 1px solid #333380;
        border-bottom: none;
}
/* Commented backslash hack hides rule from IE5-Mac WATCH BACKSLASH! \*/
#nav a {
        float: none;
}
/* End IE5-Mac hack */



hope that helps,

Trish



-- 

----------
Trish Meyer, Webmaster
VIVA Gallery
The Valley Institute of Visual Arts
http://www.vivagallery.org
Email: [EMAIL PROTECTED]

______________________________________________________________________
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/

Reply via email to