Jump to content

fieldset overlapping div


abazoskib

Recommended Posts

I have a problem with my main div and the fieldset I have encompassing a table.

 

Here's a screenshot: hxxp://all-inbox.com/images/screenie.png

 

When the table gets too wide, I want the div to stay with it, however it does not. Here's the CSS:

 

#statTable {
margin-left: 0px;
        padding: 3px;
margin-top: 0px;
border: 0px solid #000;
min-width: 750px;
/*height: 250px;*/
        font-family: Arial;
}

#dashedDiv { 	
  text-align: left;
  vertical-align: middle;	
  margin: 0px auto;
  padding: 10px;
  /*min-width: 1000px;*/
  min-height: 500px;
  width: 100%;
  background-color: #ffffff;
  border: 1px dashed #564b47;
}

fieldset {
width: 800px;
margin-left: 10px;
margin-bottom: 20px;
padding: 0px;
border-style: solid;    
border-width: 1px;    
border-color: #659539;   
background-color: #ffffff;
min-height: 250px;  
}

legend {
padding: 10px;
font-family: Arial, Helvetica, sans-serif;    
font-size: 16px;    
color: #000;
background: #fff;
font-weight: bold;    
}

Link to comment
https://forums.phpfreaks.com/topic/175153-fieldset-overlapping-div/
Share on other sites

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="robots" content="noindex" />
<link rel="stylesheet" type="text/css" href="media/style.css" />
<link rel="stylesheet" type="text/css" href="media/menu.css" />
<script type="text/javascript" src="media/script.js"></script>
<link rel="stylesheet" type="text/css" href="media/balloontip.css" />
<script type="text/javascript" src="media/balloontip.js">
</script>
<title>xxxxx</title>

</head>

<body>
<div class="left"><a href="index.php"><img src="media/xxxxx.gif" alt="xxxxxxx" class="image" /></a></div>

<div id="dashedDiv">
<script type="text/javascript">
setTimeout('extendSession( "d21e422e_c4de_44a4_8590_6e22bcc87d2b")', 10763000);
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled document</title>
</head>
<body>

</body>
</html><div class="right">Welcome back, xxxxxxxxxx.<br/><br/><a href="logout.php">Logout</a> | <a href="preferences.php">Preferences</a></div><fieldset>
<legend><b>Statistics - Overview</b></legend>
<table summary="StatisticalOverviewTable" id="statTable" style="font-family: Arial;">
<tr valign="top" class="headTR" style="font-size: 10px">
<td>xxxx</td>

<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>

<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
</tr>

<form method="post" name="PSGPTML4861090922" id="PSGPTML4861090922" action="statistics.php"><tr valign=top><style>.textfield_effect2 { text-align: right;}</style></form></table></fieldset>

</div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="robots" content="noindex" />
<title>Untitled document</title>
</head>
<body>
<div id="footer">xxxxxxxxxxxxxxxxxxx</div>
</body>
</html><script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
</body>
</html>

 

the extra <html> and <body> tags are the crappy GoDaddy html editors adding their own tags when I use include to put a menu on the page.

To be honest, I'm not exactly sure of the full reasoning behind it - it's just something I've found to work in the past. But what I think that happens is that the natural width of the table takes precedence over the width of the containing element. So you need to explicitly set the width of the table at 100% so that it doesn't overlap.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.