Font-family not inheriting correctly in contact form layout broken in IE 7

Well, I usually don't apply a base font style to the body:

body {
      color: #712919;
      font-family: Geneva, Verdana sans-serif;
      font-size: .8em;
      line-height: 1.5em;
      text-align: justify;
}

Instead, in your style sheet, what I did was:

body {
      color: #712919;
}


p {
      font-family: Geneva, Verdana sans-serif;
      font-size: .8em;
      line-height: 1.5em;
      text-align: justify;
      padding-bottom: 1em;
}


This changed the Times New Roman to the proper Geneva.

I'll look at the Contact form in a minute...

Eric

You can also format your contact form in the pw.css style sheet. Here's an example:

/*-----------------------*/
/* =FORM styles */

.form      {
padding:0;
margin:0;
border:0;
}

textarea {
      width: 71%;
      height: 113px;
      font-family: Verdana, sans-serif;
      font-size: 1em;
      padding-left: 4px;
      border: 1px solid #000;
      background: transparent url('images/textarea-bg.png') no-repeat;
}

I added a 1px solid border to the textarea ... completely optional of course ... but it helps the textarea show up.

Is this helpful?

Eric

Absolutely agree with qaljimmy. =)

Hi and thank you for the quick replies.
I changed the setting on the font-family property. That fixed the p text but now the h2's are showing up in Geneva and they should be in Times Roman. I believe I've put the proper values in there. So that's weird.

And I've already given the form 0 margin and 0 padding in the top of the css file. And all borders have been taken off of the input text and textarea because I'm using background images.
I did manage to get the submit and reset buttons to line up flush with the left margin by clearing both and not just right. Duh.

But I just can get the last name label and it's input box to get in line.

A

Hi, laughhearty,

Usually I apply a specific font attribute to every text tag. Something like

h2 {
      font-family: 'Times New Roman', Geneva, Verdana, sans-serif;
      font: 1.4em/2.0em;
      padding-bottom: 1em;
}

... etc. That is, I format every text tag. It does not take long, or much space. You can set up selectors for tags p, li, td, h1, h2, h3, etc. very quickly. This usually gives me complete control over all of my fonts.

Is that helpful?

>>>But I just can get the last name label and it's input box to get in line.

I will take another look at the input box in a little while. You are saying that you want the last name label, and the input field, to line up horizontally as if they were on the same line?

Eric

Eric is right about text tags. The way I do it though is set the global font i wish to use throughout the website on the  BODY tag. Then i overwrite the font-family for whatever tag i need with a more specific selector like H1,H2, etc. That's good practice IMHO.
Suggestion for the heading fixes is to append the snippet below to your css file.

Also on a sidenote, i'd avoid combining the use of serif fonts (i.e. Times New Roman) with sans-serif (Verdana). Although in your case it looks fine, if headings and text mix up too much, it could get annoying to the eye of the reader.

h1,h2 {font-family:Times New Roman, Times, serif;}
form#contactform div.contact {width:98%; float:none; clear:both;}
form#contactform div.contact label {width:20%;}
form#contactform div.subscribe label {width:auto;}
form#contactform div.contact textarea {vertical-align:top;}

Select allOpen in new window

Forgot something on line 3 of snippet
form#contactform div.contact label {width:20%; display:block; float:left;}

laughhearty,

It looks like the input fields do line up horizontally with the text labels, in both FF and MSIE:

http://paigewilsonarts.com/contact.php

Do you mean you want the text labels and the input fields to line up vertically, in tidy columns? That's doable.

I believe qaljimmy noted a useful way to do that in his code above -- just looking at the CSS he wrote, without seeing the HTML, it looks like qaljimmy articulated a useful way to align text labels and input fields vertically and horizontally. I'm curious to see it work.

Let us know if this is helpful to you or if you have questions?

Best from Eric

Hello,
I really appreciate the help.
So I've attached the code showing what I've got in the Css for the h1 and the h2.
And a screen shot of what I'm seeing in IE concerning the form...

A~

h1, h2 {
	font-family: "Times Roman", Georgia, serif;
	font: 2em normal;
	padding-bottom: 1em;
}

Select allOpen in new window

formOnIE.jpg

See how the Last name label and field are mucking everything up.
I also want to get rid of the scroll bars without having the background scroll in IE as it does when I put
overflow: auto in the css.

A

