CSS for Form

Question

cssquestion 0 Newbie Poster

14 Years Ago

I have a code in .css file:

....
body {
	background: red;

	font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;

        color: #777;

	margin: 15px 0;
}

...

In the html file, there is a form:

<body>
   ....
  <div>
    <form>
    <table>
    <tr><td>name</td><td><input ..../></td></tr>
    <tr><td>address</td><td><input ..../></td></tr>
    </table>
    </form>
  </div>
  ....
</body>

In form: "name" and "address" etc do not follow the body's rule, such as "name" and "address" do not use:

font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;

Is there anyone tell me why? What's wrong with this?

html-css web-design

4 Contributors
9 Replies
113 Views
4 Days Discussion Span
Latest Post 14 Years Ago Latest Post by diafol

almostbob 866 Retired: passive income ROCKS

14 Years Ago

is there anywhere in the css file any declaration for td, input, input.text, files shown not complete, these questions are necessary.

are there any included files, external scripts: trackers; advertising; googlesearchbox, anything at all included in the page from any outside source; often those external files have their own css, declared later in the file than yours & override the earlier declaration,

diafol

14 Years Ago

Tried your code - works fine for me. However, input form fields have to be declared separately (AFAIK). You're using bare td text for form labels. Consider using the dedicated label tag.

diafol

14 Years Ago

Check your HTML markup - it looks a wrong to me

<body>
			<form method="get" action="#">
			this is test
			<table><table><tr><th colspan="2">send </th></tr>
							<tr><td>name</td><td>address</td></tr>
					 </table>
			</form> 
</body>

You have a nested table but no outer table close tag (<table><table></table>).
I don't think it will make a difference but I always put my header rows in <thead> tags and my data rows within <tbody> tags (see w3schools or similar for usage).

A quick workaround for now could be:

td, th, label, input{
        font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
}
td, th, label{
        text-align: left;
}

/*OR*/

*{
        font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
        text-align: left;
}

The last one uses the universal selector which applies to EVERYTHING. You may need to centre some elements, like input, etc. I wouldn't recommend this though.

Edited 14 Years Ago by diafol because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

cssquestion 0 Newbie Poster · Answer 1 · 2010-04-12T07:15:04+00:00

WOW! Finally, I login to DANIWEB. It takes me 2 days. Anyway

is there anywhere in the css file any declaration for td, input, input.text, files shown not complete, these questions are necessary.

I only have two files: CSS and HTML files. There is no declaration for TD, TH, TR ..., but for FORM and INPUT

form {

	margin:10px 10px; padding: 10px 0;

	border: 1px solid #E5F0FB; 

	background: #F4F8FD;

}

table {
}

th {
}

tr {
}

td {
}

input {

	padding:3px; margin: 2px 0 0 0;
	border: 1px solid #99ffff; 

	font: normal 1em Verdana, sans-serif;

	color:#777;	

}


input.button { 

	font: bold 12px Arial, Sans-serif; 

	height: 28px;
	margin: 0;

	padding: 2px 3px; 

	color: #fff;

	background: #306bc1; 

	border: 1px solid #0000cc;

}

I am not sure if they will affect the code. If it is, it quit strange me.

are there any included files, external scripts: trackers; advertising; googlesearchbox, anything at all included in the page from any outside source; often those external files have their own css, declared later in the file than yours & override the earlier declaration

I have not included such complicated code. Just wondering is there any kind of code will affect the FORM format?

Tanks ARDAV. I've tried to use "LABEL" tag. It still same. Any idea?

cssquestion 0 Newbie Poster · Answer 2 · 2010-04-12T09:24:23+00:00

Let me simplify the question. HTML file:

<html>
<head>
	<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
			<form method="get" action="#">
			this is test
			<table><table><tr><th colspan="2">send </th></tr>
							<tr><td>name</td><td>address</td></tr>
					 </table>
			</form> 
</body>
</html>

CSS file called test.css:

body {
	background: red;

	font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;

        color: white;

	text-align: left;

}

I'm using FireFox 3.5.9 for Ubuntu. background and color are working fine. But font and text-align are not working for th, td. Why this happened?

peridot 0 Newbie Poster · Answer 3 · 2010-04-12T22:42:52+00:00

Is there anyone tell me why? What's wrong with this?

When you view an html page in a browser, the browser first applies its own stylesheet to the page; most browsers have their own style that says:

td{some browser styling}

your declaration: body{ my styling}
style does not override this browsers default styling.

your style is read after the browsers own stylesheet, therefor if you declare

td{ my styling}

your td content will look just fine.

diafol · Answer 4 · 2010-04-12T22:51:44+00:00

your style is read after the browsers own stylesheet, therefor if you declare
td{ my styling}
your td content will look just fine.

I vaguely remember reading in some book that td/th/input and a few others were not affected by body style. I haven't been able to find this info on the web though.

peridot 0 Newbie Poster · Answer 5 · 2010-04-12T23:56:39+00:00

I vaguely remember reading in some book that td/th/input and a few others were not affected by body style. I haven't been able to find this info on the web though.

still think it's the browser that sets the default style, somehow, on my FF oin windows 7 the font for a non styles input is MS Shell Dlg, wich is probably something like X-system-font ...

if you would use

body {
background: red;
font: 70%/1.5em Georgia, Verdana, Tahoma, arial, sans-serif;
color: #fff;
text-align: right;
margin: 15px 0;
}
input{text-align:inherit; font-family:inherit;}

you see what i mean: inputs with right aligned georgia.

diafol · Answer 6 · 2010-04-13T22:22:54+00:00

still think it's the browser that sets the default style, somehow, ...

Yes, you may be right. That may explain the stuff I mentioned about td etc. To be honest, I use a reset css code for all my projects and build elements as I need them, so I wouldn't notice.