Again CSS Weirdness...

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

Again CSS Weirdness...

Post 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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

Post by Ree »

Yeah!! :lol:

I lack experience what can I do! :lol:

Thanks a lot.
User avatar
wwwapu
Forum Contributor
Posts: 197
Joined: Wed Apr 07, 2004 11:57 am
Location: Turku, Finland

Post 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)
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

Post by Ree »

Thanks :)
Post Reply