Page 1 of 1

Weird Stuff with FF

Posted: Sun Jul 31, 2005 5:20 am
by Ree
i'm having a weird problem with my form. when you load it, it looks fine, but when you click the button it gets distorted. i have never seen this before. maybe you have had this kind of problem before?

you can copy the whole code for easy checking.

Code: Select all

<!DOCTYPE HTML PUBLIC &quote;-//W3C//DTD HTML 4.01//EN&quote; &quote;http://www.w3.org/TR/html4/strict.dtd&quote;>
<html>
<head>
<meta http-equiv=&quote;Content-Type&quote; content=&quote;text/html; charset=windows-1257&quote;>
<title>Administrative Interface</title>
<style>

html
{
  margin: 0;
  width: 100%;
  height: 100%;
}

body
{ 
  background-color: #E6E6E6;
  font-family: verdana;
  font-size: 1em;
  display: table;
  color: #000000;
  margin: 0;
  width: 100%;
  height: 100%;
}

input, textarea
{
  border: 1px solid #BCD8DE;
  background-color: #ffffff; 
  font-family: courier;
  font-size: 1.0em;
}

.dark_bg
{
  border: 1px solid #BCD8DE;
  background-color: #D0E3E8;
}

#container
{
  display: table-cell;
  vertical-align: middle;
  font-size: 0.7em;
}

#form_container
{
  display: table;
  margin: 0 auto;
}

#f_button
{
  float: right;
  text-align: center;
  width: 20em;
}

.f_label
{
  float: right;
}

.f_el
{
  float: right;
  text-align: left;
  width: 20.25em;
}

.clear_float
{
  clear: right;
}

.head_f
{
  height: 1.2em;
  width: 20em;
}

.body_f
{ 
  width: 20em;
  height: 7.2em;
  overflow: hidden;
}

#submit_b
{
  font-family: verdana;
  font-size: 1em;
  border: 1px solid #BCD8DE;
  background-color: #ffffff;
}

</style>
</head>
<body>

<div id=&quote;container&quote;>
  <div id=&quote;form_container&quote; class=&quote;dark_bg&quote;>
    <form method=&quote;post&quote; action=&quote;../func/insert.php?do=add_news&quote;>
      <span class=&quote;f_el&quote;><input class=&quote;head_f&quote; type=&quote;text&quote; name=&quote;head&quote;></span>
      <span class=&quote;f_label&quote;>Headline:</span><br class=&quote;clear_float&quote;>
      <span class=&quote;f_el&quote;><textarea class=&quote;body_f&quote; name=&quote;body&quote; rows=&quote;6&quote; cols=&quote;33&quote;></textarea></span>
      <span class=&quote;f_label&quote;>Body:</span><br class=&quote;clear_float&quote;>
      <span id=&quote;f_button&quote;><input id=&quote;submit_b&quote; type=&quote;submit&quote; value=&quote;Submit&quote;></span>
    </form>
  </div>
</div>

</body>
</html>

Posted: Sun Jul 31, 2005 6:08 am
by anjanesh
Im not good in CSS but this happened to me once before. I used tables though.

Click on the Submit button without releasing the mouse button - just press on the button - you'll see it happens at that time. When you pressed the mouse button over the button, everything gets misalgined. For some reason, when pushing the button some extra space is required so it adjusts itself. In my prev page I just increased the size of some table and all this misalignment vanished.

Posted: Sun Jul 31, 2005 10:11 am
by Ree
i really can't find what is wrong here...

Posted: Sun Jul 31, 2005 10:33 am
by charp
I think the problem is that both classes f_label and f_el are float right. Change f_label to float left. It worked for me.

FYI, none of the form shows up at all in Safari. All I get is the gray background in an otherwise empty page. Not sure why, but if I figure it out, I'll post again.

Update:

In Safari, the culprit seems to be the display property in #form_container. If I remove it or change it, I can see the input form. Unfortunately, it wrecks your layout. I'm not experienced with the table/table-cell values for the display property, so I can't say why this happens or how to fix it. Hopefully, knowing where the issue lies will be helpful.

Posted: Sun Jul 31, 2005 10:45 am
by Ree
well, both f_el and f_label must be floated right. otherwise the f_label doesn't align properly with input fields.

it's all fine until i press the button. there must be a very simple solution here, i just can't think of any...

