Css line-height breaks dropdown hover

HTML & CSS
1

Hi:

I got the solution but am unsure WHY this breaks my dropdown menu. Great step by step article: http://ago.tanfa.co.uk/css/examples/menu/index.html …

if you wrap each top level menu item in ul tags and nest the children uls in li tags. Wordpress wp_list_pages() doesn’t do that. The supposedly new and working page_menu() doesn’t work. So the code below is HOW I HAVE TO DO IT unless I bloat it up with PHP to get those buggers wrapped in ul tags.

With FireBug on (and doing the initial styling in FireFox) you can see where there “might” be a prob, but after changing paddings and margins on the main div and the content div (not shown), you’ll still be nowhere. So by turning off CSS files one by one, I found the offending file and lucky me, found the problem quickly - if you forget about the time wasted looking at MY CSS for an error. Note that this is a wordpress child theme and at the mercy of the parent theme’s reset and other styling. Yeah… thematic’s default.css .

I put the line-height property in the body rule to illustrate the problem. At line-height: 22px;, when you hover over “Top Level Item in Question” the submenu drops down like it should but if you slowly move the mouse pointer down, the dropdown re-hides itself just as you get to the spot between elements. Even if you add high z-orders. I thought it was because the original page had some overlap going on right there – the padding on the main div (to make room for the menu under the masthead) … the padding and margins on the content divs… along with all the boundaries created by the list itself. I figured there was some gap causing the :hover to end up on the content or main div boundary.

Go ahead and change the line-height to 16px and it won’t happen. 20px seems to work, but I might want more spacing.

WHY does it happen?

The element with the big line-height is still over top of a ul or li that has a :hover style set.

Should I set the correct line-height on a ul, li, or a? Should I pad or margin something to get a reasonable spacing? I don’t want the list items scrunched together. And I’m downright tired of thinking about it.

Thanks in Advance and hope this helps someone before they throw their monitor out the window.

Mike

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css" media="screen">

body {
    line-height:22px;
    background-color: grey;
}

p {
    margin: 0px; /* keeps the white / grey space from between divs in this example */
}

#header {
    background-color: red;
    /*border: 1px solid white;*/
    margin: 0;
    padding: 0;
}

#main {
    position: relative;
    background-color: orange;
    padding: 30px 0 0 0;
}

#footer {
    background-color: yellow;
}

#nav_top {
    position: absolute;
    height: 20px;
    top: 10px;
    left: 40px;
}

#nav_top ul {
    list-style: none;
    list-style-position: outside;
    background-color: green;
    margin: 0;
    padding: 0;

}

#nav_top li {
    position: relative;
    display: inline-block;
    margin: 0px 30px 0px 0px;
    height: 20px;
    background-color: blue;
    vertical-align: top;
}

#nav_top .children {
    display: none;
    position: absolute;
    background-color: black;

}

#nav_top li:hover ul {
    display: block;
    overflow: visible;
}

#nav_top .current_page_item a {
    color: darkGrey;
}

a {
    color: black;
    text-decoration: none;
    white-space:nowrap;
}


</style>

</head>
<body>

<div id="wrapper">

    <div id="header">
        <p>Header Blah</p>
    </div>

    <div id="main">
        <p>Content Blah</p>
        <div id="nav_top">

        <ul>
            <li class="page_item page-item-4 current_page_item"><a href="#" title="Home">Home</a></li>
            <li class="page_item page-item-25"><a href="#">Community</a></li>
            <li class="page_item page-item-30"><a href="#">News and Events</a></li>
            <li class="page_item page-item-9"><a href="#">Top Level Item in Question</a>
                <ul class='children'>
                    <li class="page_item page-item-15"><a href="#">Child Item 1</a></li>
                    <li class="page_item page-item-17"><a href="#">Child Item 2</a></li>

                    <li class="page_item page-item-19"><a href="#">Child Item 3</a></li>
                </ul>
            </li>
            <li class="page_item page-item-23"><a href="#" >More Stuff</a></li>
            <li class="page_item page-item-27"><a href="#" >About</a></li>
        </ul>
        </div><!-- #crmgc_nav -->
    </div><!-- #main -->
    <div id="footer">
        <p>Footer Blah</p>
    </div><!-- #footer -->

<div><!-- #wrapper -->

</body>
</html>
2

Hi MikeCo. Welcome to SitePoint. :slight_smile:

The problem is that you have a height of 20px set on your LIs:


#nav_top li {
    position: relative;
    display: inline-block;
    margin: 0px 30px 0px 0px;
    [COLOR="#FF0000"]height: 20px;[/COLOR]
    background-color: blue;
    vertical-align: top;
}

