23 replies [Last post]
smirkingdude
Offline
Enthusiast
Last seen: 14 years 14 weeks ago
Timezone: GMT-4
Joined: 2007-04-07
Posts: 61
Points: 0

PHP issue is solved because it works fine now. It emails the info needed to me when a site visitor enters the online form. I've found an effective way to prevent spam bots (using captcha). I know there's still room for improvement. Smile

I have one little frustration on same webpage. This page looks weird on Firefox 2.0 and looks fine on IE 6.

Here's the CSS code:

/* CSS document*/

body {
margin: 30px 0 30px 0;
padding: 0;
text-align: center;
min-width: 740px;
background-color: #7a6d9b;
color: white;
background-image: url(images/birdbg.jpg);
background-repeat: repeat-x;
font-family: Arial, Helvetica, Verdana, sans-serif;
}

#wrapper {
text-align: left;
width: 740px;
margin-left: auto;
margin-right: auto;
background-color: #fdf8f2;
color: #666666;
padding: 10px;
}

#main {
position: relative;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
}

#sidebar1 {
float: left;
width: 180px;
margin-bottom: 5px;
}

#sidebar1 .inner {
margin: 0;
}

#nav {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px #7a6d9b solid;
border-right: 1px #7a6d9b solid;
border-left: 1px #7a6d9b solid;
}

#nav li {
border-bottom: 1px #7a6d9b solid;
padding: 0;
font-size: 90%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#nav li a:link, #nav li a:visited {
padding: 0.2em 0 0.2em 10px;
text-decoration: none;
color: white;
font-weight: bold;
background: url(images/navbg1.jpg) #f7f7bb bottom left repeat-x;
height: 2em;
line-height: 2em;
display: block;
}

#nav li a:hover {
padding: 0.2em 0 0.2em 10px;
text-decoration: none;
color: black;
font-weight: bolder;
background: url(images/navbg2.jpg) #7a6d9b bottom left repeat-x;
height: 2em;
line-height: 2em;
display: block;
}

#content-wrapper {
float: right;
top: 0;
right: 0;
width: 550px;
background-color: #f7f7bb;
margin-bottom: 5px;
}

#content {
background-color: white;
background-position: top right;
border: 1px solid #7a6d9b;
padding: 0;
display: inline-block;
}

#content .inner {
margin: 0px;
}

#content .inner2 {
margin: 0 5px 5px 5px;
}

#content h1 {
font-size: 120%;
padding: 0.3em 0 0.3em 30px;
text-align: center;
}

#content h2 {
font-size: 260%;
font-weight: normal;
font-family: Georgia, Times, "Times New Roman", serif;
border-bottom: 1px solid #7a6d9b;
margin: 1em 0 0 0;
}

#content p {
font-family: Verdana, "Arial", Helvetica, sans-serif;
line-height: 1.6em;
}

#content p em.required {
font-weight: bold;
font-style: normal;
color: #f00;
}

#content h1.head {
font-size: 200%;
}

#dateline {
font-size: 160%;
font-weight: normal;
font-family: Georgia, Times, "Times New Roman", serif;
color: #7a6d9b;
margin: 0.3em 0 0 0;
}

#content form.contactform {
background-color: f7f7bb;
border: 1px solid #7a6d9b;
padding:0;
}

#content form.contactform label {
display: -moz-inline-box;
line-height: 1.5em;
vertical-align: top;
width: 120px; /* Width of labels */
}

#content form.contactform ol {
margin: 0;
padding: 0;
}

#content form.contactform ol li {
list-style: none;
padding: 5px;
margin: 0;
}

#content form.contactform em.required, #content form.contactform li em.required {
font-weight: bold;
font-style: normal;
color: #f00;
}

#hands {
border: 1px solid #7a6d9b;
margin: 5px 5px 5px 0;
float: left;
}

#name, #address1, #address2, #city, #state, #zipcode, #phone, #email, #message, #security_code {
border: 1px solid #7a6d9b;
}

