CSS IE7 How can I force UL inside LI to be wider than the parent


Tags: css,internet-explorer-7,internet-explorer-9

Problem :

I have a drop down menu and it works perfectly except for Internet Explorer 7. Thank you MS.

For demonstration purposes I created this simple HTML. The dropdown menu is open to quickly illustrate the problem. In IE 7 the dropdown menu is cut to the width of the top level menu. In IE8 and IE9 this is not a problem.

I can fix the issue by adding the following javascript:

element.style.width = 320px

Works perfectly, however I need this done automatically like IE8 or IE9 would do, otherwise I have to calculate each dropdown width separately.

HTML below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        ul.menu {list-style:none;font:10px Trebushet MS;font-weight:bold;margin:0;padding:0;position:absolute;left:86px;top:90px;line-height:100%;height:15px}
        ul.menu * {margin:0;padding:0;cursor:pointer}
        ul.menu .header {position:relative; float:left;color:#999999;padding: 3px 12px 2px 4px;white-space:nowrap}
        ul.menu .header ul {position:absolute; top:15px; left:0;background:#f0f0f0; overflow: hidden;list-style:none}
        ul.menu .header ul li {position:relative; padding: 3px 25px 3px 10px; white-space:nowrap; display: block}
        ul.menu .header ul li:hover {background-color:#dcdcdc}
    </style>
</head>
<body>
<ul class="menu" id="menu">
    <li class="header">
        CREATE
        <ul>
            <li>A really really long description of nothing valuable</li>
            <li>test1</li>
            <li>test2</li>
            <li>test3 and again very long</li>
        </ul>
    </li>
    <li class="header">
        SEARCH
        <ul>
            <li>test1</li>
            <li>test1</li>
            <li>test1</li>
            <li>test1</li>
        </ul>
    </li>
</ul>
</body>
</html>


Solution :

The overflow property set for the the nested ul is the cause here. Removing the overflow: hidden property from ul.menu .header ul should correct this.

See a fiddle here: http://jsfiddle.net/b45rA/1/embedded/result/. You may need to use the run again command (top right) to render the output as jsfiddle doesn't play that nice with IE7.


    CSS Howto..

    How to align logo and text in bootstrap on small screens?

    How do I change my link's image on click?

    How to bound CSS3 animation to class

    What html or css attribute should I modify so that a mobile browser shows the website with no blank space on the right?

    How to create specified distance between the end of a line and the baseline of the second line using css

    How to enable HTML content on top of Flash content without the frame rate dropping?

    How to dynamically create '@-Keyframe' CSS animations

    How to disable CSS minifier in Liferay?

    How to convert an image for a website menu button into CSS

    How to customize devise login and signup forms created using the simple_form gem?

    How to add custom layout and css in a CakePHP application?

    How to edit the CSS of a selector in Polymer 1.0

    How do I adjust the height of the pikaChoose plugin without ruining the width?

    Css Drop down menu, how to keep menu infront of content

    How to change from one stylesheet to another with jQuery?

    How to handle mouseover properly on a flipped div?

    How to select 1st Column of div Table?

    How to hide/show the content of a div with dynamic height?

    How to resize the clockpicker?

    How to select Parent Div in CSS [duplicate]

    How to put a banner above the fixed navbar of bootstrap which disappears when scrolling down?

    How to prevent css hover effects executing before you reach the element with your mouse?

    How can I access CSS selectors programmatically? [closed]

    How to hide CSS background images that use !important

    Screen scraping pages that use CSS for layout and formatting…how to scrape the CSS applicable to the html?

    How to automate background width in CSS

    How to style 404 page in WAMP server

    How to extend a div's width beyond its wrapper?

    how to hidden image over image in css

    how to build a mobile site - basics, is it all CSS?