IE7 contents spilling out of fixed height DIV 1

organicg · Jul 13, 2011

The problem is in IE7 or IE8 Compatibility Mode.
The child DIVs of <div id="TX-Events"> are spilling out vertically of the parent DIV that has height:259px; and overflow:auto; specified.

This is a widget, that's why all the '!important' styles. Height and width are dynamically written to <div id="TX-Events"> as inline styles via javascript.

Copy the HTML page below for testing(note IE8 seems to not offer Compatibility Mode as an option when serving the .htm off the file system vs. a web server).

Thanks so much!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
	<head>
	
	<style type="text/css">
	    #TX-Events, #TX-Events ul, #TX-Events li, #TX-Events div, #TX-Events a
    {
        background: 0 0;
	        bottom:auto !important;
	        clear:none !important;
	        clip:auto !important;
	        color:inherit !important;
	        content:normal !important;
	        counter-increment:none !important;
	        counter-reset:none !important;
	        cursor:auto !important;
	        direction:inherit !important;
	        display:inline !important;
	        float:none !important;
	        font-family: inherit !important;
	        font-size: inherit !important;
	        font-style:inherit !important;
	        font-variant:normal !important;
	        font-weight:inherit !important;
	        height:auto !important;
	        left:auto !important;
	        letter-spacing:normal !important;
	        line-height:inherit !important;
	        list-style:disc outside none;
	        margin:0 !important;
	    /*max-height:0 !important;
	    max-width:0 !important; These two were not overridden and were being honored*/
	        min-height:0 !important;
	        min-width:0 !important;
	        overflow:visible !important;
	        padding:0 !important;
	        position:static !important;
	        quotes: "" "" !important;
	        right:auto !important;
	        table-layout:auto !important;
	        text-align:inherit !important;
	        text-decoration:inherit !important;
	        text-indent:0 !important;
	        text-transform:none !important;
	        top:auto !important;
	        unicode-bidi:normal !important;
	        vertical-align:baseline !important;
	        visibility:visible !important;
	        white-space:normal !important;
	        width:auto !important;
	        word-spacing:normal !important;
	        z-index:auto !important;
        border-left-style: none !important;
        border-left-width: medium !important;
        border-right-style: none !important;
        border-right-width: medium !important;
        border-top-style: none !important;
        border-top-width: medium !important;
        border-bottom-style: none !important;
        border-bottom-width: medium !important;
    }

    #TX-Events, #TX-Events ul, #TX-Events div
    { display:block !important;}

    /*Specific element defaults
    Some of these are browser defaults; some are just useful resets
    */
    #TX-EventsContainer {
        display:inline !important;
    }
        
    #TX-Events strong {
	    font-weight:bold !important;
    }
    #TX-Events em {
	    font-style:italic !important;
    }
    #TX-Events a, #TX-Events a * {
	    cursor:pointer !important;
    }
    #TX-Events a:hover {
	    text-decoration:underline !important;
    }

    #TX-Events li {
        display:list-item !important; 
        list-style-type:none !important;
    }

    #TX-Events blockquote:before, #TX-Events blockquote:after, #TX-Events q:before, #TX-Events q:after, #TX-Events li:before, #TX-Events li:after  {
	    content: "" !important;
	    content:none !important; /* HTML5 */
    }

    #TX-Events hr {
	    display:block !important;
	    height:1px !important;
	    border:0 !important;
	    border-top:1px solid #ccc !important;
	    margin:1em 0 !important;
    }
    /*End Specific element defaults*/

    #TX-Logo-Small{
	    background:#f0eeef url('[URL unfurl="true"]http://www.TEMP.com/images/small.png')[/URL] no-repeat scroll 50% 10px !important;
	    height:57px !important; 
	    padding:0px !important;
	    cursor:pointer;
	    display:block;
    }

    #TX-Logo-Medium{
	    background:#f0eeef url('[URL unfurl="true"]http://www.TEMP.com/images/medium.png')[/URL] no-repeat scroll 50% 5px !important;
	    height:71px !important; 
	    padding:0px !important;
	    cursor:pointer;
	    display:block;
    }

    #TX-Events {
  	    font-size:12px !important;
        font-family:Arial, Helvetica, sans-serif !important;
        padding:10px 10px 0 !important;
	    overflow:auto !important;
	    background-color:#f0eeef !important;
	    border-bottom:10px solid #f0eeef !important;
        }

    #TX-Events img#Loading{
        display:block !important;
        margin:50px auto !important;
    }
    #TX-Events .event ul {
        list-style-type:none !important;
        float:left !important;
        width:75% !important; 
        margin-bottom:5px !important;
        }

    #TX-Events .event .title a {
        color: #616B76 !important;
        padding: 0 !important;
        text-decoration: none !important;
	    font-weight:bold !important;
    }

    #TX-Events .event ul li {
        margin-bottom:7px !important;
        width:100% !important;
        }

    #TX-Events .event .buy_tix {
        float:left !important;
        margin:14px 0 !important;
        }

    #TX-Events .event .buy_tix a {
        color:white !important;
        background:#900 !important;
        -moz-border-radius: 5px !important;
        -webkit-border-radius: 5px !important;
        border-radius: 5px !important; /* future proofing */
        -khtml-border-radius: 5px !important; /* for old Konqueror browsers */
        padding:3px !important;
        text-decoration: none !important;
	    text-transform:uppercase !important;
	    font-size:10px !important;
     }

    #TX-Events .event a:hover { text-decoration:underline !important;}

    #TX-Events .event { 
        border-bottom:1px solid #CCC !important;
        padding:5px !important;
        margin-bottom:5px !important;
        background:#FFF !important;
        overflow:auto !important;
        position:relative !important;
        }
	</style>
	
	<title>Event Sample</title>
	</head>
