ie7 bug - floated div with height 100% causes content to disappear

trandrus · #1 (**permalink**) Jun 18th, 2007, 22:26

I have no clue how to fix this, nor have i found much info online. Go here and resize your browser window (shrink it) to see the problem:

http://dev.studioorpheus.com/home.php

I want the inner content div to have a fixed width, remain centered, and to stop moving completely once it hits the edge of the floated nav div on the left.

In firefox, the content wraps underneath. Changing the height of the nav div to 100% causes the nav column to fill to the bottom (showed). This stops the inner content at the nav's edge as it should, but the containing div continues to move past it, shrinking the size of the content. I want the whole div to STOP.

In IE7, when the inner content div hits the edge of the nav div, the whole thing DISAPPEARS COMPLETELY. wtf? I have tried the peekaboo hack (and numerous other hacks) and this does not solve the problem.

I cannot add a left margin to the inner content to stop it from moving because it would render differently in firefox/ie since the width needs to be fixed.

I dare not check IE6 yet.

I always seem to run into this problem in some form when designing layouts but never have found a solution. Please help if you have found a solution for this problem.

Thanks.

Lchad · #2 (**permalink**) Jun 19th, 2007, 00:51

Your post gave me such a chuckle! I can hear your complete frustration!

C'mon dare to go and look in IE6. :rofl:

Ok.. now that I'm done teasing you... I'll post the code.
Basically I added a wrap div around the nav and content divs. This allows you to control the positioning of the content box but it will NOT go behind or over the nav.

Quote:

DISAPPEARS COMPLETELY. wtf?

Still chuckling about this!!!!!!

Float the nav left which you did, and float the content box right.
Feel free to adjust all the dimensions. I was trying to get them close but I was guessing.
html code with conditional comments added because I couldn't figure out what was what without them. You can delete them .. since it is your site!

Code: Select all