So whenever the line height on the <body> exceeds 20px, it messes things up. Just remove that height setting and you can have any line height you like. It’s usually a bad idea to set a height on elements (except maybe things like images or their containers).

3

Thanks Ralph

What about the 20px height I put on the #nav_top div? Ah… I see that doesn’t matter, but is it a bad idea to put a height on a div and why? I can understand a p element’s margin overflowing a div with a lesser height. I was going to ask about heights that I normally use on header and footer divs. When you say elements, you don’t mean divs, right? Lots of refs to divs as “container elements”.

So I added padding to the content to push it down and leave room for the menu. I set the menu div to 20px height and positioned it to center between the header and content. Looks good on the actual page I’m styling, but I need to think of a way to pretty it up when it wraps on an iPad.

Thanks Again.
Mike

4

It’s usually a bad idea to set a height on elements

The web is not paper; it’s a fluid and dynamic medium. you have to design around this concept. Even if your layout had worked in your machine, for example… there could be someone out there who has (OR NEEDS… this is called ‘accessibility’) to set their font size larger than your design would accommodate… that would break your layout and you would not know it until you hear clients complain. Also keep in mind that a px is not the same physical size in all monitors… it is possible that people with hi-res screens may find 20px to be nearly unreadable ( accessibility again) and thus be force to set their fontsize larger… and break your layout.

5

Hi Dres

Kinda what i was thinking.

But in case you didn’t understand my question, I was asking if it’s ok to assign a height to a div. I understand how poorly text size scales when it’s specified in px. This is the only time I’ve had to tinker with the text size of the underlying theme.

Ralph said, “(except maybe things like images or their containers)” in regards to “images or their containers”. Well, my header IS an image container. It also contains a title, description, and a search box. It all zooms nicely here, but who knows? The image is the size of the desired header. I also use a transparent gradient overlay as background image of an inner wrapper to the header. The image MIGHT (i don’t trust anything) do the job of sizing the header. For mobile devices, I switch in smaller images with the @media thing - screen width conditionals. I also change the css on the header size, footer size, and the layout.

My design does scale, but maybe in older browsers it won’t - like text overflowing a div. I just reread an article about using ems and percentages. It mentioned that things are scaling better these days, but IIRC, text resizing (or is it the browser’s default text size?) and zooming aren’t necessarily the same.

Ok… look at the editor toolbar here (I’m using a quick reply box). See the nice gradient? In my header and footer I have a 1px gradient image with a height of 170 px. I adjust the vertical position to make the gradient look right in different divs like the header and footer - overflow: hidden; So that alone will not set the header height. I also have little content header divs. I don’t want these divs shrinking or anything that doesn’t scale right to change the positioning of other elements within. I might have a lower navigation at the top of the footer div and in the lower right, social media links. With other stuff at the very bottom. Should I use min-height? I thought I read that that was bad. or maybe min-width was bad. Maybe css is bad.

Now if absolutely positioning things in a header or footer is bad I’d like to know how wordpress gets all those widget areas positioned. I suppose I’ll have to check. I will be checking all the css that came with this theme and switching from px to ems. Not my fault. The author of thematic used px and I’ll need to check to make sure I override everything. Great book sold here – Design Your Own Wicked Wordpress Theme. I wish the author would have not so strongly suggested starting with a theme and developing a child theme - opting instead for teaching what the title suggests.

Rockville, Eh? BTDT. Rock State Park. Fun town on memorial day, too 8)

Thanks
Mike

6

Yeah, ,Rockford only seems to have a life on that one weekend. lol.

Again, this is dogma… display-potential wise… there is no difference between an LI , UL , or DIV. If you add height to a container you are asking for either the same issue, or overflow problems. it just strikes me that you are trying to build a design based on PXs… that’s bound to lead to headaches that are even worse than this.

JUST for a thought…

if you had kept the height of you LI at 20px… you created a BOX whose height was 20px…and NO MORE… no matter how the content was… which means any :hover state would only apply to those 20px… making it a game of how quickly can the view jump the gap before the submenu closes. So again … am trying to illustrate the concept of a dropdown that you must have AT LEAST some overlap between the PARENT LI and the CHILD UL in order to prevent this. Having a FIXED height only adds to any “complications”

Oh And I hope I wasn’t sounding accusatory… most available WP themes have HORRENDOUS CSS ( am always thinking/hoping that most people get them for any back-end CMS goodies or plug ins that they may offer?) Really it’s only slight harder to do a layout from scratch… and its easier to maintain from that point on. So it’s possible the CSS was built only to accommodate a PSD background rather than actual content… but I think am beginning to channel another forum member now.