<body>

<div id="TX-EventsContainer">
	<a href="#" target="_blank" id="TX-Logo-Medium" style="width:400px !important;"></a>
	<div id="TX-Events" style="height:259px !important; width:380px !important;">

        <div class="event">
             <ul>
     	        <li class="title"><a target="_blank" href="#" id="control00_linkEventUrl">Game 1 </a></li>
     	        <li>Venue 1 - <span id="control00_lblEventzTimeDisplay">09/17/11 - 7:00 PM</span></li>
             </ul>
             <div class="buy_tix"><a target="_blank" href="#" id="control00_linkBuyUrl">
                                Buy Tickets</a></div>
        </div>
    
        <div class="event">
             <ul>
     	        <li class="title"><a target="_blank" href="#" id="control01_linkEventUrl">Game 2 </a></li>
     	        <li>Venue 1 - <span id="control01_lblEventzTimeDisplay">11/28/11 - 7:00 PM</span></li>
             </ul>
             <div class="buy_tix"><a target="_blank" href="#" id="control01_linkBuyUrl">
                                Buy Tickets</a></div>
        </div>
    
        <div class="event">
             <ul>
     	        <li class="title"><a target="_blank" href="#" id="control02_linkEventUrl">Game 3</a></li>
     	        <li>Venue 1 - <span id="control02_lblEventzTimeDisplay">07/10/12 - 8:00 PM</span></li>
             </ul>
             <div class="buy_tix"><a target="_blank" href="#" id="control02_linkBuyUrl">
                                Buy Tickets</a></div>
        </div>
    
        <div class="event">
             <ul>
     	        <li class="title"><a target="_blank" href="#" id="control03_linkEventUrl">Game 4 </a></li>
     	        <li>Venue 2 - <span id="control03_lblEventzTimeDisplay">07/11/12 - 7:30 PM</span></li>
             </ul>
             <div class="buy_tix"><a target="_blank" href="#" id="control03_linkBuyUrl">
                                Buy Tickets</a></div>
        </div>
    
        <div class="event">
             <ul>
     	        <li class="title"><a target="_blank" href="#" id="control04_linkEventUrl">Game 5</a></li>
     	        <li>Venue 2 - <span id="control04_lblEventzTimeDisplay">07/12/12 - 8:00 PM</span></li>
             </ul>
             <div class="buy_tix"><a target="_blank" href="#" id="control04_linkBuyUrl">
                                Buy Tickets</a></div>
        </div>
    
        <div class="event">
             <ul>
     	        <li class="title"><a target="_blank" href="#" id="control05_linkEventUrl">Game 6 </a></li>
     	        <li>Venue 3 - <span id="control05_lblEventzTimeDisplay">07/15/12 - 7:30 PM</span></li>
             </ul>
             <div class="buy_tix"><a target="_blank" href="#" id="control05_linkBuyUrl">
                                Buy Tickets</a></div>
        </div>
    </div>
</div>

</body>
</html>

ChrisHirst · Jul 14, 2011

Compatibility" mode is compatible with the IE5 rendering model, complete with faulty box model, ignoring/buggy overflow settings and using height as min-height. (amongst many others)

So no matter how many "!important" hacks you cram in there it's not likely to work

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

vacunita · Jul 14, 2011

Just remove the position:relative; you are giving your .event divs and it should work.

Code:

#TX-Events .event { 
        border-bottom:1px solid #CCC !important;
        padding:5px !important;
        margin-bottom:5px !important;
        background:#FFF !important;
        overflow:auto !important;
        [red]position:relative !important;[/red]
        }

As a side note: Making every single style !important defeats the purpose of it being important. Because if everything is important, then nothing is. The important switch makes a style be applied no matter what, but if everything else is being applied no matter what also then you return to having the styles be applied in order of appearance.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

organicg · Jul 14, 2011

That worked, thank you so much! I'm a dev, not a designer, so I spent two days on this before even posting it to TT.com.
FYI, note my original comment about the use of '!important'. This is a javascript widget and so I'm using !important to override the hosting page's styles.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

IE7 contents spilling out of fixed height DIV 1

organicg

Programmer

ChrisHirst

IS-IT--Management

vacunita

Programmer

organicg

Programmer

Similar threads

Part and Inventory Search

Sponsor