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
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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.