Hmm...Somehow my pw.css didn't get saved and some of my fixes aren't showing up. So below is the updated screenshot.
formOnIE.jpg

laughhearty, can you attach your HTML and style sheet? I'll take a closer look for you this evening.

Eric

okay,
Thanks Eric!

/* Normalizes margins, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
	margin: 0;
	padding: 0; 
}
 
/* Normalizes font-size for headers */
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
}
 
/* Removes Styles from lists */
ol, ul {
	list-style: none; 
}
 
/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}
 
/* Removes list-style from lists */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
 
/* Removes border from fieldset and img */
fieldset, img {
	border: 0;
}
 
/* Left-aligns text in caption and th */
caption, th {
	text-align: left;
}
 
/* Removes quotation marks form q */
q:before, q:after {
content: '';
}
 
/* Removes outline from links in firefox */
a {
	outline: none;
}
/*-------------------------------*/
 
/* Universal Styling */
html {
	background: url(images/wallpapertile.jpg) repeat;
} 
body { 
	color: #712919;
	font-family: Geneva, Verdana, sans-serif;
	font-size: .8em;
	line-height: 1.5em;
	text-align: justify;
}
a:link, a:visited {
	color: #721919;
}
a:hover {
	color: #380701;
}
p {
	padding-bottom: 1em;
}
h1, h2 {
	font-family: "Times Roman", Georgia, serif;
	font: 2em normal;
	padding-bottom: 1em;
}
 
/*------------------------*/
/* =general layout */
 
div#content {
	width: 693px;
	margin: 0 auto;
	margin-top: 1px;
}
div#branding {
	height: 164px;
	width: 693px;
	background: url(images/header.png) no-repeat center;
}
div#branding h1 {
	text-indent: -9999px;
}
div#container {
	background: url(images/main-content-bg.png) repeat-y center;
	padding: 40px 0;
	width: 693px;
} 
 
div#main-content {
	width: 580px;
	margin: 40px auto;
}
 
/* =navigation */
 
div#navigation {
	height: 33px;
	width: 675px;
	position: absolute;
	top: 132px;
}	
ul#navbuttons li {
	display: inline;
	float: left;
	padding-left: 28px;
}
ul#navbuttons li:first-child {
	padding-left: 45px;
}
ul#navbuttons li a {
	display: block;
	height: 33px;
	background-repeat: no-repeat;
	background-position: 0 0;
	text-indent: -9999px;
}
 
ul#navbuttons li#home a { background-image: url(images/navbuttons/home.png); width: 47px;}
ul#navbuttons li#about a { background-image: url(images/navbuttons/about.png); width: 49px;}
ul#navbuttons li#still a { background-image: url(images/navbuttons/stilllifes.png); width: 71px;}
ul#navbuttons li#paper a { background-image: url(images/navbuttons/works-on-paper.png); width: 124px;}
ul#navbuttons li#news a { background-image: url(images/navbuttons/news.png); width: 41px;}
ul#navbuttons li#contact a { background-image: url(images/navbuttons/contact.png); width: 63px;}
ul#navbuttons li#links a { background-image: url(images/navbuttons/links.png); width: 45px;}
 
ul#navbuttons li a:hover { background-position: 0 -33px;}
ul#navbuttons li.selected a { background-position: 0 -66px;}
			
/*----------------------*/
/* =site-info */
 
div#site-info {
  height: 100px;
  margin: 0 auto 30px;
	padding-top: 20px;
	overflow: auto;
	font-size: .875em;
	background: url(images/site-info-bg.png) no-repeat bottom center;
}
div#site-info-text {
	position: relative;
	width: 580px;
	margin: 0 auto;
}
div#site-info ul {
	float: left;
	width: 66%;
}
div#site-info ul li {
	display: inline;
	margin: 0px;
	padding: 0px;
	padding-left:10px;
}
div#site-info ul li:first-child {
	padding-left: 0;
}
p#copyright {
	float: right;
	width: 34%;
	text-align: right;
}
p#site-design {
	text-align: center;
	width: 100%;
	clear: both;
	padding-top: 1em;
	border-top: dashed 1px #721919;
	
}
 
/*------------------------*/
/* =homepage */
 
p#homepage-image {
	text-align: center;
	padding: 0 0 0 0;
}
 
/*-----------------------*/
/* =about page */
 