#submit, #reset {
background-color: f7f7bb;
border: 1px solid #7a6d9b;
margin: 5px;
}

.intro {
font-weight: bold;
padding-left: 30px;
}

.bold {
font-weight: bold;
}

.topic {
font-weight: bold;
text-decoration: underline;
font-size: 120%;
}

.image {
border: 1px solid #7a6d9b;
margin: 5px;
}

#content table thead {
text-align: center;
}

#content table.week {
background-color: #f7f7bb;
border: 1px solid #7a6d9b;
}

#content table.week th.weekdays {
text-align: center;
padding: 3px;
}

#content table.week th.events {
padding: 0;
}

#content table.week th, #content table.week tr td {
border: 1px solid #7a6d9b;
margin: 0;
padding: 0;
}

#content table.week ul li {
list-style-image: url(images/bullet-cross.gif)
}

#content ul.howedoit li {
list-style-image: url(images/bullet-cross.gif)
}

#content ul.beliefs li, #content ul.vision li, #content ul.ministries li {
font-family: Verdana, "Arial", Helvetica, sans-serif;
line-height: 1.6em;
padding-bottom: 1em;
list-style-image: url(images/bullet-cross.gif)
}

#footer {
margin: 0;
padding: 0;
width: 100%;
border-top: 1px solid #7a6d9b;
border-bottom: 1px solid #7a6d9b;
clear: both;
overflow: hidden;
}

#footer p {
font-size: 90%;
color: #7a6d9b;
margin: 0;
padding: 0.2em 0 0.2em 0;
}

.validsymbols {
float: right;
margin: 0.2em;
}

a {
text-decoration: none;
}

.hrie {
width: 50%;
text-align: center;
}

#flash {
text-align: center;
margin: 3px;
}

XHTML code:


Word & Worship Church

Contact Us An image of two hands reaching out to touch one another Word & Worship Family Fellowship
28 Cairns Street
Tecumseh, MI 49286
(517) 424–5943
[email protected]

Use the form below to contact us with your questions or comments. Mandatory fields marked *

  1. Name*
  2. Address 1*
  3. Address 2
  4. City*
  5. State*
  6. Zip Code*
  7. Phone Number*
  8. Email Address
  9. Please enter the code below into the text box.
    *
  10. Message*

You might notice that XHTML page calls for javascript for non-IE browsers. Here's the code:

// JavaScript Document

if( document.addEventListener ) document.addEventListener( 'DOMContentLoaded', contactform.html, false);

function contactform(){
// Hide forms
$( 'form.contactform' ).hide().end();

// Processing
$( 'form.contactform' ).find( 'li/label' ).each( function( i ){
var labelContent = this.innerHTML;
var labelWidth = document.defaultView.getComputedStyle( this, '' ).getPropertyValue( 'width' );
var labelSpan = document.createElement( 'span' );
labelSpan.style.display = 'block';
labelSpan.style.width = labelWidth;
labelSpan.innerHTML = labelContent;
this.style.display = '-moz-inline-box';
this.innerHTML = null;
this.appendChild( labelSpan );
} ).end();

// Show forms
$( 'form.contactform' ).show().end();
}

Wonder what went wrong on Firefox 2.0? I can see that some words are missing. Text boxes are lined up vertically just like in IE 6. :?

Suggestions / advices?

"Imagination is more important than knowledge"
Albert Einstein

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

This was moved from another

This was moved from another thread in off topic because it was appropriate to start a new post.

smirkingdude
Offline
Enthusiast
Last seen: 14 years 14 weeks ago
Timezone: GMT-4
Joined: 2007-04-07
Posts: 61
Points: 0

Thanks :)

Thanks for moving this thread to this appropriate spot. Smile

Still eager to hear from you guys for your suggestions & advices regarding my latest frustration . Smile

"Imagination is more important than knowledge"
Albert Einstein

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

