Weird Stuff with FF

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

Weird Stuff with FF

Post 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>
User avatar
anjanesh
DevNet Resident
Posts: 1679
Joined: Sat Dec 06, 2003 9:52 pm
Location: Mumbai, India

Post 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.
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

Post by Ree »

i really can't find what is wrong here...
User avatar
charp
Forum Commoner
Posts: 85
Joined: Sun Oct 26, 2003 3:00 pm
Location: Rancho Cucamonga, Calif. USA

Post 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.
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

Post 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>
Last edited by Ree on Sun Jul 31, 2005 11:12 am, edited 1 time in total.
User avatar
charp
Forum Commoner
Posts: 85
Joined: Sun Oct 26, 2003 3:00 pm
Location: Rancho Cucamonga, Calif. USA

Post 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;
}
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

Post 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. :)
User avatar
charp
Forum Commoner
Posts: 85
Joined: Sun Oct 26, 2003 3:00 pm
Location: Rancho Cucamonga, Calif. USA

Post 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.
Post Reply