Accessibility

CSS Advisor

Expanding Box Problem

by CSSAdvisorAdmin on October 30, 2006
Edited by: sfegette on May 18, 2013
Avg Rating 3.4 (32)   |   Log in to rate post.

Tagged with overflow , Explorer 6.0 , Explorer 5.0 , Text , Explorer 5.5 , Width/Height , Explorer for Mac

Problem

Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content. (The content should overflow instead.)

Solution

Use word-wrap: break-word inside IE-conditional comments (works on text only) or overflow: hidden (works on all content, but may cause content to be clipped).

Detailed description

This is one of the more problematic bugs in Internet Explorer 6 and earlier (Windows)  because it causes other bugs, such as Float Drop. A frequent cause of the box expansion problem is long, unbroken strings like raw URLs: the text has no natural break to wrap the line, so it extends beyond the defined width of the box--and pushes the box out in the process. Images that are too wide for their containers can also cause those containers to expand.

Solutions

The first and easiest solution is to specify a width for your container that is wide enough to accommodate all of your content. When this isn't possible, two other options are available:
NOTE: Boxes with no specific width also expand; in this case, the overflow: hidden workaround does not apply. If the expansion is desirable, the same effect can be achieved in standards-compliant browsers by applying display: table-cell to the container.

Bug originally documented on positioniseverything.net by Artcoder. (Read original article)




Text ID: EXPANDING_BOX_PROBLEM



Comments (26)

To add a comment, please Log in.




Link to info on expanding box fix

For frida_bandita, and others:  I found info on the bit of code to put in the head section of the web page, here:
http://www.positioniseverything.net/explorer/expandingboxbug.html
This seems to fix the problem.
Hope this helps.

expanding box alert on spry sliding panels

Thank you for your very useful tips. I'm getting expanding box alert on spry sliding panels div, so I'm not sure that word wrap or overflow hidden are the fixes in this instance-? Isn't that the whole point of sliding panels, that they are hiding content? Here's my code:

<div class="SlidingPanelsContainer"><div id="portfolio_RowNumber" class="SlidingPanelsContent" spry:repeat="portfolio" spry:setrow="portfolio" spry:hover="hover">
<div class="content"><img src="{thumbnail}" alt="portfolio thumbnails from data file" width="50" height="46" /></div>
</div>
</div>

Don't have my pc with me, and not installing ie on my new mac, so I can't check it.

Thank you for providing link to how to code ie conditional comments, but it is 404 on MS, fyi.

Installing Spry Update extension

I have downloaded the update extension but cannot figure out how to install it. It just asks for a backup file for the restoration. Please help. Also, a note for Adobe - it would be better if you gave solutions to problems using the design panels instead of just in code. I don't design pages using code. I use the design system you created so give me solutions using your syste. I've found better help from other sources becuase they use this technique.

Expanding cell problem in Firefox

First & second rows of a table/AP element expands when previewing in browser (Firefox). The table on the page that it was copied from does not. Tried copying element, code, resizing element, selecting "no wrap", & overflow. Also, drop downs don't work in IE and the z-index problem. All other AP elements on pages have a "0" index except menu bar & drop downs. Only 2 pages affected. Nothing seems to work. Any helpful suggestions would be greatly appreciated.

SPRY Menu Horizontal SOLUTION

Hi Folks,

I had come across the same problem, but in the end I managed to find out the solution to this SPRY Menu Bar Problem. Here is the simple way to correct this problem (1) You have to download this SPRY MENU bar Extension from the adobe web here is the like (http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_spry) (2) Install the file it would be an (.mxp) extension which by default is associated with adobe extension manager so you won’t have problem installing it. (3) When you are done, open your Dreamweaver and then go to SITE >>> SPRY UPDATER and click it. This will make up a backup copy of the currently used spry in your web and create a new one. After that you only have to just again provide the background images and rollover image to your navigation or spry menu bar and then you are finally done. Check your web page in Internet Explorer and it will just work fine. (Note: Don’t forget to open your website before clicking the Spry Update menu.)

Cheers!!

Expanding box problem

I need help with my spry menu bar. Everything is fine except in IE where I get a white box where my spry menu should be. I am new to web design, so I can't quite figure out what to do. I am using Dreamweaver CS4. http://harmonized.harmonized-design.com/index.html

Expanding Box Problem In site

Thanks a lot... for the solution.. its worked for me... i hate ie browsers they have many css bugs... better to drop the ie6 and ie7 browsers..

Expanding box problem IE 7 spry horz. menu

I've read all the comments and tried many of them. Still my menu drop downs shift around and even show up off the far side of the page. I'm using auto widths still and have some long titles to deal with. Of course everything looks great in FF mac/win, Safari,  and Chrome. Do I need to use fixed widths? Sigh.

Expanding box problem

