Why won't Opera behave?

HTML & CSS
1

I’ve been working on a redesign of my website/blog, and I think I’ve finally gotten it close to where I want it. The only thing I hadn’t finished was the nav menu, so I tidied that up today. I decided to add some additional text to each menu item to make it more descriptive, so I stuck a <span> inside the <a> tag and used positioning to put the text below the menu item.

It works perfectly in all browsers, except Opera, where it seems to add the x value of my positioning together. The result is that the text gets farther and farther to the right with each item.

Here’s the link. If you view it in FF, Chrome, or IE7+ it seems to work fine. In Opera, it looks like this:

You can see how with each link, the text scoots farther and farther to the right, like the previous positioning is being inherited.

Is this an Opera problem, or is my CSS wrong and the other browsers are just being kind?

2

Hi,
It looks like Opera wants the LI to be a block level when using it as the containing block for your AP span.


[B]ul#navigation li[/B] {
    [COLOR=Blue]display: inline-block;[/COLOR] /*display: inline;*/
    text-align: center;
    position: relative;
    }

However, if you use the anchor as your containing block then Opera will be fine. :wink:

[B]ul#navigation li[/B] {
    display: inline;
    text-align: center;
   [COLOR=Red] /*position: relative;*/[/COLOR]
    }
[B]ul#navigation li a[/B] {
    [COLOR=Blue]display: inline-block;[/COLOR]
    [COLOR=Blue]position: relative;[/COLOR][COLOR=DarkGreen]/*containing  block*/[/COLOR]
    color: #000;
    background: #e5e5e5;
    margin: -3px 0 0 0;
    padding: 0 1em .1em 1em;
    border: 1px solid #333;
    border-top: 1px solid #e5e5e5;
    font-weight: bold;
    font-size: 1.2em;
    text-decoration: none;
    }

Here is a reduced test case of your nav that I was working with


<!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>Test</title>

<style type="text/css">
#header {
    position: relative;
    height: 10em;
    margin: 0;
    width: 100&#37;;
    min-width: 750px;
    padding: 0;
    overflow: hidden;
    border-top: 3px solid #333;
    background:#CCC
    }
ul#navigation {
    position: absolute;
    top: 0;
    right: 8em;
    margin: 0;
    padding: 0;
    list-style: none;
    }
ul#navigation li {
    display: inline;
    text-align: center;
    /*position: relative;*/
    }
ul#navigation li a {
    display: inline-block;
    position: relative;
    color: #000;
    background: #e5e5e5;
    margin: -3px 0 0 0;
    padding: 0 1em .1em 1em;
    border: 1px solid #333;
    border-top: 1px solid #e5e5e5;
    font-weight: bold;
    font-size: 1.2em;
    text-decoration: none;
    }
ul#navigation li a:hover {
    color: #fff;
    background: #E74809;
    border: 1px solid #333;
    border-top: 1px solid #E74809;
    }
ul#navigation li a span {
    position: absolute;
    top: 2em;
    left: 0;
    visibility: hidden;
    color: #000;
    width: 20em;
    text-align: left;
    }
ul#navigation li a:hover span {
    visibility: visible;
    font-size: .8em;
    font-weight: normal;
    }    
</style>

</head>
<body>

<div id="header">
    <ul id="navigation">
    <li><a href="/">Blog<span class="lower">Read about my adventures</span></a></li>
    <li><a href="/bikes/">Bikes<span class="lower">Check out my rides</span></a></li>
    <li><a href="/gallery/">Gallery<span class="lower">Browse my pics</span></a></li>
    <li><a href="/contact/">Contact<span class="lower">Send me an email</span></a></li>
    </ul>
</div>

</body>
</html>
3

Wow, you’re good! That did it, and didn’t affect any other browser.

That’s also something I would not have thought to try even if I’d worked on it 'til the end of time.

Thanks!