[solved] Form position and Textfield size css problem
Moderator: General Moderators
[solved] Form position and Textfield size css problem
This thread started with form problem (which was actually a Dreamweaver trait) but another styling problem risen, read below 7th post
I've always had this problem from the table-design days. I am trying to position a search textfield on top of a banner. It works nicely BUT, I need to add a form in order for the search form to work. When I add the form and wrap the textfield in it, it doesn't position exactly where I want it to. I've tried using css for it to show properly but it doesn't.
I've always had this problem from the table-design days. I am trying to position a search textfield on top of a banner. It works nicely BUT, I need to add a form in order for the search form to work. When I add the form and wrap the textfield in it, it doesn't position exactly where I want it to. I've tried using css for it to show properly but it doesn't.
Last edited by Sindarin on Tue Mar 04, 2008 2:30 am, edited 4 times in total.
Re: Form tag keeps pushing my textfield wherever it wants
Thanks for telling us.
Just wanted to bring up the point, this thread is pointless without the html/css.
Just wanted to bring up the point, this thread is pointless without the html/css.
Re: Form tag keeps pushing my textfield wherever it wants
Sorry, but I thought it was a known bug or something.
I just figured out it was a visual trait of Dreamweaver, however this led to another problem.
My textfield looks larger on IE than in Firefox.

Have I forgotten any value that IE takes into account?
I just figured out it was a visual trait of Dreamweaver, however this led to another problem.
My textfield looks larger on IE than in Firefox.

