Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

A newbie question about using css file 2

Status
Not open for further replies.
lcs01

lcs01

Programmer
Aug 2, 2006
182
US
Hi, experts,

I am learning how to use css files. And the following is a simple example I wrote:

html file (created by perl+cgi.pm):

Code: 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] lang="en-US">
<head><title>Registration Form</title>
<link rel="stylesheet" type="text/css" href="/styles/msf_style.css" />
</head>

<body bgcolor="F5F4EB">
<center><h3>Registration Form</h3></center>
<form method="post" action="saveUserInfo.pl" enctype="multipart/form-data" name="theForm">
<table width="50%" align="center" border="1">
<tr>
<td align="left">
  <table width="100%" align="left"> 
  <tr>
  <td align="left" colspan="2">
    <b>Tell us about yourself (The fields with <span class='star'>*</span> are required).</b>
  </td>
  </tr> 
  <tr>
  [b]<td align="right"><span class="star">* </span> First Name: </td>[/b] 
  <td align="left"><input type="text" name="fname" /></td>
  </tr>
  </table>
</td>
</tr> 
<tr>
<td align="center"><input type="submit" name=".submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>

css file:
Code: 
h3{font-family: Arial, Helvetica, sans-serif; font-size: 18pt; color: black}
body {background-color: darkcyan; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: blue}
.star{font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: red}

Here are my questions:

1) The color of 'First Name' is blue, which is expected. However, it's font is NOT 'Arial, Helvetica, sans-serif', which is NOT expected. How to fix this? I know I can use <span> tag to do the job. But I don't understand why 'body{}' in the css file would not work on it.

2) How do I change the color of the 'Submit' button and the user inout text area to the same as the rest, i.e. 'darkcyan' as defined in 'body{}' in the css file?

Thank you.
 
Sort by date Sort by votes
Hi

lcs01 said:
However, it's font is NOT 'Arial, Helvetica, sans-serif', which is NOT expected.
Click to expand...
It is for me. In FireFox, Opera and Explorer.
lcs01 said:
How do I change the color of the 'Submit' button and the user inout text area to the same as the rest, i.e. 'darkcyan' as defined in 'body{}' in the css file?
Click to expand...
Code: 
input { background-color: darkcyan; }

Feherke.
 
Upvote 0 Downvote
Try adding the td tag to the body tag. Browsers may or may not apply all body styles to table cells.
Code: 
body, [b]td[/b] {background-color: darkcyan; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: blue}

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
Assuming that is the only <input> tag, (which it is in this case), feherke's answer to question 2 is fine.

If you plan on adding more <input> tags, it'd be better to give the submit button a CSS class and assign the darkcyan color to it instead.

[monkey][snake] <.
 
Upvote 0 Downvote
Basically you have an inheritance problem. Tables don't inherit CSS styles from parents AFAIK.

So you can make a class, and give that classname to the table.


Example:
Code: 
.mainclass
background-color: darkcyan; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: blue;
}
<table class="mainclass"....

For the submit buttons, you can also give them a class, or use their type names to create the rules.


Code: 
in your CSS style sheet:
submit,text{
color:...;
etc..
}


For more info, i'd like to point you to w3schools css help pages:

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
oops, took to long to answer, sorry

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Hi

By the way, does anybody know if Explorer 7 understands attribute based selectors ?
Code: 
input[type=text] { background-color: red; }
input[type=submit] { background-color: green; }

Feherke.
 
Upvote 0 Downvote
Thank you all for your great help.

As for my first question, after I read you guys posts and took a closer look to my page, I did see the font is correct! Maybe it is the time to get a new pair of glasses.

Another question:

In my css file, the font-family appears repeatedly. Is there a way I can declare a variable to hold 'font-family: Arial, Helvetica, sans-serif;' and then Ijust use this varible in the rest of my css file?

Thanks again.
 
Upvote 0 Downvote
If you apply the the font to the body you should not have to repeat it for anything else. Then just change the size or the color as appropriate.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
Hi

No, there are no variables in CSS. But you can define the common attributes together for all the elements/classes, then the different things separately :
Code: 
h3,body,.star { font-family: Arial, Helvetica, sans-serif; }

h3 { font-size: 18pt; color: black; }
body { background-color: darkcyan; font-size: 10pt; color: blue; }
.star { font-weight: bold; font-size: 10pt; color: red; }

Feherke.
 
Upvote 0 Downvote
Browsers may or may not apply all body styles to table cells.
Click to expand...
Browsers do apply body styles to table cells, but not when they're running in "quirks mode". This line:
Code: 
<?xml version="1.0" encoding="utf-8"?>
will throw IE into quirks mode. It's optional anyway, so remove it and I think it'll fix your issue.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Back to my first question in my original thread.

The problem does exist with IE 6.0.2900. But it works with IE 7 and Firefox 1.5. Just for your info.

I guess I don't have to get a new pair of glasses.
 
Upvote 0 Downvote
Follow ChrisHunt's suggestion. You need to make sure IE is not running in quirks mode, and <xml> declaration (or any text, even a comment, before the doctype will do that to IE) will push it from standards mode to quirks. As long as it is standards, then your font will be inherited.

As for the question on IE7 understanding attribute selectors. I do believe that it does, but it's been a while since I tested it out.

Last but not least, traingamer's reply about defining the font family in the body tag will work as expected once the standards mode is on and it will be inherited to all elements (except from maybe input elements).

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
Hi

Interesting. My Explorer 6.0.2900 uses quirks mode ...
Code: 
[gray]...[/gray]
--<script type="text/javascript">
document.writeln(document.compatMode);
</script>--
[gray]...[/gray]
rendered HTML said:
--BackCompat--
Click to expand...
... and displays the text with Arial.

Applying the change suggested by Chris the font remains the same, only the Explorer's stupidity of not allowing the text sizing is added.

Feherke.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
750
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
600
PeDa
PeDa
Mackeinath
  • Locked
  • Question
Xml file import
Replies
0
Views
582
Mackeinath
Mackeinath
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
703
3esolar
3

Part and Inventory Search

Sponsor

Back
Top