I have no idea (he said

I have no idea (he said honestly).

BUT, I ran your php script through some tests of my own. That is not a script to be used in the real world. If you check the simple one I pointed you to, it has all sorts of validation/code stripping to stop the naughty folk.

There are so many good mail form scripts why stick with this one?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I would heed the advice

I would heed the advice email scripts can hold many dangers, unless you're very conversant with security matters.

Your use of $_REQUEST is an invitation to exploit things even with my extremely limited knowledge it suggests a few approaches I might take to get on to your server and there seems to be no checks whatsoever on data you are pulling in, not a good thing.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

smirkingdude
Offline
Enthusiast
Last seen: 14 years 14 weeks ago
Timezone: GMT-4
Joined: 2007-04-07
Posts: 61
Points: 0

excuse me....

Clevatreva & Hugo,

Not wanting any trouble with you guys...this new thread is about a problem relating to strange effects on Firefox 2.0 (for example, some words being missing) on this page.

As for PHP problem, I'll look at Clevatreva's post and respond to appropriate thread (the one which this new thread was broken off from).

"Imagination is more important than knowledge"
Albert Einstein

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

smirkingdude wrote:this new

smirkingdude wrote:
this new thread is about a problem relating to strange effects on Firefox 2.0

Yeh well

The code you have used for your form layout is far from ideal or semantically correct.

Now, at the risk of repeating myself, did you find my earlier form mail thread?

That shows one semantic approach to laying out a form that is similar to yours, except that you have more fields. Just grab the code and run it for yourself and see what the form looks like.

Yes, one of your labels has disappeared. It doesn't surprise me considering how you have laid the form out. There was a thread either yesterday or the day before where myself and one of the other mods showed the OP how to lay out a form.

Also, Firefox is showing you what you have coded and IE is lying to you.

For example, where you have the title Contact Us, FF renders this much further down, but IE collapses the margins and renders it higher, wrongly of course (even though that is what you want). Just search for collapsing and uncollapsing margins.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

smirkingdude

smirkingdude wrote:
Clevatreva & Hugo,

Not wanting any trouble with you guys...this new thread is about a problem relating to strange effects on Firefox 2.0

oops begging your pardon, I stand suitably chastised and hang my head in shame, your quite correct and it was all Trevas fault!

Thing is most of us (even with only moderate scripting ability) will worry when we see potentially insecure scripts.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hugo wrote:it was all Trevas

Hugo wrote:
it was all Trevas fault!

Phagh. Stomps off in a sulk.

The second post says it was pruned away. I went back to the php coz the OP thought he had that done. So I should have gone back to that one, right. Doh!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 40 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Hugo wrote:smirkingdude

Hugo wrote:
smirkingdude wrote:
Clevatreva & Hugo,

Not wanting any trouble with you guys...this new thread is about a problem relating to strange effects on Firefox 2.0

oops begging your pardon, I stand suitably chastised and hang my head in shame, your quite correct and it was all Trevas fault!

Thing is most of us (even with only moderate scripting ability) will worry when we see potentially insecure scripts.

I understand the OP's frustration, perhaps, but still we provide free help and that implies that we're not just hired advisors and we will speak out when we see else something obviously bad, like invalid html for instance.

If you are asking for our help I think you should be prepared for us to point out obvious flaws that you might not have thought about. If you want a bunch of yes men, hire people who will tell you what you want to hear, don't come to CSS Creator!

At least that's the way I see it.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Ed, you crack me up man.

Ed, you crack me up man.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

As an aside, this is what

As an aside, this is what Tony has on the Home page of the site:

csscreator.com wrote:
A Cascading Style Sheet learning resource for web developers and designers. Give and receive tips and advice on CSS and website creation.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 19 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

ClevaTreva wrote:As an

ClevaTreva wrote:
As an aside, this is what Tony has on the Home page of the site:

csscreator.com wrote:
A Cascading Style Sheet learning resource for web developers and designers. Give and receive tips and advice on CSS and website creation.

Wait, but you still havn't answered how I can get new gun models and new HUD models in CS:S. I thought this was a help forum - you guys suck!!!

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

smirkingdude
Offline
Enthusiast
Last seen: 14 years 14 weeks ago
Timezone: GMT-4
Joined: 2007-04-07
Posts: 61
Points: 0

"yes men" dont learn innovation

Ed,

In coming to csscreator.com forum, I don't expect any "yes men"...just the enlightment through learning & sharing the wisdom of CSS (chiefly among other things).

Clevatreva & Hugo,

Don't mind what Deuce says. You guys don't suck Smile

I'm puzzled as to why "display: inline-block" works with IE & not Firefox....and as to why Firefox accepts "display: -moz-inline-box" (not displaying inline-block) ? :?

As I checked...the form have all labels except the security code image (no label for it) but still few words missing in Firefox.

lookee here:



  1. Name*



  2. Address 1*



  3. Address 2



  4. City*



  5. State*



  6. Zip Code*



  7. Phone Number*



  8. Email Address


  9. Please enter the code below into the text box.

    code for security purpose*



  10. Message*








"Imagination is more important than knowledge"
Albert Einstein

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Yes, but you put the labels

Yes, but you put the labels etc inside an ordered list.

Look carefully at the html in this thread:

http://www.csscreator.com/node/21666

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

smirkingdude wrote:

smirkingdude wrote:

Clevatreva & Hugo,

Don't mind what Deuce says. You guys don't suck Smile

well sometimes Sad

smirkingdude wrote:

I'm puzzled as to why "display: inline-block" works with IE & not Firefox....and as to why Firefox accepts "display: -moz-inline-box" (not displaying inline-block) ? :?

Inline-block is a strange little property, rather useful but not fully implemented or accepted by Mozi (yet?).

Technically IE supports this property on Anchor elements only, but what the property does do in IE is act as one of the properties that sets(triggers) haslayout so can be used when needing to expand parents to contain floated elements.

The dash prefix to properties '-moz-' is a method allowed to browsers to let them implement custom properties for testing without having them directly implemented.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 1 day ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

Deuce wrote:ClevaTreva

Deuce wrote:
ClevaTreva wrote:
As an aside, this is what Tony has on the Home page of the site:

csscreator.com wrote:
A Cascading Style Sheet learning resource for web developers and designers. Give and receive tips and advice on CSS and website creation.

Wait, but you still havn't answered how I can get new gun models and new HUD models in CS:S. I thought this was a help forum - you guys suck!!!

Download em from FPSbanana or CDG.net and copy them into your cstrike directory - models, materials and possibly the sounds/scripts folders as well.

You can edit the clientscheme.res (iirc) file to change your hud, or use a program like the Inpact Hud Tweaker.





hey, who says we're not helpful Wink

Verschwindende wrote:
  • CSS doesn't make pies

smirkingdude
Offline
Enthusiast
Last seen: 14 years 14 weeks ago
Timezone: GMT-4
Joined: 2007-04-07
Posts: 61
Points: 0

width: 120px

ClevaTreva wrote:
Yes, but you put the labels etc inside an ordered list.

Look carefully at the html in this thread:

http://www.csscreator.com/node/21666

Yes.. in order to make textboxes lined up vertically by using this CSS (in BOLD):

#content form.contactform label {
display: -moz-inline-box;
line-height: 1.5em;
vertical-align: top;
width: 120px; /* Width of labels */
}