I am just embarking on the whole CS4 Suite for the first time.
I am encounteruing this expanding box problem in Dreamweaver with a beginners template that I had downloaded to work on.  Also notably though  - this issue seems to affects all browsers ... help !!

Expanding Box Problem with Photoshop's web gallery

I'm getting the expanding box problem notice and it's associated with photoshop's web gallery that I've got in my website.  Any way to make this work?  I have IE 6 but did notice that it will work at school on IE 7.  But....not everybody who might view this page will have IE 7.

:-*

Thanks a lot man!!!!!!!!!!!!!!!!!!  Saved a lot time.... Love u Adobe!!!!!!!!!!!!!!

This problem also seems to affect IE7

I used this technique to fix a layout that was acting crazy in IE7 but was perfectly fine in Safari, FF mac, and FF windows.
For those of you who don't know how to do conditional comments, here's what I did, step x step:

1) I created a separate stylesheet named IE7.css and put it in a directory called _css.

2) Put the rules above in my IE7.css file like this:

div.container  {
overflow:hidden;
word-wrap: break-word;
}


3) Created a conditional comment in the header of my html page like this:

<!--[if IE 7]>

<link href="_css/IE7.css" rel="stylesheet" type="text/css">

<![endif]-->

The conditional comment tells IE7 to use the styles in the IE7.css stylesheet. Other browsers ignore this stylesheet.

It might be helpful if this post was updated to note that this bug affects IE7 too.

expanding box problem

I think I have the same problem. I have my resolution set at 1280x768, but when i change it to 800x600 or 1024x768, the content overflows in the white area, in ff and ie 6 and 7. I added overflow: hidden; but that didn't have any effect, I have fixed wdith on all containers. I have cc and added the body {word-wrap: break-word;}, Here's my link: any help would be greatly appreciated    http://www.myhealthsolution.net/index-daisy-4k.html  

Spry Drop Down Issue

I tried to use the Drop Down for Spry and am having problems viewing in Internet Explorer. But I can view it fine in Firefox. Can someone please help me on this? I have the HTML code pasted here for one of the menu drop downs. For e.g., Under Home I have (About Us and Contact Us)

<body>
<table width="1193" border="0" cellpadding="0" cellspacing="0" background="images/Background/sky_blue1-1194x1202.jpg">
  <!--DWLayoutTable-->
  <tr>
    <td height="252" colspan="4" valign="top"><table width="100%" order="0" cellpadding="0" cellspacing="0">
      <!--DWLayoutTable-->
      <tr>
        <td width="900" height="67" valign="top">
        <div id="mainnavigation">
          <form id="form1" name="form1" method="post" action="">
            <label class="form"></label>
            <div id="navigation">
              <ul id="MainMenu" class="MenuBarHorizontal">
                <li><a class="MenuBarItemSubmenu" href="index.html">Home</a>
                    <ul>
                      <li><a href="aboutus.html">About Us</a></li>
                      <li><a href="contactus.html">Contact Us</a></li>
                      </ul>
                </li>
                </div>
                </form>
                </div>

Spry drop down issue

Me insert drop down spry menu into page, internet explorer 6 no work drop down, me search internet for problem, me no find answer that speak in language me understand. Me want to know how make spry menu work good in internet explorer six? Me try overflow:hidden, no work.

Me give code sample:

"<ul id="MenuBar1" class="MenuBarHorizontal">
  <li>
    <div align="center"><a href="#" class="MenuBarItemSubmenu"><strong>Online Only</strong></a>
      <ul>
        <li><a href="http://www.recirca.com:8980/konakart/Welcome.do" target="_blank">Shop</a></li>
        <li><a href="/onshow/index.shtml">Listings</a></li>
        <li><a href="/artnews/index.shtml">News</a></li>
        <li><a href="/feedback/index.shtml">Feedback/Polls</a></li>
        <li><a href="/reviews/index.shtml">Reviews</a></li>
        <li><a href="/articles/index.shtml">Articles</a></li>
        <li><a href="/online_projects/index.shtml">Projects</a></li>
        <li><a href="/adverts/index_online.shtml ">Advertising</a></li>
        <li><a href="/submissions/submissions_online.shtml">Submissions</a></li>
      </ul>
    </div>
  </li>
  <li>
    <div align="center"><a href="#" class="MenuBarItemSubmenu"><strong>Magazine</strong></a>
        <ul>
          <li><a href="/currentissue.shtml">Current Issue</a></li>... etc
...<div align="center"><a href="#" class="MenuBarItemSubmenu"><strong>About</strong></a>
        <ul>
          <li><a href="/about/index.shtml">Structure of Circa</a></li>
          <li><a href="/contact/index.shtml">Contact Circa</a></li>
        </ul>
    </div>
  </li>
  <li>
    <div align="center"><a href="http://www.recirca.com/index.shtml"><strong>Home</strong></a></div>
  </li>