<body><div id="header">
        <h1><span id="title">S t u d i o &nbsp; O r p h e u s</span></h1>
    </div>
    <div class="clear"></div>
    <div id="wrapper">
    <div id="nav" align="left">
        <ul>
            <li><a href="#news" id="nav_news" onmouseover="rollOver(this);" onmouseout="rollOut();" onclick="contentSwap('news'); return false;">News</a></li>

            <li><a href="#about" id="nav_about" onmouseover="rollOver(this);" onmouseout="rollOut();" onclick="contentSwap('about'); return false;">About Us</a></li>
            <li><a href="#work" id="nav_work" onmouseover="rollOver(this);" onmouseout="rollOut();" onclick="contentSwap('work'); return false;">Our Work</a></li>
            <li><a href="#contact" id="nav_contact" onmouseover="rollOver(this);" onmouseout="rollOut();" onclick="contentSwap('contact'); return false;">Contact</a></li>
        </ul>
    </div>
    <div id="content">
        <div id="news" name="news">

            <p>Whats new?
            </p>
            <p>Nulla, dolore amet, blandit enim, ullamcorper minim magna ut odio, minim ipsum. Iriure enim dolor iusto ut ex sed delenit veniam luptatum, nostrud nulla illum nostrud. Velit consectetuer hendrerit accumsan vulputate qui commodo consequat vulputate, vel, odio duis. Et vero, nulla suscipit lobortis in quis dignissim molestie zzril feugait eum consequat feugiat praesent, feugait zzril vel consequat aliquip zzril velit ullamcorper in tincidunt.
            </p>
            <p>Wisi exerci ut blandit augue consequat consequat ullamcorper erat nostrud consectetuer in nulla dolore lorem adipiscing enim sit nisl, enim quis luptatum et eros esse. Nulla ea wisi suscipit in, lobortis commodo aliquip aliquip et, te facilisis ad magna augue et luptatum euismod vel adipiscing at dolor esse odio. Molestie te, tation, luptatum ex velit quis laoreet ad dolor iusto commodo, euismod dolore dolor. Suscipit nulla tation vel, ad dignissim minim nulla hendrerit dolore, feugiat aliquam esse, iriure.
            </p>
            <p>Ut iusto ut ex sed delenit veniam luptatum, nostrud nulla illum nostrud exerci consectetuer hendrerit accumsan vulputate qui commodo consequat vulputate, vel. Lobortis duis qui vero, nulla suscipit lobortis in quis dignissim molestie zzril feugait eum consequat feugiat praesent. Ut zzril vel consequat aliquip zzril velit ullamcorper in tincidunt ut wisi sit lobortis vero esse duis, duis, dolor, vel duis dolore tation ut molestie magna. Enim et, elit ex, wisi illum iriure ea vulputate in nulla, eu nisl. In illum volutpat autem iusto nibh duis veniam nulla ad duis nonummy elit facilisis at ea feugait dolore vero wisi blandit molestie lorem tation erat nostrud. Augue eros facilisis suscipit lobortis in esse dignissim consequat zzril nulla eum consequat feugiat praesent nulla, zzril et, eros.
            </p>
            <p>Delenit iusto consequat euismod te, dolor eum lorem tation vel ad dignissim minim wisi hendrerit eu feugiat aliquam molestie iriure tation nulla. Veniam lobortis minim, delenit feugait facilisi eu ut facilisis qui diam esse sit eu, vel nonummy quis dolor ea, quis ullamcorper lobortis qui iusto euismod ut. At et aliquip sed delenit vel consequat dolore qui, consequat, et nostrud wisi feugait odio duis vel laoreet in, accumsan vulputate illum. Suscipit molestie ut praesent, duis duis vel ullamcorper erat nostrud, consectetuer blandit nulla, dolore lorem adipiscing, enim sit nisl in, nostrud luptatum iusto eros esse.
            </p>
            <p>Vero, exerci consectetuer hendrerit accumsan vulputate blandit commodo duis velit te odio. Aliquam qui eros facilisis suscipit lobortis in esse dignissim consequat zzril nulla eum consequat feugiat praesent nulla, zzril et, eros aliquip delenit velit ullamcorper luptatum tincidunt. Eum wisi, amet eu, vero augue, duis dolore in eum dolore, dolore vel. Iriure molestie magna commodo veniam sed ex enim illum iriure, ea velit in nulla facilisi nisl augue dolore ut autem odio. Ea duis, veniam, nulla in autem nonummy, elit enim at. Aliquip feugait dolore vero wisi blandit consequat ipsum tation erat, nostrud dolor ut nibh accumsan accumsan feugait dolor volutpat et veniam. Molestie dolore amet blandit enim suscipit, minim, magna, ut odio veniam ipsum. 
            </p>        
        </div><!--end news div -->

        <div id="about" name="about">
            <p>About Us
            </p>
            <p>Vel ea hendrerit molestie, et zzril, odio facilisis, eu tation odio iriure minim et elit exerci dolore, te. Ex, dolore dignissim, ut blandit duis ex blandit praesent in exerci in nibh suscipit facilisi. Feugait ullamcorper dolore vulputate commodo, suscipit eum duis delenit. Iriure nostrud qui vulputate ut aliquip at, consectetuer ut, volutpat, consequat autem ut amet ipsum te illum suscipit. Dolor nonummy dolore, dolore accumsan in, augue ad tincidunt wisi commodo elit amet feugiat nulla luptatum dolore ut nulla nulla veniam velit feugait accumsan, magna veniam. Minim nibh, sed vero erat duis ea magna eros enim exerci, vel dolor, dignissim volutpat iusto wisi consequat vulputate.
            </p>
            <p>Enim dolore vulputate vel quis lobortis, tation tation facilisis luptatum vel feugait euismod qui feugiat, iusto. Quis in lorem illum consequat dolor minim vel luptatum. Molestie iusto ullamcorper odio ut diam, aliquam consequat at lobortis adipiscing praesent, dolore ea delenit ad ex aliquam, eros.
            </p>
            <p>Duis duis ex blandit praesent in exerci in nibh suscipit facilisi ipsum ullamcorper dolore vulputate commodo, suscipit eum duis delenit augue nostrud qui vulputate ut. Ut at, consectetuer ut, volutpat, consequat autem ut amet ipsum te illum suscipit. Dolor nonummy dolore, dolore accumsan in, augue ad tincidunt wisi commodo elit amet feugiat nulla luptatum dolore ut nulla nulla veniam velit feugait accumsan, magna veniam.
            </p>
            <p>Nibh tincidunt wisi, nulla accumsan delenit nonummy augue lorem, te te nostrud. Dignissim, ut iusto facilisis eu dolor, vel, illum dolore vulputate vel quis lobortis, tation. Nisl facilisis luptatum vel feugait euismod qui feugiat, iusto, adipiscing in lorem illum consequat dolor minim vel luptatum ad iusto. Zzril odio ut diam, aliquam consequat at lobortis adipiscing praesent, dolore ea. Te ad ex aliquam, eros erat duis autem velit molestie euismod dolor commodo enim, molestie qui veniam feugait dignissim zzril augue, esse nostrud vel et sit.
            </p>

            <p>Te qui vulputate ut aliquip at, consectetuer ut, volutpat, consequat autem ut amet ipsum te illum suscipit zzril nonummy dolore. Nisl accumsan in, augue ad tincidunt wisi commodo elit amet feugiat nulla luptatum dolore ut nulla nulla veniam. Duis feugait accumsan, magna veniam, nulla nibh, sed vero erat duis ea magna eros enim. Te, vel dolor, dignissim volutpat iusto wisi consequat vulputate wisi nostrud et. Nostrud et, exerci velit ea volutpat vulputate dolore iusto dolore vulputate vero nulla suscipit, suscipit in velit odio lobortis vel feugait enim. Diam ea blandit facilisis consequat accumsan vero, ut zzril, vulputate nonummy praesent zzril nisl dolor accumsan dolore autem delenit consequat eu, veniam enim. 
            </p>
        </div><!--end about div -->
        <div id="work" name="work">
            <p>Our work
            </p>
            <p>Vel ea hendrerit molestie, et zzril, odio facilisis, eu tation odio iriure minim et elit exerci dolore, te. Ex, dolore dignissim, ut blandit duis ex blandit praesent in exerci in nibh suscipit facilisi. Feugait ullamcorper dolore vulputate commodo, suscipit eum duis delenit. Iriure nostrud qui vulputate ut aliquip at, consectetuer ut, volutpat, consequat autem ut amet ipsum te illum suscipit. Dolor nonummy dolore, dolore accumsan in, augue ad tincidunt wisi commodo elit amet feugiat nulla luptatum dolore ut nulla nulla veniam velit feugait accumsan, magna veniam. Minim nibh, sed vero erat duis ea magna eros enim exerci, vel dolor, dignissim volutpat iusto wisi consequat vulputate.
            </p>
            <p>Enim dolore vulputate vel quis lobortis, tation tation facilisis luptatum vel feugait euismod qui feugiat, iusto. Quis in lorem illum consequat dolor minim vel luptatum. Molestie iusto ullamcorper odio ut diam, aliquam consequat at lobortis adipiscing praesent, dolore ea delenit ad ex aliquam, eros.
            </p>
            <p>Duis duis ex blandit praesent in exerci in nibh suscipit facilisi ipsum ullamcorper dolore vulputate commodo, suscipit eum duis delenit augue nostrud qui vulputate ut. Ut at, consectetuer ut, volutpat, consequat autem ut amet ipsum te illum suscipit. Dolor nonummy dolore, dolore accumsan in, augue ad tincidunt wisi commodo elit amet feugiat nulla luptatum dolore ut nulla nulla veniam velit feugait accumsan, magna veniam.
            </p>

            <p>Nibh tincidunt wisi, nulla accumsan delenit nonummy augue lorem, te te nostrud. Dignissim, ut iusto facilisis eu dolor, vel, illum dolore vulputate vel quis lobortis, tation. Nisl facilisis luptatum vel feugait euismod qui feugiat, iusto, adipiscing in lorem illum consequat dolor minim vel luptatum ad iusto. Zzril odio ut diam, aliquam consequat at lobortis adipiscing praesent, dolore ea. Te ad ex aliquam, eros erat duis autem velit molestie euismod dolor commodo enim, molestie qui veniam feugait dignissim zzril augue, esse nostrud vel et sit.
            </p>
            <p>Te qui vulputate ut aliquip at, consectetuer ut, volutpat, consequat autem ut amet ipsum te illum suscipit zzril nonummy dolore. Nisl accumsan in, augue ad tincidunt wisi commodo elit amet feugiat nulla luptatum dolore ut nulla nulla veniam. Duis feugait accumsan, magna veniam, nulla nibh, sed vero erat duis ea magna eros enim. Te, vel dolor, dignissim volutpat iusto wisi consequat vulputate wisi nostrud et. Nostrud et, exerci velit ea volutpat vulputate dolore iusto dolore vulputate vero nulla suscipit, suscipit in velit odio lobortis vel feugait enim. Diam ea blandit facilisis consequat accumsan vero, ut zzril, vulputate nonummy praesent zzril nisl dolor accumsan dolore autem delenit consequat eu, veniam enim. 
            </p>
        </div><!--end work div -->
        <div id="contact" name="contact">
            <p>Click here to contact me.
            </p>
            <p>Vel ea hendrerit molestie, et zzril, odio facilisis, eu tation odio iriure minim et elit exerci dolore, te. Ex, dolore dignissim, ut blandit duis ex blandit praesent in exerci in nibh suscipit facilisi. Feugait ullamcorper dolore vulputate commodo, suscipit eum duis delenit. Iriure nostrud qui vulputate ut aliquip at, consectetuer ut, volutpat, consequat autem ut amet ipsum te illum suscipit. Dolor nonummy dolore, dolore accumsan in, augue ad tincidunt wisi commodo elit amet feugiat nulla luptatum dolore ut nulla nulla veniam velit feugait accumsan, magna veniam. Minim nibh, sed vero erat duis ea magna eros enim exerci, vel dolor, dignissim volutpat iusto wisi consequat vulputate.
            </p>
            <p>Enim dolore vulputate vel quis lobortis, tation tation facilisis luptatum vel feugait euismod qui feugiat, iusto. Quis in lorem illum consequat dolor minim vel luptatum. Molestie iusto ullamcorper odio ut diam, aliquam consequat at lobortis adipiscing praesent, dolore ea delenit ad ex aliquam, eros.
            </p>

            <p>Duis duis ex blandit praesent in exerci in nibh suscipit facilisi ipsum ullamcorper dolore vulputate commodo, suscipit eum duis delenit augue nostrud qui vulputate ut. Ut at, consectetuer ut, volutpat, consequat autem ut amet ipsum te illum suscipit. Dolor nonummy dolore, dolore accumsan in, augue ad tincidunt wisi commodo elit amet feugiat nulla luptatum dolore ut nulla nulla veniam velit feugait accumsan, magna veniam.
            </p>
            <p>Nibh tincidunt wisi, nulla accumsan delenit nonummy augue lorem, te te nostrud. Dignissim, ut iusto facilisis eu dolor, vel, illum dolore vulputate vel quis lobortis, tation. Nisl facilisis luptatum vel feugait euismod qui feugiat, iusto, adipiscing in lorem illum consequat dolor minim vel luptatum ad iusto. Zzril odio ut diam, aliquam consequat at lobortis adipiscing praesent, dolore ea. Te ad ex aliquam, eros erat duis autem velit molestie euismod dolor commodo enim, molestie qui veniam feugait dignissim zzril augue, esse nostrud vel et sit.
            </p>
            <p>Te qui vulputate ut aliquip at, consectetuer ut, volutpat, consequat autem ut amet ipsum te illum suscipit zzril nonummy dolore. Nisl accumsan in, augue ad tincidunt wisi commodo elit amet feugiat nulla luptatum dolore ut nulla nulla veniam. Duis feugait accumsan, magna veniam, nulla nibh, sed vero erat duis ea magna eros enim. Te, vel dolor, dignissim volutpat iusto wisi consequat vulputate wisi nostrud et. Nostrud et, exerci velit ea volutpat vulputate dolore iusto dolore vulputate vero nulla suscipit, suscipit in velit odio lobortis vel feugait enim. Diam ea blandit facilisis consequat accumsan vero, ut zzril, vulputate nonummy praesent zzril nisl dolor accumsan dolore autem delenit consequat eu, veniam enim. 
            </p>
        </div><!--end contact div -->
    
    </div><!--end wrapper div -->
    <div class="clear"></div>
    <div id="footer">
    </div>    

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

CSS is this. Check all the top 2-4 entries because I made little adjustments to some of those too.

Code: Select all

* { margin:0;
    padding:0; }

html { height: 100%; margin-bottom: 1px; }
    
body { background:#020202;
       font:12px verdana;
       color:white;
       letter-spacing:2px;
       height:100%; }
       
      #wrapper {
      width: 750px
      } 
div#shell { height:100%; }

div#header { float:left;
             font:24px verdana; 
             background:#020202; }
             
div#nav {
    float:left;
    text-align:left;
    border:1px solid green;
    height:100%;
    width: 118px;
}

div#nav ul { padding-left:15px;
             list-style-type:none; }

div#nav li { margin-bottom:5px; }

div#nav li a { color: #fff;
               text-decoration:none;
               letter-spacing:3px;
               font-weight:bold;
               border-left:5px solid #020202;
               padding-left:5px; padding-right:3px; }
             
div#right { float:right; text-align:right; }

div#content {
    text-align:left;
    border:1px solid red;
    width:620px;
    float: right;
}

div#content p { padding:10px; padding-left:20px; padding-right:20px; }
              
div.clear { clear:both; }

div#email {    padding-top:5px; font-size:10px; }

span#splash_title { font-size:32px; }

div#container { }

div#pusher { height: 314px; }