if no labels, how to ensure that textboxes line up vertically? :?

"Imagination is more important than knowledge"
Albert Einstein

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Sorry for the delay, been

Sorry for the delay, been away Smile

Grab the code from the thread and view the page in a browser. There are no piccies, so it should be easy to do. Do the bits not line up as you wanted? If so, why not grab the code and use it yourself?

smirkingdude
Offline
Enthusiast
Last seen: 14 years 14 weeks ago
Timezone: GMT-4
Joined: 2007-04-07
Posts: 61
Points: 0

putting your example into practice

ClevaTreva,

I've made an attempt to apply your example. Please show me how to do it better. :?

XHTML code:



Name*


Address 1*


Address 2


City*


State*


Zip Code*


Phone Number*


Email Address




Please enter the code below into the text box.

code for security purpose*


Message*







Here's main CSS (emphasis mine in BOLD):

/* CSS document*/

body {
margin: 30px 0 30px 0;
padding: 0;
text-align: center;
min-width: 740px;
background-color: #7a6d9b;
color: white;
background-image: url(images/birdbg.jpg);
background-repeat: repeat-x;
font-family: Arial, Helvetica, Verdana, sans-serif;
}

#wrapper {
text-align: left;
width: 740px;
margin-left: auto;
margin-right: auto;
background-color: #fdf8f2;
color: #666666;
padding: 10px;
}