Have I forgotten any value that IE takes into account?
Code: Select all
.textarea-style{
width:89px;
height:14px;
font-size:10px;
border:hidden;
font-family:Verdana, Arial, Helvetica, sans-serif;
max-width:89px;
max-height:14px;
}
.form-style{
width:16px;
height:14px;
font-size:10px;
border:hidden;
}Re: Form tag keeps pushing my textfield wherever it wants
have you tried starting by resetting all default browser styles?
Code: Select all
fieldset, form, label, legend {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
}Re: Form tag keeps pushing my textfield wherever it wants
You mean like this?
It doesn't seem to work. The field is the same.
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!--title-->
<title>Test</title>
<!--encoding-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--scripts-->
<script type="text/javascript" language="javascript" src="scripts/swfobject.js"></script>
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}
body {
background-color: #FFFFFF;
}
a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #F694AB;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #F694AB;
}
a:hover {
text-decoration: underline;
color: #F694AB;
}
a:active {
text-decoration: none;
color: #F694AB;
}
fieldset, form, label, legend {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
}
#wrapper {
width:740px;
height:200px;
margin:0 auto;
position:relative;
top: -66px;
}
#apDiv1 {
position:absolute;
background-image:url(images/background.jpg);
left:0px;
top:0px;
width:708px;
height:1000px;
z-index:1;
}
body {
background-color: #1c212b;
}
#apDiv2 {
position:absolute;
left:0px;
top:139px;
width:708px;
height:172px;
z-index:10;
}
#apDiv3 {
position:absolute;
left:7px;
top:118px;
width:697px;
height:20px;
z-index:11;
}
#apDiv4 {
position:absolute;
left:0px;
top:51px;
width:708px;
height:56px;
z-index:12;
}
.style1 {
color: #FFFFFF;
font-size: 12px;
}
a:link {
color: #BFBFBF;
}
a:visited {
color: #BFBFBF;
}
a:hover {
color: #BFBFBF;
}
a:active {
color: #BFBFBF;
}
.style2 {
color: #BFBFBF;
font-size: 11px;
}
#apDiv5 {
position:absolute;
left:513px;
top:71px;
width:192px;
height:39px;
z-index:12;
}
.textarea-style{
width:89px;
height:14px;
font-size:10px;
border:hidden;
font-family:Verdana, Arial, Helvetica, sans-serif;
max-width:89px;
max-height:14px;
}
.form-style{
width:89px;
height:14px;
font-size:10px;
border:hidden;
max-width:89px;
max-height:14px;
}
#apDiv6 {
position:absolute;
left:597px;
top:284px;
width:99px;
height:20px;
z-index:14;
}
-->
</style>
</head>
<body>
<!--start of wrapper-->
<div id="wrapper">
<div id="apDiv1"></div>
<div class="style1" id="apDiv3"><span class="style2"><a href="index.php">??????</a> | <a href="index.php?page=new">N??</a> | <a href="index.php?page=scapes">?????</a> | <a href="index.php?page=waterscapes">??????? ?????</a> | <a href="index.php?page=monuments">???????</a> | <a href="index.php?page=prints">??????????</a> | <a href="index.php?page=contact">???????????</a></span></div>
<div id="apDiv2"><img src="images/top-banner-1.png" width="708" height="163" /></div>
<div id="apDiv4"><img src="images/top-background.jpg" width="708" height="62" /></div>
<div id="apDiv6">
<form action="" method="post" name="form1" class="form-style" id="form1">
<input name="textfield2" type="text" class="textarea-style" id="textfield2" />
</form></div>
<!--end of wrapper-->
</div>
<script type="text/javascript" language="javascript" src="scripts/rollover.js"></script>
</body>
</html>Re: Form tag keeps pushing my textfield wherever it wants
Try to use Eric meyer's reset first,
http://meyerweb.com/eric/tools/css/reset/
and no styles of your own.
Then put back your current styles one by one and compare FF and IE. Then soon enough you'll find the problem. IE often pushes things around or expands elements.
Unrelated to your problem: you could also use more descendant selectors to style stuff. That way you don't need so many classes and id's. It also makes your css a lot more readable
http://meyerweb.com/eric/tools/css/reset/
and no styles of your own.
Then put back your current styles one by one and compare FF and IE. Then soon enough you'll find the problem. IE often pushes things around or expands elements.
Unrelated to your problem: you could also use more descendant selectors to style stuff. That way you don't need so many classes and id's. It also makes your css a lot more readable
Code: Select all
<!-- no need for #apDiv6 -->
<form action="" method="post" name="form1" id="form1">
<input name="textfield2" type="text" />
</form>
Code: Select all
#form1 {}
#form1 input {}
Re: Form tag keeps pushing my textfield wherever it wants
I know, blame me for being lazy and using Dreamweaver and in my turn I will blame Adobe's programmers for being lazy.Unrelated to your problem: you could also use more descendant selectors to style stuff. That way you don't need so many classes and id's. It also makes your css a lot more readable
I used that css and removed max-width and max-height, yet there is like 2-4 pixels more wide in Firefox, I can't figure out what this is. Is it some css rendering trait?

Code: Select all
.textarea-style{
width:89px;
height:14px;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin:0px none;
margin-left:0px none;
margin-top:0px none;
text-indent:none;
}Re: Form tag keeps pushing my textfield wherever it wants
If the difference is that small, I would not worry about it. Styling form controls in such a way that it looks the same in all browsers is hard if not impossible. See also
http://www.456bereastreet.com/archive/2 ... revisited/
Remember, your visitor is not going to open up multiple browsers to see if everything matches pixel-perfectly.
http://www.456bereastreet.com/archive/2 ... revisited/
Remember, your visitor is not going to open up multiple browsers to see if everything matches pixel-perfectly.
Re: Form tag keeps pushing my textfield wherever it wants
Obviously, but for some reason I personally have never thought of it that way - good point.matthijs wrote:Remember, your visitor is not going to open up multiple browsers to see if everything matches pixel-perfectly.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Re: Form tag keeps pushing my textfield wherever it wants
But the client might!Remember, your visitor is not going to open up multiple browsers to see if everything matches pixel-perfectly.
Anyways, yes the difference is small. I also downloaded some css templates and I saw such problem existed there as well so I am going to blame the browser developers for not creating a standard they all follow the same way.
(problem solved then, I am going to change the title in something more relevant)