Weirdness in a basic nav list

This is a dirt-simple horizontal nav scheme I created for my student design tutorial. (This is the example page, the actual tut is on a different page.)

Two oddities:

First, Opera 10.5 often displays the first nav button as a completely unstyled link until I mouse over it, then the styling displays. Has anyone else seen this? I’ve seen it several times on my copy of Opera, on mine and others’ sites, so it’s not just this code (and it doesn’t get much simpler than this code…)

Second, IE6 and 7 display a “crunched” version of the buttons, with no top or bottom padding, unless I put something above and below the nav HTML. Then the browser displays it correctly. (I’m updating the page to add a header above and a “go back” link below, but I’m leaving it as it is now for your perusal.) Is this a hasLayout issue, or another IE bug? I don’t have access to IE8, so until Browsershots comes through (still waiting), I can’t tell if it happens on that page also.

Thanks, guys.

Edit: Browsershots displays it as OK in IE8, fyi…

You went to school? I learned this sitting in the barn, writing on chunks of slate by lantern light while dodging kicks from Mama’s cow…

Works nicely. Thanks! Interestingly, in Opera 10.5, your code does display the background colors and borders on the first link (which it did not before), but still displays the link text as an unstyled blue until hovered. I’ll just change the tut slightly and give a brief explanation in an HTML comment (which will greatly amaze some of them, who didn’t listen when we did comments and won’t know what the hell that comment is doing in there).

Opera will just have to go whistle, the kids need to learn the styling the LVHA way our pappies and grandpappies did, hauling pixels to the barn in the snow, wrangling rowdy code with nothing but their bare hands…

um, let me stop now. :slight_smile:

I’m not sure I want to use an inline-block declaration on the anchor because the students checking the source code will be greatly confused.

You could take this approach

#navlist a {
padding: 6px 20px;
zoom:1;/don’t ask don’t tell/ :x
background: #006400;
border: 2px inset #bced91;
}

Hiya Ray,

Damn IE and its haslayout problem. I’m not sure I want to use an inline-block declaration on the anchor because the students checking the source code will be greatly confused. (“That’s not in the tutorial, what’s that doing there?” And with my kids, “This ain’t right, I quit.”) If sticking a header and a “go back” link triggers IE’s layout and overcomes the crunching, I’m good to go.

I won’t post the update until you get a chance to take a look at it in Opera 10.5. It is truly an odd little glitch.

That 100% body width was left over from an earlier iteration that was drastically rewritten. I didn’t remove it because I looked right through it at everything else. :wacko:

I appreciate your tightening up the code (losing the div). I followed Russ Weakley’s first two menus on the Listamatic site, in part because I wanted the kids to see how the site’s nav scheme originated in Weakley’s very different (in appearance) scheme, and he hung some of his styling off the div. But your div-less code is more efficient and semantically more correct. That crossed my mind while I was putting together the page, but I was in a hurry to crank it out before the kids came to that part of the lesson, and I just slammed it together. (Haste kills efficiency.) Now that I have some time, I’m gonna follow your lead and rewrite it properly, and Weakley can keep his unnecessary div. Thanks!

(Tomorrow night, or actually tonight since it’s just past midnight, the kids display their sites during Family Night. I printed out the code for each site and will have it ready for the parents to flip through as they view their kids’ sites [the ones that weren’t so saturated with gang-related references that I couldn’t display them]. Having the parents gape over their kids’ “fancy” code ought to make an impression!)

Damn IE and its haslayout problem. I’m not sure I want to use an inline-block declaration on the anchor because the students checking the source code will be greatly confused.
Well, you might consider giving a crash course on haslayout because it is a part of real world coding. I’ll let it go at that but inline-block in this case was an easy way to trip haslayout and work with real browsers at the same time.

I won’t post the update until you get a chance to take a look at it in Opera 10.5. It is truly an odd little glitch.
It looks like I just found it! Opera did not like the background and border styling on the a:link, it wants it on the “a” only.

Your tut just got more confusing for the poor little kiddies :smiley:

Try this -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Example Navigation &raquo; Best Practices Web Design</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font:100&#37;/1.2 arial,helvetica,sans-serif;
}
#navlist {
    margin: 20px;
    padding: 0;
    list-style: none;
}
#navlist li {
    display:inline;
    font-size: 1.25em;
}
#navlist a { 
    padding: 6px 20px;
    display:inline-block;/*haslayout IE6/7 and keep inline format for good browsers*/ 
    background: #006400;
    border: 2px inset #bced91;
}
#navlist a:link, 
#navlist a:visited {
    color: #bced91;
}
#navlist a:hover {
    color: #006400;
    background: #bced91;
    border: 2px outset #006400;
}

</style>

</head>
<body>

<ul id="navlist">
    <li><a href="#nogo" title="Home">Home</a></li>
    <li><a href="#nogo" title="About Me">About Me</a></li>
    <li><a href="#nogo" title="Links and Credits">Links and Credits</a></li>
    <li><a href="#nogo" title="Contact Us">Contact Us</a></li>
</ul>

</body>
</html>


Hi Michael,
Go ahead and set the font color for your a:link on the “a” as well and Opera will comply on page load. I have always styled my “a” rather than using a:link when doing menus, never had problems when doing it like that. If you want to use a:link then the code below works, there is definitely something buggy going on with Opera there.


#navlist a {
    padding: 6px 20px;
    display:inline-block;/*haslayout IE6/7 and keep inline format for good browsers*/
    background: #006400;
    color: [COLOR=Blue]#bced91;[/COLOR] /*opera compliance*/
    border: 2px inset #bced91;
}
#navlist a:link,
#navlist a:visited {
    color: [COLOR=Blue]#bced91;[/COLOR]
}
#navlist a:hover {
    color: #006400;
    background: #bced91;
    border: 2px outset #006400;
}

Opera will just have to go whistle, the kids need to learn the styling the LVHA way our pappies and grandpappies did, hauling pixels to the barn in the snow, wrangling rowdy code with nothing but their bare hands…

um, let me stop now. :slight_smile:
That should get Opera sorted out.

Yeah, don’t forget walking 10 miles uphill (both ways) in the rain and snow to web dev school. :lol:

it gave me a y-axis scrollbar

That was a typo, I meant x-axis. It was giving a horizontal scrollbar.

Hi Max,
I am on my way to download Opera 10.5 for other reasons but I will take a look at your page in it later. It does not show the problem you mention in Opera 10.10

Second, IE6 and 7 display a “crunched” version of the buttons, with no top or bottom padding, unless I put something above and below the nav HTML. Then the browser displays it correctly. (I’m updating the page to add a header above and a “go back” link below, but I’m leaving it as it is now for your perusal.) Is this a hasLayout issue, or another IE bug?
It sure is! If you want to keep your inline formatting and trip haslayout at the same time without having to use any hacks then inline-block on the anchor is the way to go. It just sets haslayout for IE and good browsers will treat it like an inline element.

I took the liberty of removing that 100% width from the body since it gave me a y-axis scrollbar by adding the default margins to the width.

You should see a missing div too, I can explain that if you would like. I read your tutorial on the menu, what was the reason for the div?

Well, we put the navigation scheme inside those div tags for a reason…
Anyhow, see how this works in IE6/7 now and I’d be curious to know if anything changed in Opera 10.5

Cheers :slight_smile:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Example Navigation &raquo; Best Practices Web Design</title>

<style type="text/css">
body {
    /*width:100%;*/
    margin:0;
    padding:0;
}
#navlist {
    margin:20px;
    padding:0;
    list-style: none;
}
#navlist li {
    display: inline;
    font-size: 1.25em;
}
#navlist a { 
    padding: 6px 20px;
    display:inline-block;/*haslayout IE6/7 and keep inline format for good browsers*/ 
}
#navlist a:link, #navlist a:visited {
    color: #bced91;
    background: #006400;
    border: 2px inset #bced91;
}
#navlist a:hover {
    color: #006400;
    background: #bced91;
    border: 2px outset #006400;
}

</style>

</head>
<body>

<ul id="navlist">
    <li><a href="#nogo" title="Home">Home</a></li>
    <li><a href="#nogo" title="About Me">About Me</a></li>
    <li><a href="#nogo" title="Links and Credits">Links and Credits</a></li>
    <li><a href="#nogo" title="Contact Us">Contact Us</a></li>
</ul>

</body>
</html>