#main {
position: relative;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
}

#sidebar1 {
float: left;
width: 180px;
margin-bottom: 5px;
}

#sidebar1 .inner {
margin: 0;
}

#nav {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px #7a6d9b solid;
border-right: 1px #7a6d9b solid;
border-left: 1px #7a6d9b solid;
}

#nav li {
border-bottom: 1px #7a6d9b solid;
padding: 0;
font-size: 90%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#nav li a:link, #nav li a:visited {
padding: 0.2em 0 0.2em 10px;
text-decoration: none;
color: white;
font-weight: bold;
background: url(images/navbg1.jpg) #f7f7bb bottom left repeat-x;
height: 2em;
line-height: 2em;
display: block;
}

#nav li a:hover {
padding: 0.2em 0 0.2em 10px;
text-decoration: none;
color: black;
font-weight: bolder;
background: url(images/navbg2.jpg) #7a6d9b bottom left repeat-x;
height: 2em;
line-height: 2em;
display: block;
}

#content-wrapper {
float: right;
top: 0;
right: 0;
width: 550px;
background-color: #f7f7bb;
margin-bottom: 5px;
}

#content {
background-color: white;
background-position: top right;
border: 1px solid #7a6d9b;
padding: 0;
display: inline-block;
}

#content .inner {
margin: 0px;
}

#content .inner2 {
margin: 0 5px 5px 5px;
}

#content h1 {
font-size: 120%;
padding: 0.3em 0 0.3em 30px;
text-align: center;
}

#content h2 {
font-size: 260%;
font-weight: normal;
font-family: Georgia, Times, "Times New Roman", serif;
border-bottom: 1px solid #7a6d9b;
margin: 1em 0 0 0;
}

#content p {
font-family: Verdana, "Arial", Helvetica, sans-serif;
line-height: 1.6em;
}

#content p em.required {
font-weight: bold;
font-style: normal;
color: #f00;
}

#content h1.head {
font-size: 200%;
margin: 0;
padding: 0;
}

#dateline {
font-size: 160%;
font-weight: normal;
font-family: Georgia, Times, "Times New Roman", serif;
color: #7a6d9b;
margin: 0.3em 0 0 0;
}

#content form.contactform {
background-color: f7f7bb;
border: 1px solid #7a6d9b;
padding: 0px;
}

#content form.contactform fieldset {
margin: 0px;
padding: 0px;
border: 0px;
border-collapse: separate;
border-spacing: 0px;
}

#content form.contactform label span {
text-align: left;
display: block;
line-height: 1.2em;
vertical-align: top;
width: 120px; /* Width of span */
}

#content form.contactform label.forminput {
margin:0px 0px 1px 0px;
float:right;
display:inline;
font-size:103%;
width:245px;
height:1.2em;
}

#content form.contactform em.required, #content form.contactform fieldset em.required {
display: inline;
font-weight: bold;
font-style: normal;
color: #f00;
}

#hands {
border: 1px solid #7a6d9b;
margin: 5px 5px 5px 0;
float: left;
}

#name, #address1, #address2, #city, #state, #zipcode, #phone, #email, #message, #security_code {
border: 1px solid #7a6d9b;
}