/* sifr styles */

.sIFR-flash {
    visibility: visible !important;
    margin: 0;
    padding: 0;
}

.sIFR-replaced, .sIFR-ignore {
    visibility: visible !important;
}

.sIFR-alternate {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
}

.sIFR-active #title {
  visibility: hidden;
  font-family: Verdana;
  line-height: 1em;
  width:600px;
  font-size: 24px;
}

/* end sifr styles */

Let me know if this accomplishes what you want. If not, I can probably tweak it some more!

Linda

trandrus · #3 (**permalink**) Jun 19th, 2007, 19:04

Linda,

Thanks for your help!

Adding a wrapper fixed the problem in Firefox. However, I removed the nav div from the wrapper because I want it to be fixed in the corner under the title (the way you had it, the nav was moving with the inner content).

Now Firefox works perfectly!:

http://dev.studioorpheus.com/home.php

I added a right padding to the wrapper to offset the width of the nav so the content would remain centered. However, when I check IE7, I get the same disappearing trick! When the wrapper div hits the nav, boom gone. Is there any documentation about this bug? Do you think this is the inhereted peekaboo bug from IE6? Or something else? I didn't think peekaboo was as big a problem in IE7. Considering I have tried all the published solutions, I think this might be something else. Or maybe I just need to redo all the peekaboo hack code again. Sometimes CSS wont behave until I've redone it 10 times.