p.first-letter {
	float: left;
	width: 63px;
	padding-right: 5px;
}
p.text {
}
 
/*-----------------------*/
/* =still lifes page */
 
div.gallery img {
	padding-right: 15px;
	padding-bottom: 12px;
}
div#thumbnails {
	margin-left: 19px;
}
 
/*-----------------------*/
/* =works on paper page */
 
p.frame {
	background: url('images/picture-frame.jpg') top center no-repeat;
	width: 361px;
	height: 221px;
	padding-top: 190px;
	padding-left: 150px;
	margin-left: 40px;
	font-size: 3em;
	font-family: "Times Roman", Georgia serif; 
}
 
 
/*-----------------------*/
/* =news page */
 
div#news-story {
	padding-bottom: 100px;
}
 
/*-----------------------*/
/* =contact page */
 
p.bold {
	font-weight: bold;
}
fieldset {
	
	width: 60%;
}
label {
	display: block;
	padding-top: 5px;
}
input[type=text] {
	width: 71%;
	height: 21px;	
	color: #380701;
	font-size: 1em;
	padding: 3px 0 0 4px;
	margin-bottom: 0;
	border: 0;
	background: transparent url('images/input-bg.png') no-repeat;
}
textarea {
	width: 71%;
	height: 113px;
	font-family: Verdana, sans-serif;
	font-size: 1em;
	padding-left: 4px;
	border: 0;
	background: transparent url('images/textarea-bg.png') no-repeat;
}	
div.subscribe {
	padding-top: 6px;
}
div.subscribe label {
	float: right;
	width: 93%;
	margin-top: -5px;
}
span.checkbox {
  	width: 19px;
  	height: 25px;
  	padding: 0 0 0 0;
  	margin: 0 5px 0 0;
  	background: url(images/checkbox.png) no-repeat;
  	display: block;
	float: left;
}
div.send {
	clear: both;
	padding-top: 5px;
}
.submit_button {
	border-style: none;
	width: 76px;
	height: 41px;
	text-indent: -9999px;
	background: url(images/submit.png) 0 0 no-repeat;
	margin: 5px 0 0 0;
	display: block;
	float: left;
}
.reset_button {
	border-style: none;
	width: 76px;
	height: 41px;
	text-indent: -9999px;
	background: url(images/reset.png) 0 0 no-repeat;
	margin: 5px 0 0 0;
	display: block;
	float: left;
 
}
.submit_button:hover {
  	background-position: 0 -41px;
  	cursor: default;
}
 
.reset_button:hover {
		background-position: 0 -41px;
		cursor: default;
}
 
/*-----------------------*/
/* =links page */
 
ul#page-links {
	padding-bottom: 100px;
	font-weight: bold;
}
 
 
<?php  
 //If the form is submitted  
 if(isset($_POST['submit'])) {  
   
     //Check to make sure that the name field is not empty  
     if(trim($_POST['firstname']) == '') {  
         $hasError = true;  
     } else {  
         $firstname = trim($_POST['firstname']);  
     }  
   
     //Check to make sure that the subject field is not empty  
     if(trim($_POST['lastname']) == '') {  
         $hasError = true;  
     } else {  
         $lastname = trim($_POST['lastname']);  
     }  
   	$subject="Sent Through paigewilsonarts.com";
     //Check to make sure sure that a valid email address is submitted  
     if(trim($_POST['email']) == '')  {  
         $hasError = true;  
     } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {  
         $hasError = true;  
     } else {  
         $email = trim($_POST['email']);  
     }  
   
     //Check to make sure comments were entered  
     if(trim($_POST['comments']) == '') {  
         $hasError = true;  
     } else {  
         if(function_exists('stripslashes')) {  
             $comments = stripslashes(trim($_POST['comments']));  
         } else {  
             $comments = trim($_POST['comments']);  
         }  
     }  
   
		 //Check to see if Subscribe Button Clicked
		 
		if(IsSet($_POST["subscribe"])){
  $subscribe="Add me to your mailing list!";
}
     //If there is no error, send the email  
     if(!isset($hasError)) {  
         $emailTo = 'paige@paigewilsonarts.com'; //Put your own email address here  
         $body = (IsSet($subscribe) ? $subscribe : "") . "\n\n" . $comments;   
         $headers = 'From: Paigewilsonarts.com <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;  
   
         mail($emailTo, $subject, $body, $headers);  
         $emailSent = true;  
     }  
 }  
 ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta name="description" content="Paige Wilson, contemporary California fine artist, paints large, strong, colorful, realistic and trompe l' oeil still life oil paintings. "/>
	<meta name="keywords" content="landscape artist,still life artist,santa barbara artist,teaching art,UCSB teaching,landscape painting,still life painting,Paige Wilson,Californian artist,painting style,Californian art,Californian landscapes" />
		<link rel="shortcut icon" href="images/favicon.png" />
		<link rel="stylesheet" type="text/css" href="pw.css" />
		<title>Paige Wilson: Santa Barbara California Still life and landscape painter</title>
		<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
		<script src="js/jquery.validate.pack.js" type="text/javascript"></script>
		<script src="js/select_button_styling.js" type="text/javascript"></script>
		<script type="text/javascript">  
