Text spilling out of the box in firefox

**sameer2k** · 07-03-2006, 11:33 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.

**Twey** · 07-03-2006, 01:42 PM

This is due to a bug in IE which causes an overflow:visible container to expand to accommodate its content, rather than drawing that content outside the container as the CSS standard specifies.

You can try specifying the width of .box in ems. If I remember correctly, that will cause it to expand if necessary.

Thread: Text spilling out of the box in firefox

Thread Tools

Search Thread

Text spilling out of the box in firefox

Bookmarks

Bookmarks

Posting Permissions