I checked IE6 against my will and was pleasantly surprised...it seems to work fine except for the disappearing trick. It does exactly what IE7 does. Weird.

Lchad · #4 (**permalink**) Jun 19th, 2007, 21:22

Just scanning messages really quickly.. no time to delve into your question but I don't think it's fixed in FF2! gulp.

Something doesn't look right..
I'll be on later tonight and see if you left a message.

trandrus · #5 (**permalink**) Jun 19th, 2007, 21:28

I made it work by doing the following:

1 - Removed height:100% from the nav (this is what's causing the disappearing trick)

2 - Used position:absolute to position the nav in the proper place. this also allowed me to put the nav under the page content which is better for SEO.

I have posted the original bug here:

http://dev.studioorpheus.com/floatbug.php

Just in case someone with a lot more free time than me cares at all.

Thanks again, Linda!

Lchad · #6 (**permalink**) Jun 19th, 2007, 22:13

You're welcome! You stuck with it and did it!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
100% height on content problem	jasonmillward	Web Page Design	1	Apr 9th, 2008 14:08
How to make a table height equal to the browser height ?	subhadip	Starting Out	4	Sep 20th, 2007 07:56
Problems making the content area have a dynamic height	blizeH	Web Page Design	41	Aug 13th, 2007 01:19
Buttons disappear on Rollover ONLY on PC	zoelinn	Web Page Design	5	Jun 26th, 2006 23:42

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
ie7 bug - floated div with height 100% causes content to disappear