Help - Search - Members - Calendar
Full Version: Form? Large space between my label and text field
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
ACF
http://www.zaworks.com/contactinformation.html

I don't know what touched to make this happen. I am using css, it wasn't like this still i started working on the other pages. I may have changed something that didn't need to be changed in the css but i can't seem to find what i did. Please help im really frustrated. Check out the link above and ill copy past the css below.

Any help would be great thanks.

CODE

@charset "UTF-8";
fieldset {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 1em;
margin-left: 0px;
width: 550px;
background-color: #999999;
padding: 3em;
}
fieldset ol {
margin: 0em;
list-style-type: none;
line-height: normal;
width: 550px;
top: 0px;
padding-top: 0em;
padding-right: 3em;
padding-bottom: 0em;
padding-left: 3em;
}
#wrapper {
float: none;
height: 1010px;
width: 900px;
position: relative;
margin-right: auto;
margin-left: auto;
margin-bottom: auto;
background-color: #999999;
background-attachment: fixed;
background-image: url(Images2/bg1.gif);
background-repeat: no-repeat;
background-position: center center;
padding-left: 5em;
}
#wrapper2 {
background-attachment: fixed;
background-image: url(Images2/bg1.gif);
background-repeat: no-repeat;
background-position: center center;
margin-top: 2em;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
float: none;
height: 600px;
width: 800px;
}
#flash {
background-position: center center;
float: none;
height: 700px;
width: 800px;
padding: 1px;
margin-top: -20px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}
#thankyou {
background-attachment: fixed;
background-image: url(Images2/thankyou3.gif);
background-repeat: no-repeat;
background-position: center center;
height: 800px;
}
label {
text-align: right;
float: left;
width: 6em;
padding-right: .5em;
}
.options label {
text-align: left;
float: none;
width: auto;
}
.overall {
width: 500px;
float: none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
height: 500px;
text-align: center;
padding: 5em;
}
.legend {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
font-style: normal;
line-height: normal;
font-weight: normal;
color: #990000;
}
.explanatory label {
text-align: left;
display: block;
float: none;
width: 15em;
margin: 0em;
height: 2em;
line-height: 23px;
top: 0px;
background-position: 0em;
padding-top: 0em;
padding-right: 1em;
padding-bottom: 0em;
padding-left: 1em;
}
.buttons {
left: 0px;
top: 0em;
right: 0em;
bottom: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding: 0em;
margin-top: 1px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
text-align: center;
}
.textfield {
background-color: #FFFFFF;
border: 1px solid #000033;
width: 12em;
}
.textfield2 {
width: 20em;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding: 1px;
top: 1em;
margin-top: 1em;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.textfield3 {
width: 20em;
background-color: #FFFFFF;
margin: 1em;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: 0;
border-right-style: 0;
border-bottom-style: 0;
border-left-style: 0;
padding-top: 1em;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#htmlpage {
background-repeat: no-repeat;
background-position: center center;
height: 900px;
width: auto;
background-attachment: fixed;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bolder;
color: #FF0000;
background-image: url(Images2/Classifiedsad4.gif);
}
#footer {
color: #FF0000;
margin-top: 0em;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-repeat: no-repeat;
font-size: 14px;
padding-top: 50em;
padding-right: 0;
top: 0em;
height: auto;
width: auto;
text-align: center;
vertical-align: top;
}
footertest2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 36px;
color: #FF0000;
padding-bottom: 0em;
text-align: center;
vertical-align: top;
top: 50em;
left: 10em;
padding-top: 100em;
}
#footer p {
margin: 0;
padding: 0;
height: auto;
}
}
.clear {
clear: both;
}
Darin McGrew
I recommend that you start by fixing the markup errors and CSS errors reported by the online tools.

So, what is it about the current version that you don't like?
ACF
alright ill look into what you said. the space between the label and the text field got large for some reason. If you try the form out the space will then jump closer to the label.
ACF
oh man looks like i have a lot to fix
ACF
whats it mean when it says

Error: there is no attribute TYPE for this element (in this HTML version)

I built this in Dreamweaver cs3
Darin McGrew
BTW, I hope this isn't a formmail script that can be abused as a spam gateway.

The space looks like a side effect of using "text-align : center". The label elements are floated left, and everything else (including the input elements) is centered.
Darin McGrew
QUOTE(ACF @ Feb 22 2008, 09:01 AM) *
whats it mean when it says

Error: there is no attribute TYPE for this element (in this HTML version)
Your doctype declaration claims that this is an XHTML document. (Is there a particular reason you're using XHTML rather than plain HTML?) Element names and attribute names are case sensitive in XHTML, and they must use lowercase letters. You used uppercase letters.
ACF
oh, well no there wasn't a good reason for using XHTML. Im not sure how i did this. the name of the page has a .html. If you haven't noticed Im not to good at all this.
ACF
I have the option in Dream weaver to convert the doc to html transitional or strict. Both are for 4.01. If I did this would or could it fix my problems? if so which one should i use?
Darin McGrew
Please see the FAQ entry What is a DOCTYPE? Which one do I use?

Switching the doctype declaration from XHTML to HTML will fix the "Error: there is no attribute [...] for this element (in this HTML version)" and "Error: element [...] not defined in this HTML version" errors. But there are other errors too.
ACF
thanks you have been real helpful
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.