CSS has little effect on HTML

HTML & CSS
1

I have css and html code, but the css seems to have no effect on the html, except I can change the background color. It seems that the minimum height is about 250px. I can add more height, but when I change the ccs to height: 50px, for example, it appears to stay at around 250px. Any help will be appreciated. Thanks

CSS

HTML

<td class="login3">
<font size="4" color="#800000" face="arial"><br/>TEXT!<br/>
<form method="get" action="search.php">
<div id="siteSearch">
<!--<input type="hidden" name="hl" value="en" />-->
<input type="hidden" name="type" value="videos"/>
<input align="middle" type="text" name="keyword" id="myField"/>&nbsp;&nbsp;<input type="image" src="images/view.gif"  name="sa" value="Search" id="mySearch"/>
</div>
</form>
</table>

CSS:

td.login3 {
background:#000000;
text-align: center;
padding-right:0px;
padding-left:0px:
padding-top:0px;
background-position:top;
padding-bottom:0px;
margin:0px 0px 0px 0px;
width:0px;
height:0px;
}
2

Here is what I have after playing with it. I nested the content inside a container div, which is in turn nested in a wrapper div. You need to supply a width greater than 0 in order for the height value to work. I believe setting width to 0 was causing it to collapse. Also, make sure you set enough width and height to cover all of the content.

CSS


.login3 {
background: #000000;
text-align: center;
padding-right:0px;
padding-left:0px:
padding-top:0px;
padding-bottom:0px;
margin:0px 0px 0px 0px;
width: 200px;
height: 120px;
}
.content {
width: 100%;
height: 100%;
}

HTML


<div class="login3">
<div class="content">
<font size="4" color="#800000" face="arial"><br/>TEXT!<br/>
<form method="get" action="search.php">
<div id="siteSearch">
<input type="hidden" name="hl" value="en" />
<input type="hidden" name="type" value="videos"/>
<input align="middle" type="text" name="keyword" id="myField"/>&nbsp;&nbsp;<input type="image" src="images/view.gif"  name="sa" value="Search" id="mySearch"/>
</div>
</div>
</form>
3

You could re-write


padding-right:0px;
padding-left:0px:
padding-top:0px;
padding-bottom:0px;
margin:0px 0px 0px 0px;

to


padding:0;
margin:0;

and save yourself 3 lines of code :slight_smile:

4

although you’re not clear on what your end result should look like, i have a suggestion:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="Content-Style-Type" content="text/css; charset=utf-8">
		<meta http-equiv="Content-Script-Type" content="text/javascript; charset=utf-8">
		<title>Conforming HTML 4.01 Strict Template</title>
		<style type="text/css">
			td.login3 { background:#0f0; text-align: center; padding:0;	background-position:top; margin:0; width:0px; height:70px; }
		</style>
	</head>

	<body>
          <h1>Start demo</h1>
	  <table>
		<tr>
		  <td class="login3">
			<form method="get" action="search.php">
			  <div id="siteSearch">
				<input type="hidden" name="type" value="videos">
				<input type="text" name="keyword" id="myField">
				<input type="image" src="images/view.gif" name="sa" value="Search" id="mySearch">
			  </div>
			</form>
		  </td>
		</tr>
	  </table>
          <h2>End demo</h2>
          <p>Author: noonnope@sitepoint</p>
	</body>
</html>

this, and a couple more:

  • you’re about css problems in most of your requests, but you keep posting them in the html forum. go to the css forum, i bet you’ll get more answers there, more quickly :wink:

  • when you post sample code, make sure it’s a decent one :wink: your html code starts nowhere…

  • don’t use css rules, but also deprecated inline css or html: like align attribute, like font element…

  • don’t keep using tables, and even tables that are bad. you seem to be having a case of DIY, but you need to try harder, or hire a professional :wink:

good luck :slight_smile: