| Author |
Form field is indented. Why?
|
|
| Tintin81 2005-12-23, 10:18 pm |
| Please have a look at this page: http://www.pixellovers.com/contact.htm in IE6.
Can anybody explain to me why the first form field is slightly indented and
the others aren't?
I've been thinking about this for days now and I simply can't see why it
happens!!
| |
|
| Tintin81 wrote:
> Please have a look at this page: http://www.pixellovers.com/contact.htm in IE6.
>
> Can anybody explain to me why the first form field is slightly indented and
> the others aren't?
> I've been thinking about this for days now and I simply can't see why it
> happens!!
>
>
>
I would guess you have space(s) after the closing dt tag, I only see the
problem in IE as I would expect. You need to butt the tags together to
make sure you have no spaces or make the list ugly like below to ensure
you have no spaces between the tags.
<dt><label for="realname">Your Name:</label></dt
><dd><input type="text" id="realname" name="realname" /></dd>
--
Cheers jojo
Team Macromedia Member Volunteer for Dreamweaver MX
http://www.webade.co.uk
http://www.cmsforbusiness.co.uk
----------------------------------------------------
Extending Knowledge, Daily.
http://www.communityMX.com/
Free 10 day trial
http://www.communitymx.com/joincmx.cfm
----------------------------------------------------
| |
| Tintin81 2005-12-23, 10:28 pm |
| Hey jojo,
Thanks for your help. I got rid of all the whitespace now and made the code
"ugly" as you suggested. However, the problem is still there. Here's my new
code:
<dl
><dt><label for="realname">Your Name:</label></dt
><dd><input type="text" id="realname" name="realname"/></dd
><dt><label for="email">Your Email:</label></dt
><dd><input type="text" id="email" name="email"/></dd
><dt><label for="message">Your Message:</label></dt
><dd><textarea id="message" name="message" cols="25"
rows="5"></textarea></dd
><dt><input type="submit" name="submit" value="Send Message"/></dt
>
</dl>
Any more ideas?
| |
|
| Hi
You also need to zero off the various browser defaults.
dl {
padding: 0;
margin: 0;
}
That should fix it.
It is a good idea to zero off all browser default values in the first
selector in your style sheet.
* {
margin: 0;
padding: 0;
border: 0;
}
You can then set any necessary values against each specific element.
--
Cheers jojo
Team Macromedia Member Volunteer for Dreamweaver 8
http://www.webade.co.uk
http://www.cmsforbusiness.co.uk
----------------------------------------------------
Extending Knowledge, Daily.
http://www.communityMX.com/
Free 10 day trial
http://www.communitymx.com/joincmx.cfm
----------------------------------------------------
| |
| Holland87 2005-12-23, 10:28 pm |
| Tintin81 wrote:
> Any more ideas?
Hey there. I'm not sure exactly what is going on with the webpage (will not
have a good amount of time to look at it until later); however, when you take
the code you supplied and put it in a blank .htm document, the problem is not
there in IE. Here is what I copied:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<dl>
<dt><label for="realname">Your Name:</label></dt>
<dd><input type="text" id="realname" name="realname"/></dd>
<dt><label for="email">Your Email:</label></dt>
<dd><input type="text" id="email" name="email"/></dd>
<dt><label for="message">Your Message:</label></dt>
<dd><textarea id="message" name="message" cols="25" rows="5"></textarea></dd>
<dt><input type="submit" name="submit" value="Send Message"/></dt>
</dl>
</body>
</html>
Again, no problems from your raw code. Therefore, it must be something else,
like your CSS or something. I will look at this a bit more closely later,
though. For now, don't focus on that part of your code above (^) because that
isn't your problem.
Take care.
------
Shane H
http://www.deceptivemagic.com
| |
| Tintin81 2005-12-23, 10:28 pm |
| Hey guys,
You both got it right! I implemented your tips and it works fabulously!!!
This is the exact CSS code I'm using:
(The 2nd paragraph is the crucial one)
Thanks a lot for your help!
/********************* CONTACT FORM *********************/
#contactform{
margin: 0;
padding: 12px;
background: url(images/bg_form.gif) repeat-x top left;
}
#contactform dl{
padding: 0;
margin: 0;
}
#contactform dl dt{
color: #333;
font-size: 10px;
}
#contactform dl dd{
margin: 0;
padding: 0 0 10px 0;
font-size: 10px;
line-height: 1.5em;
}
| |
|
|
|
|
| Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |