CODEWITHSUNDEEP
csscss-selectors
zchtodd
zchtodd

Reputation: 1150

CSS Pseudo Class Inheritance

I'm trying to understand why my CSS functions in Opera, but does not in Firefox. The effect I'm after is simply a button that, when hovered over, displays a drop down. 

<html>
<head>

<style>

.dropcontrol {
    background-color: red;
}

.dropdown {
    display: none;
}

.dropcontrol:hover .dropdown {
    display: block;
}

</style>

</head>
<body>

<div class='dropcontrol'>TEST

    <div class='dropdown'>

        <ul>

            <li>Test 1</li>
            <li>Test 2</li>
            <li>Test 3</li>

        </ul>

    </div>

</div>
</body>
</html>

The problem appears to be the .dropcontrol:hover .dropdown. Any ideas as to why this would work in Opera, but not Firefox?

Thank you for your time.

Upvotes: 2

Views: 1383

Answers (4)

zchtodd
zchtodd

Reputation: 1150

Okay, I'm not entirely sure why this changes the way Firefox works, but the answer was to include the doctype tag as xhtml-transitional.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/    xhtml1/DTD/xhtml1-transitional.dtd">

Upvotes: 1

Pamela
Pamela

Reputation: 93

Here is one solution for firefox. I have never used Opera and I have never seen a dropdown attempted the way you have posted it. This is how I usually do it.

.dropcontrol {
background-color: red;
}

.dropcontrol li ul {
visibility:hidden;
}

.dropcontrol li:hover ul {
visibility:visible;
}


<div class='dropcontrol'><ul><li>TEST

    <ul>

        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>

    </ul>
</li></ul>

</div>

Upvotes: 1

Shauna
Shauna

Reputation: 9596

I'm not sure why your particular setup doesn't work, but there are better ways to go about doing it.

For starters, it's generally a better idea to do what you're doing with all lists. So you'd have something like:

<ul class="dropcontrol">
  <li>Test
    <ul class="dropdown">
       <li>Test 1</li>
       <li>Test 2</li>
       <li>Test 3</li>
    </ul>
  </li>
</ul>

If you have to keep dropcontrol as a div, then you can clean up what you have by removing the dropdown div and giving the ul tag the dropdown class.

Also, depending on what, exactly, you're trying to do, the <select> element may also be a better choice.

Upvotes: 2

Soatl
Soatl

Reputation: 10592

I think it has to do with this code:

.dropcontrol:hover .dropdown {
    display: block;
}

What happens if you add .dropdown:hover? Does that help? You may also be getting some other issues with css, try adding !important, that could help as well.

On another note, if your having troubles with only firefox or only Opera, you can do something like this to code css for each specific browser (may be helpful once you better know the issue)

FireFox

@-moz-document url-prefix() {
    #someID {
        position: relative;
        top: -1px;
    }
}

Opera

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    #my-id { clear:right; }
}

Upvotes: 0

Related Questions