Page 1 of 1

Again CSS Weirdness...

Posted: Mon Aug 15, 2005 7:50 am
by Ree
I have some problem once again. Why is there so much empty space below the button? It seems there's more than required above the first row of the table as well. What am I doing wrong? The file is XHTML 1.1 valid. I checked with FF only, IE always gives me wrong results so I don't care at this point.

I always seem to spend most of my time dealing with such weird problems! :evil:

Here's the thing:

HTML:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1257" />
<title>Delete News</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="record_container" class="med_bg">
	<form method="post" action="../process/news.php?do=delete">
		<table>
			<tr>
				<td><b>Headline</b></td>
				<td><b>Posted</b></td>
				<td><b>&nbsp;</b></td>
			</tr>
			<tr>
				<td><a href="del_news.php?item=10">Headline 1</a></td>
				<td>2005-08-15</td>
				<td><input type="checkbox" name="item_array[]" value="10" /></td>
			</tr>
			<tr>
				<td><a href="del_news.php?item=9">Headline 2</a></td>
				<td>2005-08-14</td>
				<td><input type="checkbox" name="item_array[]" value="9" /></td>
			</tr>
			<tr>
				<td><a href="del_news.php?item=8">Headline 3</a></td>
				<td>2005-08-14</td>
				<td><input type="checkbox" name="item_array[]" value="8" /></td>
			</tr>
			<tr>
				<td><a href="del_news.php?item=7">Headline 4</a></td>
				<td>2005-08-10</td>
				<td><input type="checkbox" name="item_array[]" value="7" /></td>
			</tr>
			<tr>
				<td><a href="del_news.php?item=6">Headline 5</a></td>
				<td>2005-08-09</td>
				<td><input type="checkbox" name="item_array[]" value="6" /></td>
			</tr>
			<tr>
				<td><a href="del_news.php?item=5">Headline 6</a></td>
				<td>2005-08-09</td>
				<td><input type="checkbox" name="item_array[]" value="5" /></td>
			</tr>
			<tr>
				<td colspan="3"><input type="submit" value="Delete Selected" /></td>
			</tr>			
		</table>
	</form>
</div>

</body>
</html>
CSS:

Code: Select all

html
{
  margin: 0;
  width: 100%;
  height: 100%;
}

body
{
  background-color: #E6E6E6;
  font-family: verdana;
  font-size: 0.7em;
  display: table;
  color: #000000;
  margin: 0;
  width: 100%;
  height: 100%;
}

input, textarea
{
  font-family: verdana;
  font-size: 1em;
  background-color: #FCFCFC;
  border: 1px solid #C5C9D1;
  margin: 0.1em;
}

input:hover, textarea:hover
{
  background-color: #FFFFFF;
  border: 1px solid #A4A8B0;
}

input:focus, textarea:focus
{
  background-color: #FFFFFF;
  border: 1px solid #A4A8B0;
}

.med_bg
{
  border: 1px solid #C5C9D1;
  background-color: #D9DDE5;
}

#record_container
{
  display: table;
  margin: 0 auto;
  padding: 0.5em;
  text-align: center;
}

a
{
  color: #000000;
  text-decoration: none;
}

a:hover
{
  color: #FF0000;
}
Any help would be greatly appreciated.

Posted: Mon Aug 15, 2005 8:00 am
by feyd
without looking at the output, I'm going to guess: forms have margin/padding settings, adding a CSS that sets the form's margin and padding to zero should clear up the issue.

Posted: Mon Aug 15, 2005 8:09 am
by Ree
Yeah!! :lol:

I lack experience what can I do! :lol:

Thanks a lot.

Posted: Mon Aug 15, 2005 9:41 am
by wwwapu
I don't want to sound too picky but as you stated "I lack experience".

Hint for the future tables...

Code: Select all

<table summary="News headlines. Choose to delete items (or something that gives clear explanation of the table)">
   <thead> 
       <tr> 
          <th>Headline</th> 
          <th>Posted</th> 
          <th>&nbsp;</th> 
       </tr>
   </thead>
   <tfoot>
       <tr> 
           <td colspan="3"><input type="submit" value="Delete Selected" /></td> 
       </tr>
   </tfoot>
   <tbody> 
        <tr> 
           <td><a href="del_news.php?item=10">Headline 1</a></td> 
           <td>2005-08-15</td> 
           <td><input type="checkbox" name="item_array[]" value="10" /></td> 
        </tr> 
<!-- more lines -->
   </tbody>
</table>
<th> is table heading-- no need for <b>
summary is advised to give for the tables
<thead><tfoot> and <tbody> are useful especially for longer tables. (try print preview and you will see it)

Posted: Mon Aug 15, 2005 10:50 am
by Ree
Thanks :)