Weird space in page

[sircharlo]

Hey, gang !Right off, I want to thank you for looking.Now, something weird happened with my page.Now, why is the space different in two browsers, and how do I stop it (especially FF) ?!Ideally, I would like the space on top (and, for that matter, on the bottom,) to be the same as on the sides.What am I doing wrong ?Thanks !Check out this FF screenshot of the top of my page:And this IE screenshot:Here is my HTML:

body  {  background-color: #e0e5e6;  margin-top:5px;  margin-bottom:10px;  color:#666666;  font-family: "abadi mt condensed light", "trebuchet ms", helvetica, tahoma, sans-serif;  }h1  {  font-size: 1.2em;  font-weight: bold;  text-align: center;  margin-top:5px;  margin-bottom:15px;  padding:4px;  line-height: 16px;  }h2  {  font-size: .95em;  font-weight: bold;  font-variant: small-caps;  margin-bottom: 0;  }  p  {  text-align: justify;  font-size: 1em;  }           .trucs  {  font-family: vivaldi, "trebuchet ms", helvetica, tahoma, sans-serif;  }   h4  {  text-decoration: underline;  font-weight:normal;  font-size:1em;  }         .lst  {  font-size: .95em;  font-weight: bold;  font-variant: small-caps;  margin-bottom: 0;  margin-top: 1em;  }      p.fl  {  margin: 0;  }p.f  {  margin-top: 0;  }p.l  {  margin-bottom:0  }p.i  {  font-style: italic;  } h3  {  font-style: italic;  margin: 0;  text-align: center;  font-size:1em;  font-weight:normal;  }                   p.avis  {  font-size: .9em;  }p.sc  {  font-weight: bold;  font-variant: small-caps;  margin: 0;  }      p.impo  {  font-weight: bold;  }.top  {  float:left;  vertical-align: top;  text-align: left;  font-size: .9em;  }       .ask  {  text-align: right;  font-size: .9em;  color: #f751b9;  }              a.pink  {  color: #f751b9;  float: right;  text-align: right;  }.bp  {  color:#318d9f;  }  a.mise  {  font-size: .9em;  font-weight: bold;  font-variant: small-caps;  margin-top: 1em;  margin-bottom: 0;  }#center ul  {  font-size: 1em;  text-align: justify;  }    #center li.no  {  list-style-type: none  }    div.prec  {  padding: 20px;  background-color: #fbf7e3;  font-size: 1em;  text-align: justify;  }          div.trait  {  border-style: solid;  border-width: 2px;  border-color: black;  background-color: #E9F4E0;  padding: 20px;  font-size: 1em;  text-align: justify;  }           div.nat  {  width: 85%;  }.note  {  background-color: #f1fafb;  padding: 20px;  font-size: 1em;  text-align: justify;  }          div.mise  {  background-color: #f5f1ed;  padding: 20px;  font-size: 1em;  text-align: justify;  }div.form  {  background-color: #faf8f4;  padding: 20px;  font-size: 1em;  border: 3px outset #f1fafb;  }  form div {    margin: 0 0 0.5ex 0;    clear:left;}label {    width: 6em;    display: block;    float: left;    /*font-weight: bold;*/    vertical-align: middle;    font-family: "abadi mt condensed light", "trebuchet ms", helvetica, tahoma, sans-serif;    /*padding-right: 1.5em;*/}label.sexe  {  float:none;  width:5px;  display:inline;  }textarea,input  {  font-family: "abadi mt condensed light", "trebuchet ms", helvetica, tahoma, sans-serif;  font-size: 1em;  }textarea  {  width:70%;  overflow:auto;  height:90px;  wrap:hard;  }  input  {  width:10em;  margin-bottom:2px;  }  input.bouton  {  width:auto;  margin-top:10px;  margin-left:92px;  margin-right:0px;  background-color:#f1fafb;  border-color:#318d9f;  }input.deux  {  margin-left:5px;  }  input.sexe  {  width:auto;  display:inline;  }  .labelb  {  vertical-align: top;  width:auto;  }.item  {  width:100%;  height:90px;  }    .input  {  width:75%;  display:inline;  }  #Age  {  width:1.5em;  }  .send  {  padding-top:10px;  }    A:link  {  COLOR: #C86000; text-decoration: none;  }A:visited  {  COLOR: #C86000; text-decoration: none  }A:active  {  COLOR: #C86000; text-decoration: none  }A:hover  {  COLOR: #C86000; text-decoration: underline  }#page_wrapper  {  margin-left: auto;   margin-right: auto;  width: 760px;  text-align: justify;  background: #FFFFFF url('images/content_bg.gif') top left repeat-y;  border-bottom: 1px solid #425227;  }#page_wrap  {  margin-left: auto;   margin-right: auto;  width: 760px;  text-align: justify;  border-bottom: 1px solid black;  background: #FFFFFF;  }#page_header  {  height: 140px;  background: #FFFFFF url('images/header.gif') bottom left no-repeat;  clear: both;  }#menu_bar  {  margin:0px;  padding:0px;  border:0px dashed #cccccc;  height:31px;  clear:both;  background: #FFFFFF url('images/menu_bg.gif') bottom left no-repeat;  }#menu_home  {  margin:0px;  padding:0px;  border:0px dashed #cccccc;  height:31px;  clear:both;  }#content_wrapper  {  margin-top:10px;  margin-bottom:10px;  margin-left:10px;  margin-right:10px;        border:0px dashed #FFFFFF;    }#center  {  margin-top:10px;  margin-left:auto;  margin-right:auto;  width:400px;  border:0px dashed #cccccc;  }/*#center h3  {  margin-top:0px;  margin-bottom:5px;  font-family: "abadi mt condensed light", "trebuchet ms", helvetica, tahoma, sans-serif;  font-size: 11px;  color: #ffffff;  padding:4px;  border: 1px solid #425227;  background-color: #889599;  }*/#left_side  {  float: left;  width:140px;  border:0px dashed #cccccc;  }#left_side h3  {  margin-top:0px;  margin-bottom:5px;  font-size: 0.95em;  color: #ffffff;  padding:4px;  border: 1px solid #425227;  background-color: #889599;  }#left_side p  {  margin-top:5px;margin-bottom:15px;  padding:4px;  font-family: "abadi mt condensed light", "trebuchet ms", helvetica, tahoma, sans-serif;  font-size: 11px;  line-height: 16px;  color: #666666;  }#right_side  {  float: right;  width:140px;  border:0px dashed #cccccc;  }#right_side h3  {  margin-top:0px;  margin-bottom:5px;  font-family: "abadi mt condensed light", "trebuchet ms", helvetica, tahoma, sans-serif;  font-size: 11px;  color: #ffffff;  padding:4px;  border: 1px solid #425227;  background-color: #889599; }#right_side p  {  margin-top:5px;margin-bottom:15px;  padding:4px;  font-family: "abadi mt condensed light", "trebuchet ms", helvetica, tahoma, sans-serif;  font-size: 11px;  line-height: 16px;  color: #666666;  }#navcontainer ul  {  padding-left: 0;  margin-left: 0;  margin-top:0px;  background-color: #c85901;  background: url('images/bar.jpg') top right no-repeat;   color: White;  float: left;  width: 100%;  height:26px;  font-family: verdana, arial, helvetica, sans-serif;  font-size:12px;  font-weight:bold;  }#navcontainer ul li  {  display: inline;  }#navcontainer ul li a  {  padding-top: 5px;  padding-bottom: 7px;  padding-left:10px;  padding-right:10px;  background-color: transparent;  color: White;  font-variant: small-caps;  text-decoration: none;  float: left;  border-right: 1px solid black;  }#navcontainer ul li a:hover  {  background-color: #FFFFFF;  background: url('images/bar_bg_hover.gif') bottom left repeat-x;   color: #3E7B7B;  }#linklist  {  padding-left: 0;  margin-left: 0;  border-bottom: 1px solid #D1D9C4;  width: 140px;  }#linklist li  {  list-style: none;   margin: 0;  padding: 5px 0px 5px 5px;  line-height:20px;  border-top: 1px solid #D1D9C4;  /*font-family:verdana;*/  font-size:0.9em;  text-align: left;  }#linklist li a  {  text-decoration: none;  }.thumbnail_left  {  float:left;  margin-right:10px;  margin-bottom:5px;  border:0px;  }.thumbnail_right  {  float:right;  margin-left:10px;  margin-bottom:5px;  border:0px;  }

[Err]

What's up with all this code?

[email="@gmail.com"]@gmail.com[/email]"][email="@gmail.com"]

I took it off and it looks fine.

[Kingy]

At a very quick glance your: <input name="recipient" type="hidden" value="<a style="color: rgb(0, 102, 32); background-color: rgb(255, 249, 171);" class="linkification-ext" href="<a style="color: rgb(0, 102, 32); background-color: rgb(255, 249, 171);" class="linkification-ext" href="xxxxxx@gmail.com"]xxxxxx@gmail.com[/etc...is causing it because it's detecting the values in the main body but just not showing it.What are you trying to achieve with those tags anyway? >_>

[sircharlo]

Sorry, all those weird tags were caused by a FF extension that shouldn't have done that.

What are you trying to achieve with those tags anyway?

<input type="hidden" name="subject" value="Question ou message" /> <input name="redirect" type="hidden" value="../merci.html" /> <input type="hidden" name="missing_fields_redirect" value="../erreur.html)" /> <input name="required" type="hidden" value="Nom,Prenom,Sexe,Age,Email,Message" /> <input type="hidden" name="env_report" value="REMOTE_HOST,REMOTE_ADDR,REMOTE_USER,HTTP_USER_AGENT" /> <input name="recipient" type="hidden" value="someone@example.com" /> <input type="hidden" name="print_blank_fields" value="1" />

The php script I am using uses those hidden fields as configuration parameters.Can i stop them from taking up space ?

I took it off and it looks fine.

What browser are you using ?

[justsomeguy]

Hidden inputs don't take up space, they don't appear on the screen. A form usually has a margin though, but not a big one.

[sircharlo]

Hidden inputs don't take up space, they don't appear on the screen. A form usually has a margin though, but not a big one.

Then what's scrapping up my page in FF ?

[sircharlo]

After doing a little experimenting, I found that this piece of code caused all the space in FF. Why ?

form div { margin: 0 0 0.5ex 0; clear:left; }

Immediately when I removed clear:left, the space disappeared.Why is that ?