</ul>"

If you can explain good me give big reward me have daughter make good wife can hunt good, snap giraffe neck with thighs.


Where do i put the conditional comments?

"For long text, such as URLs, you can force a break in IE by specifying word-wrap: break-word; on the container. Note that word-wrap is a proprietary Microsoft property that is not part of any CSS spec; you should enclose this property in IE conditional comments if you want your CSS to validate."
I'm sorry for my ignorance, but where exactly do i have to put the conditional comment in the code? in the style  of the div concerned (before/after.....)? or just after the div tag?
thanks for your help

DIV Tag Fix

This problem affected my WebSite for a few days, and I tried to work around it a few times with fixed table/cell/column widths, but to no success. I was parsing in an rss feed that kept expanding my cell to throw off the entire sites symmetry in IE7 while Firefox displayed a perfect site. DIV tags were the solution to my problem. Here is a quick version of my fix below:

Here is what it looked like with the cells taking the class input from the CSS:
<tr>
    <td width="260" class="newsTable"><?php include("server2.php"); RenderRSS2(); ?></td>
</tr>

I encapsulated the cell contents inside a DIV tag with the CSS class I wanted and it fixed everything:

<td width="260" align="left"><div class="newsTable"><?php include("server2.php"); RenderRSS2(); ?></div></td>

DIVS FIX YOUR INTERNET EXPLORER PROBLEMS!!!!

What worked for me

I found that the expanding box problem affected IE7. Unfortunately I wasn't able to get the the conditional comment workaround to work. Eventually I amended my html to introduce a singl-cell 'conditional table', as below, which worked fine.

<div class="CaptionText"><!--[if IE]><table> <td width="100%" lass="Caption"><![endif]-->Greetings!<br>
<br>
My Text Here<!--[if IE]</td>
</table><![endif]-->

Hope this helps
</div>

Re: I'm not clear on this

@rub-a-dub: It's impossible to say without seeing your code. The Expanding Box Bug does not affect table cells -- those *should* expand to fit their content. If the bug is being reported for a div inside a table cell, that's probably a case where we're being overzealous in detecting the bug in Dreamweaver. (I don't think it occurred to me to check if the affected box was inside a table cell; I only check whether the content's parent was a table cell, and ignored *that* case.)

If you're getting this error on a div inside a table cell, you can safely ignore it. Meanwhile, I'll log a bug that I need to update the detection to check for whether the affected box is inside a cell.

IE 7 too?

It seems to me that IE 7 has the same bug.  All my previews using IE7 also expand to include any content that is too big.

I'm not clear on this

I'm seeing this error (and can't find a way to turn off the message), but when I try the fixes above, I still see the error message. Maybe I'm reading this wrongly.  By "box," I assume the text is referring to a table cell, and by "container," I assume the text is referring to something like a <div> tag inside the cell wrapping the contents of the cell?  

Conditional Fix causes new problem

I have applied the IE conditional fix which does fix the expanding box problem.  However, another part of the page is affected by the fix.  The page is a 3 column layout.  The left column, where the IE fix was applied contains a flyout menu.  The center main content is elastic.  The right column, contains links from 2 include files.  When the IE fix is applied to the left column, the right half of the text of the right column disappears.  When you hover the mouse over the right colum, the text reappears.  

When I remove the IE conditional fix from the left column, the right column displays correctly.

body {word-wrap: break-word;}

<!--[if IE]>
<style type="text/css">
  body {word-wrap: break-word;}
</style>
<![endif]-->
THIS SCRIPT WILL EFFECTS IN: Firefox 1.5, 2.0; Internet Explorer for Macintosh 5.2; Netscape 8.0; Opera 8.0, 9.0; Safari 2.0

Expanding box conditional comment

<!--[if IE]>
<style type="text/css">
  body {word-wrap: break-word;}
</style>
<![endif]-->

Clarify "browsers I want to target"?

Hi dlplp - Can you be more specific about what you're looking for? This bug only affects Internet Explorer 6.0 and earlier on Windows, so the solutions only apply to those browsers as well. As long as you enclose either solution in an IECC, no other browsers will be affected at all.

OK - Solution

It was great to know my two options I had. Now, It would be great if it tell me
which one affects the browsers I want to target more..





CSS Advisor home
Submit a post

rss

CSS ADVISOR RSS FEEDS
Recent: POSTS | COMMENTS | EDITS


Browsers
Internet Explorer (103)
Mozilla/Firefox (52)
Opera (18)
Safari (38)
CSS Properties
Background (25)
Border (10)
Color (10)
Float (23)
Font (6)
Margin (11)
Padding (9)
Position (40)
Text (30)
Width/Height (27)