My dream weaver is giving me an error reporting I have Expanding Box Problem! Dreamweaver says "Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow." I have tried everything but i see the same problem. And as a result it reflects on the browsers....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css"
href="{$config.root_surl}/templates/css/reset.css" />
<link rel="stylesheet" type="text/css"
href="{$config.root_surl}/templates/css/amember.css" />
<link rel="stylesheet" type="text/css"
href="{$config.root_surl}/templates/css/site.css" />
</head>
<body>
<LINK
href=""
type=text/css rel=stylesheet>
<STYLE type=text/css>
.style1 {
FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #990000
}
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
}
.style9 {font-size: 12px}
.style10 {font-size: 10px; }
.style12 {
font-size: 12px;
font-weight: bold;
color: #330066;
}
</STYLE>
</HEAD>
<BODY bgColor=#ffffff leftMargin=0
background=""
topMargin=0 marginwidth="0" marginheight="0">
<TABLE height=13 cellSpacing=0 cellPadding=0 width=772 align=center border=0>
<TBODY>
<TR>
<TD vAlign=top height=13>
<TABLE id=AutoNumber1 style="BORDER-COLLAPSE: collapse"
borderColor=#111111 cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD vAlign=top width="100%"><MAP name=FPMap0>
<AREA shape=RECT
coords=748,25,808,41
href="example">
<AREA shape=RECT
coords=624,26,674,41
href="exampl">
<AREA shape=RECT
coords=684,26,735,42
href="exampl">
<AREA shape=RECT
coords=588,25,631,4
coords=647,25,693,40
<AREA shape=RECT
coords=701,24,761,40
</MAP>
<IMG alt=""
src="index_01.jpg"
useMap=#FPMap0 border=0></TD>
</TR>
<TR>
<TD vAlign=top width="100%"><IMG alt=""
src="index_02.jpg"></TD></TR>
<TR>
<TD vAlign=top width="100%"><IMG alt=""
src="index_03.jpg"></TD></TR>
<TR>
<TD vAlign=top width=772
background="index_04.jpg"
height=43>
<TABLE id=AutoNumber2 style="BORDER-COLLAPSE: collapse"
borderColor=#111111 height=37 cellSpacing=0 cellPadding=0
width="100%" border=0>
<TBODY>
<TR>
<TD width="4%" height=37>&nbsp;</TD>
<TD width="93%" height=37>
<TABLE id=AutoNumber10 style="BORDER-COLLAPSE: collapse"
borderColor=#111111 cellSpacing=0 cellPadding=0 width="100%"
border=0>
<TBODY>
<TR>
<TD align=middle><div align="center"><A href="">Example1</A>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; <A href="">Example2</A>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; <A href="">Example3</A>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; <A href="">Example4</A>&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; <A href="">Example5</A>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; <A href="">Example6</A>&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp; <A href="">Example7</A>&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <A href="">Example8</A></div></TD>
<TD width="4%">&nbsp;</TD></TR></TBODY></TABLE></TD>
<TD width="3%" height=37>&nbsp;</TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD vAlign=top width="100%"><IMG alt=""
src="index_05.jpg"></TD></TR>
<TR>
<TD vAlign=top width="100%"
background="index_06.jpg">
<TABLE id=AutoNumber4 style="BORDER-COLLAPSE: collapse"
borderColor=#111111 cellSpacing=0 cellPadding=0 width="100%"
border=0>
<TBODY>
<TR>
<TD width="4%">&nbsp;</TD>
<TD vAlign=top width="92%" height=250>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
{if $config.lang.display_choice}{* Display Language choice if this option enabled *}
<div style='width: 100%; text-align: right;'>
{php}echo display_lang_choice();{/php}
</div>
{/if}
<br /><br />
<div class="centered">
<h1 align="center">{$title}</h1>
<hr align="center" />
<br />

I think the problem is coming from this special place

<div style='width: 100%; text-align: right;'>
{php}echo display_lang_choice();{/php}
</div>

Can some help

You have obviously used dreamweaver to create alot of your code but have you tried:

.box {
height: 300px;
width: 200px;
overflow: hidden;
}

or even:

.box {
height: 300px;
width: 200px;
overflow: auto;
}

That will make any content that is to large for the box hide and so you shouldn't get any expanding boxes.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.