$(document).ready(function(){  
     $("#contactform").validate();  
 });  
	</script>
	</head>
	<body>
	<div id="content">
	<div id="branding">
	<h1>Paige Patterson Wilson</h1>
	<div id="navigation">
		<ul id="navbuttons">
			<li id="home"><a href="index.html">Home</a></li>
			<li id="about"><a href="about.html">About</a></li>
			<li id="still"><a href="still-lifes.html">Still Lifes</a></li>
			<li id="paper"><a href="works-on-paper.html">Works on Paper</a></li>
			<li id="news"><a href="news.html">News</a></li>
			<li id="contact" class="selected"><a href="contact.php">Contact</a></li>
			<li id="links"><a href="links.html">Links</a></li>
		</ul>
	</div><!-- navigation -->
	</div><!-- branding -->
	<div id="container">
	<div id="main-content">
	<h2>Contact</h2>
	<p>If you have any questions or comments, please email me at:</p>
 
	<p class="bold"><a href="mailto:paige@paigewilsonarts.com?subject=Paige Wilson - Art">paige@paigewilsonarts.com</a></p>	
	<p>&nbsp;</p>
	
	<p class="bold">Paige Wilson Arts and Blue Tower Studio at:</p>
	
	<p class="bold">1229 Gillespie Way<br />
	Santa Barbara, CA 93101-4810
	</p>
	<p>is open by appointment.</p>
	<p class="bold">Phone: 805-259-6076</p> 
	<p>&nbsp;</p>
	<p>If you would like to be added to my mailing list, please fill out the form below:</p>	
	 <?php if(isset($hasError)) { //If errors are found ?>  
    <p class="error">Please check if you've filled all the fields with valid information. Thank you.</p>  
 <?php } ?>  
   
 <?php if(isset($emailSent) && $emailSent == true) { //If email is sent ?>  
     <p><strong>Email Successfully Sent!</strong></p>  
     <p>Thank you <strong><?php echo $name;?></strong> for using my contact form! Your email was successfully sent and I will be in touch with you soon.</p>  
 <?php } ?>
 
	<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform">
  <fieldset>
  	<div class="contact">
    <label for="firstname">First Name:</label>
    <input type="text" name="firstname" id="firstname" value="" class="required" />
    </div>
		<div class="contact"
		<label for="lastname">Last Name:</label>
    <input type="text" name="lastname" id="lastname" value="" class="required" />
    </div>
    <div class="contact">
    <label for="email">E-mail:</label>
    <input type="text" name="email" id="email" class="required email" value="" />
    </div>      
		<div class="contact">
    <label for="comments">Comments:</label>
    <textarea name="comments" id="comments" rows="7" cols="30" class="required"></textarea>
    </div>
		<div class="subscribe">
		
    <input type="checkbox" name="subscribe" id="subscribe" value="1" class="styled"/>
		<label for="subscribe">Add me to your Mailing List</label>
    </div>
 	<div class="send">
  	<button type="submit" name="submit" id="submit" class="submit_button">submit</button><button type="reset" name="reset" id="reset" class="reset_button">reset</button>
  	</div>
  	</fieldset>
  	</form>
	</div><!-- main-content -->
	</div><!-- container -->
	<div id="site-info">
		<div id="site-info-text">
		<ul>
			<li><a href="index.html">Home</a></li><li> <!-- getting rid of whitespace in IE -->
			<a href="about.html">About</a></li><li>
			<a href="still-lifes.html">Still Lifes</a></li><li>
			<a href="works-on-paper.html">Works on Paper</a></li><li>
			<a href="news.html">News</a></li><li>
			<a href="contact.php">Contact</a></li><li>
			<a href="links.html">Links</a></li>
		</ul>
		<p id="copyright">&copy; 2009 Paige Patterson Wilson</p>
		<p id="site-design">Site Design: <a href="mailto:alicia@aliciastrose.com">Alicia St Rose</a></p>
		</div><!-- site-info-text -->
	</div><!-- site-info -->
	</div><!-- content -->
	</body>
