PDA

Click to See Complete Forum and Search --> : Text spilling out of the box in firefox

sameer2k
07-03-2006, 06:17 AM
Hi,

Please, help me how can I have flexible box with background color in css that will expand according to the contents. Following is the test code that I have used, it is working in IE but in firefox contents come out of the box. I am looking for the cross browser fix for this:-

The CSS File I am using contains the following:-

div#content{margin-left:190px;margin-top:5px;}
div.box
{
width: auto;
min-width: 40px;
border: 2px solid #781351;
padding: 3px;
background: #d7b9c9;


white-space: nowrap

}



following is my html file:-

<html>

<head>
<link href="test.css" rel="stylesheet" type="text/css" media="all" />
<title>TEST PAGE</title>
</head>

<body>

<div id="content">

<div class="box">





<H1>Sam</H1>
<H1>Sam</H1><H1>Sam</H1><H1>Sam</H1><H1>Sam</H1>

<p>The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology The technology </p>
</div>
</div>

</body>

</html>

I know one fix is overflow:auto; property of css but this brings scroll bar in firefox which i don't want.

Kindly, help as soon as possible.

Thanks,
sameer.
kessa
07-03-2006, 08:18 AM
Hi,

I haven't had a chance to try this out, but just a couple of thoughts which may help:

1) width: auto;
I'm not sure if you need to include that in this instance as I believe the width is auto by default. Try removing it to see if that helps.

2)When content pops out of an element it's often because of a floating issue (or sometimes lack of floats). Does the "p" element have a width or float specified anywhere else in your stylesheet? If so, I've try removing that.

3) Another possibility would be to add a "float:left;" to both the "div.box" and "div.box p" elements. That should hopefully force the inner p element to say within the floated div.box - you'll probably need to "clear:both;" after the box but how you do that symantically will depend on the rest of your code an layout.

Hopefully that will give you something to go on and no doubt some others here may be able to help out too. :D

Good luck!
Kessa
toicontien
07-03-2006, 09:34 AM
Kessa is on the right track. You see Internet Explorer expand the box because the contents don't fit when in fact that's the incorrect behavior. Firefox, Opera, Safari and Netscape will all show the text spilling over the edge. See the paragraph and bulleted list under the heading "Overflow and clipping" from the Web Standards themselves: http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping

And width: auto; is the default for all block level elements, of which a DIV is a member of. If you want the DIV to expand with the contents, Kessa was correct in saying you need to float it. Just be sure you having a clearing element below the floated DIV you the remaining page contents ride below the floated DIV.
<div style="clear: both;">&nbsp;</div>
But floating an element will also cause it to "shrink wrap" to fit its contents, meaning if there isn't enough content to make it X pixels wide, then it will only be as wide as it needs to fit the content. Instead of floating the DIV, you may be able to give it a minimum width (Ex: min-width: 100px).

But Internet Explorer doesn't support the min-width property. So, what you'll need to do:
div.box
{
width: 40px; /* For IE-Wim */
min-width: 40px; /* For Moz and the Boyz */
border: 2px solid #781351;
padding: 3px;
background: #d7b9c9;
white-space: nowrap
}

/* What Moz and the Boyz can handle, hidden from IE-Win */
html>body div.box {
width: auto;
}
Even after all that, the width of the .box DIV is still hindered by it's containing block. In a nutshell: Make sure the contents fit the block. This all depends on what you're trying to achieve.