[solved] Form position and Textfield size css problem

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

[solved] Form position and Textfield size css problem

Post by Sindarin »

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.
Last edited by Sindarin on Tue Mar 04, 2008 2:30 am, edited 4 times in total.
User avatar
Zoxive
Forum Regular
Posts: 974
Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan

Re: Form tag keeps pushing my textfield wherever it wants

Post by Zoxive »

Thanks for telling us.

Just wanted to bring up the point, this thread is pointless without the html/css.
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Re: Form tag keeps pushing my textfield wherever it wants

Post by Sindarin »

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.

Image

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;
}
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: Form tag keeps pushing my textfield wherever it wants

Post by matthijs »

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%;
}
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Re: Form tag keeps pushing my textfield wherever it wants

Post by Sindarin »

You mean like this?

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>
It doesn't seem to work. The field is the same.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: Form tag keeps pushing my textfield wherever it wants

Post by matthijs »

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

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 {}
 
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Re: Form tag keeps pushing my textfield wherever it wants

Post by Sindarin »

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 know, blame me for being lazy and using Dreamweaver and in my turn I will blame Adobe's programmers for being lazy. :D


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?

Image

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;
}
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: Form tag keeps pushing my textfield wherever it wants

Post by matthijs »

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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Form tag keeps pushing my textfield wherever it wants

Post by pickle »

matthijs wrote:Remember, your visitor is not going to open up multiple browsers to see if everything matches pixel-perfectly.
Obviously, but for some reason I personally have never thought of it that way - good point.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Re: Form tag keeps pushing my textfield wherever it wants

Post by Sindarin »

Remember, your visitor is not going to open up multiple browsers to see if everything matches pixel-perfectly.
But the client might! :D

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. :roll:

(problem solved then, I am going to change the title in something more relevant)
Post Reply