EDIT: the form_container is only used to center horizontally the form (since the width of it is unknown).

EDIT2: wooh, just checked the page with validator. tons of errors :?

EDIT3: i have fixed all the errors, but still that bug remains...

Code: Select all

<!DOCTYPE HTML PUBLIC &quote;-//W3C//DTD HTML 4.01//EN&quote; &quote;http://www.w3.org/TR/html4/strict.dtd&quote;>
<html>
<head>
<meta http-equiv=&quote;Content-Type&quote; content=&quote;text/html; charset=windows-1257&quote;>
<title>Administrative Interface</title>
<style type=&quote;text/css&quote;>

html
{
  margin: 0;
  width: 100%;
  height: 100%;
}

body
{ 
  background-color: #E6E6E6;
  font-family: verdana;
  font-size: 1em;
  display: table;
  color: #000000;
  margin: 0;
  width: 100%;
  height: 100%;
}

input, textarea
{
  border: 1px solid #BCD8DE;
  background-color: #ffffff; 
  font-family: courier;
  font-size: 1.0em;
}

.dark_bg
{
  border: 1px solid #BCD8DE;
  background-color: #D0E3E8;
}

#container
{
  display: table-cell;
  vertical-align: middle;
  font-size: 0.7em;
}

#form_container
{
  display: table;
  margin: 0 auto;
}

#f_button
{
  float: right;
  text-align: center;
  width: 20em;
}

.f_label
{
  float: right;
}

.f_el
{
  float: right;
  text-align: left;
  width: 20.25em;
}

.clear_float
{
  clear: right;
}

.head_f
{
  height: 1.2em;
  width: 20em;
}

.body_f
{ 
  width: 20em;
  height: 7.2em;
  overflow: hidden;
}

#submit_b
{
  font-family: verdana;
  font-size: 1em;
  border: 1px solid #BCD8DE;
  background-color: #ffffff;
}

</style>
</head>
<body>

<div id=&quote;container&quote;>
  <div id=&quote;form_container&quote; class=&quote;dark_bg&quote;>
    <form method=&quote;post&quote; action=&quote;../func/insert.php?do=add_news&quote;>
      <div class=&quote;f_el&quote;><input class=&quote;head_f&quote; type=&quote;text&quote; name=&quote;head&quote;></div>
      <div class=&quote;f_label&quote;>Headline:</div><div class=&quote;clear_float&quote;></div>
      <div class=&quote;f_el&quote;><textarea class=&quote;body_f&quote; name=&quote;body&quote; rows=&quote;6&quote; cols=&quote;31&quote;></textarea></div>
      <div class=&quote;f_label&quote;>Body:</div><div class=&quote;clear_float&quote;></div>
      <div id=&quote;f_button&quote;><input id=&quote;submit_b&quote; type=&quote;submit&quote; value=&quote;Submit&quote;></div>
    </form>
  </div>
</div>

</body>
</html>

Posted: Sun Jul 31, 2005 11:06 am
by charp
Changing the float to left on f_label does fix the problem of the entire form morphing on you. I just checked it in FF on both Mac and PC. The alignment you want is to have the text of the f_label butt up against the input forms. Correct?

To solve this, you could give f_label a width wide enough to accomodate both the 'headline' and 'body' labels and also apply text-align: right; to that class.

Try this:

Code: Select all

.f_label
{
  float: left;
  width: 10em;
  text-align: right;
}

Posted: Sun Jul 31, 2005 11:19 am
by Ree
well yes, charp, i have this solution in mind, but i wouldn't like to use it unless there's totally no way otherwise. the thing is, i wanted the f_label have no fixed width so that i could create copies of the existing form by adding new fields and changing 'labels', without worrying about f_label widths. actually it's not that much of a work to set widths every time, just wanted to have as little work to do when copy-pasting as possible. :)

Posted: Sun Jul 31, 2005 11:47 am
by charp
Yes, it is wise to make the effort ahead of time to make your life easier down the road. Unfortunately, I am out of suggestions. I did revert back to your original CSS and then removed all of the display properties to see what happens. The layout is ruined, but the form does not morph when clicking on the submit button. So, my last offer of help is that the problem may lie in the display property values. Like I said earlier, I'm not familiar with the use of table and table-cell values for the display property. Perhaps someone more savvy in the ways of CSS can help out.

Good luck.