</html>

Select allOpen in new window

Maybe something like this? Do I have the right idea?

Your CSS seems a little complicated. I think "less is more". =)

Let me know what you think.

Eric

Hi Kravimir,
That fixed the name label. I can't believe I missed that.

As far as the overflow: auto. I had it on the textarea selector. But took it off since it wasn't working. But now I realize it's imperative anyway just incase someone puts a lot of text in the field.

I even tried background attachment: fixed. And it still scrolls.

Eric,
Your code snippet isn't showing up on this end.

fieldset {
	
	width: 60%;
}
label {
	display: block;
	padding-top: 5px;
}
input[type=text] {
	width: 71%;
	height: 21px;	
	color: #380701;
	font-size: 1em;
	padding: 3px 0 0 4px;
	margin-bottom: 0;
	border: 0;
	background: transparent url('images/input-bg.png') no-repeat;
}
textarea {
	width: 71%;
	height: 113px;
	font-family: Verdana, sans-serif;
	font-size: 1em;
	padding-left: 4px;
	border: 0;
	overflow: auto;
	background-attachment: fixed;
	background: url('images/textarea-bg.png') no-repeat;
}	
div.subscribe {
	padding-top: 6px;
}
div.subscribe label {
	float: right;
	width: 93%;
	margin-top: -5px;
}
span.checkbox {
  	width: 19px;
  	height: 25px;
  	padding: 0 0 0 0;
  	margin: 0 5px 0 0;
  	background: url(images/checkbox.png) no-repeat;
  	display: block;
	float: left;
}
div.send {
	clear: both;
	padding-top: 5px;
}
.submit_button {
	border-style: none;
	width: 76px;
	height: 41px;
	text-indent: -9999px;
	background: url(images/submit.png) 0 0 no-repeat;
	margin: 5px 0 0 0;
	display: block;
	float: left;
}
.reset_button {
	border-style: none;
	width: 76px;
	height: 41px;
	text-indent: -9999px;
	background: url(images/reset.png) 0 0 no-repeat;
	margin: 5px 0 0 0;
	display: block;
	float: left;
 
}
.submit_button:hover {
  	background-position: 0 -41px;
  	cursor: default;
}
 
.reset_button:hover {
		background-position: 0 -41px;
		cursor: default;
}

Select allOpen in new window

That worked Kravimir!
Thank you.


qaljimmy's and Kravimir's solutions worked out this time.

Before I award the points and close this question I want to give a kudo to EricBourland. Your eagerness to find a solution and your time at trying to solve it was very much appreciated. Thank you!!!

A~

Oops,
before I close this question, I just realized part of my original question has been left unresolved.
I have a font problem. My h2's are still showing up as Verdana when I've given them the font-family value of Times Roman.

I fixed it so that all p's are Verdana instead of Times Roman, but then the h2's went to Verdana as well!

I'm pretty sure this is something retarded....

html {
	background: url(images/wallpapertile.jpg) repeat;
} 
body { 
	color: #712919;
	font-family: Geneva, Verdana, sans-serif;
	font-size: .8em;
	line-height: 1.5em;
	text-align: justify;
}
a:link, a:visited {
	color: #721919;
}
a:hover {
	color: #380701;
}
p {
	padding-bottom: 1em;
}
h2 {
	font-family: Times, Georgia, serif;
	font: 2em normal;
	padding-bottom: 1em;
}

Select allOpen in new window

This problem is only in IE 7 haven't checked 8

I was glad to be helpful. It's always interesting to see how other people set up their CSS. Probably I neglected to paste in my code -- though I seem to remember doing that -- hmm! In any case I'm very glad you got it fixed.

All best,

Eric

Kravimir that worked!

Thank you,
Every one!

A~

Thanks everyone, for the effort you put into the solutions.