#submit, #reset {
background-color: f7f7bb;
border: 1px solid #7a6d9b;
margin: 5px;
}

.intro {
font-weight: bold;
padding-left: 30px;
}

.bold {
font-weight: bold;
}

.topic {
font-weight: bold;
text-decoration: underline;
font-size: 120%;
}

.image {
border: 1px solid #7a6d9b;
margin: 5px;
}

#content table thead {
text-align: center;
}

#content table.week {
background-color: #f7f7bb;
border: 1px solid #7a6d9b;
}

#content table.week th.weekdays {
text-align: center;
padding: 3px;
}

#content table.week th.events {
padding: 0;
}

#content table.week th, #content table.week tr td {
border: 1px solid #7a6d9b;
margin: 0;
padding: 0;
}

#content table.week ul li {
list-style-image: url(images/bullet-cross.gif)
}

#content ul.howedoit li {
list-style-image: url(images/bullet-cross.gif)
}

#content ul.beliefs li, #content ul.vision li, #content ul.ministries li {
font-family: Verdana, "Arial", Helvetica, sans-serif;
line-height: 1.6em;
padding-bottom: 1em;
list-style-image: url(images/bullet-cross.gif)
}

#footer {
margin: 0;
padding: 0;
width: 100%;
border-top: 1px solid #7a6d9b;
border-bottom: 1px solid #7a6d9b;
clear: both;
overflow: hidden;
}

#footer p {
font-size: 90%;
color: #7a6d9b;
margin: 0;
padding: 0.2em 0 0.2em 0;
}

.validsymbols {
float: right;
margin: 0.2em;
}

a {
text-decoration: none;
}

.hrie {
width: 50%;
text-align: center;
}

#flash {
text-align: center;
margin: 3px;
}

"Imagination is more important than knowledge"
Albert Einstein

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Mmm That doesn't look good,

Mmm

That doesn't look good, so I assume you didn't entirely copy how I did it.

Can you do me a favor?

Can you cut the css you have just posted down to that needed for the form, and dump all the other bits. The repost just the css. Ta

smirkingdude
Offline
Enthusiast
Last seen: 14 years 14 weeks ago
Timezone: GMT-4
Joined: 2007-04-07
Posts: 61
Points: 0

ok here we go...

ClevaTreva,

Here's the full XHTML code (form in BOLD):


Word & Worship Church

Contact Us An image of two hands reaching out to touch one another Word & Worship Family Fellowship
28 Cairns Street
Tecumseh, MI 49286
(517) 424–5943
[email protected]

Use the form below to contact us with your questions or comments. Mandatory fields marked *

Name*


Address 1*


Address 2


City*


State*


Zip Code*


Phone Number*


Email Address




Please enter the code below into the text box.

code for security purpose*


Message*













and here's the main CSS (not including what's not needed for that XHTML page):

/* CSS document*/

body {
margin: 30px 0 30px 0;
padding: 0;
text-align: center;
min-width: 740px;
background-color: #7a6d9b;
color: white;
background-image: url(images/birdbg.jpg);
background-repeat: repeat-x;
font-family: Arial, Helvetica, Verdana, sans-serif;
}

#wrapper {
text-align: left;
width: 740px;
margin-left: auto;
margin-right: auto;
background-color: #fdf8f2;
color: #666666;
padding: 10px;
}

#main {
position: relative;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
}

#sidebar1 {
float: left;
width: 180px;
margin-bottom: 5px;
}

#sidebar1 .inner {
margin: 0;
}

#nav {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px #7a6d9b solid;
border-right: 1px #7a6d9b solid;
border-left: 1px #7a6d9b solid;
}

#nav li {
border-bottom: 1px #7a6d9b solid;
padding: 0;
font-size: 90%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#nav li a:link, #nav li a:visited {
padding: 0.2em 0 0.2em 10px;
text-decoration: none;
color: white;
font-weight: bold;
background: url(images/navbg1.jpg) #f7f7bb bottom left repeat-x;
height: 2em;
line-height: 2em;
display: block;
}

#nav li a:hover {
padding: 0.2em 0 0.2em 10px;
text-decoration: none;
color: black;
font-weight: bolder;
background: url(images/navbg2.jpg) #7a6d9b bottom left repeat-x;
height: 2em;
line-height: 2em;
display: block;
}

#content-wrapper {
float: right;
top: 0;
right: 0;
width: 550px;
background-color: #f7f7bb;
margin-bottom: 5px;
}

#content {
background-color: white;
background-position: top right;
border: 1px solid #7a6d9b;
padding: 0;
display: inline-block;
}

#content .inner {
margin: 0px;
}

#content .inner2 {
margin: 0 5px 5px 5px;
}

#content h1 {
font-size: 120%;
padding: 0.3em 0 0.3em 30px;
text-align: center;
}

#content h2 {
font-size: 260%;
font-weight: normal;
font-family: Georgia, Times, "Times New Roman", serif;
border-bottom: 1px solid #7a6d9b;
margin: 1em 0 0 0;
}

#content p {
font-family: Verdana, "Arial", Helvetica, sans-serif;
line-height: 1.6em;
}

#content p em.required {
font-weight: bold;
font-style: normal;
color: #f00;
}

#content h1.head {
font-size: 200%;
margin: 0;
padding: 0;
}

#content form.contactform {
background-color: f7f7bb;
border: 1px solid #7a6d9b;
padding: 0px;
}

#content form.contactform fieldset {
margin: 0px;
padding: 0px;
border: 0px;
border-collapse: separate;
border-spacing: 0px;
}

#content form.contactform label span.labeltext {
text-align: left;
display: block;
line-height: 1.2em;
vertical-align: top;
width: 120px; /* Width of span */
}

#content form.contactform label.forminput {
margin:0px 0px 1px 0px;
float:right;
display:inline;
font-size:103%;
width:245px;
height:1.2em;
}

#content form.contactform em.required, #content form.contactform fieldset em.required {
display: inline;
font-weight: bold;
font-style: normal;
color: #f00;
}

#hands {
border: 1px solid #7a6d9b;
margin: 5px 5px 5px 0;
float: left;
}

#name, #address1, #address2, #city, #state, #zipcode, #phone, #email, #message, #security_code {
border: 1px solid #7a6d9b;
}

#submit, #reset {
background-color: f7f7bb;
border: 1px solid #7a6d9b;
margin: 5px;
}

.bold {
font-weight: bold;
}

.image {
border: 1px solid #7a6d9b;
margin: 5px;
}

#footer {
margin: 0;
padding: 0;
width: 100%;
border-top: 1px solid #7a6d9b;
border-bottom: 1px solid #7a6d9b;
clear: both;
overflow: hidden;
}

#footer p {
font-size: 90%;
color: #7a6d9b;
margin: 0;
padding: 0.2em 0 0.2em 0;
}

a {
text-decoration: none;
}

"Imagination is more important than knowledge"
Albert Einstein

smirkingdude
Offline
Enthusiast
Last seen: 14 years 14 weeks ago
Timezone: GMT-4
Joined: 2007-04-07
Posts: 61
Points: 0

ClevaTreva?

I've trimmed CSS as per your request. Please show me how it's being done. I'd like "labeltext" items and "forminput" items to show as if they're on same line:

Name: (form input here)

Not this:

Name:
(form input here)

I know I'm missing somehow with CSS. :?

"Imagination is more important than knowledge"
Albert Einstein

smirkingdude
Offline
Enthusiast
Last seen: 14 years 14 weeks ago
Timezone: GMT-4
Joined: 2007-04-07
Posts: 61
Points: 0

conclusion to this thread here?

Since this thread is about CSS problem on the online form, I've solved the form problem (at least I think.) Conclusion: click here Cool

"Imagination is more important than knowledge"
Albert Einstein