asked on

Table (with textboxes and textarea) displaced in Firefox, works fine with IE & Opera

Hello experts,

I just modified one XHTML template and added one form input fields within a table. It has a CSS Stylesheet. It works fine with IE 6/7 & Opera but it is tottally displaced to right in Firefox 2. Actually it is floating over some other textboxes and images. I tried many things.


<div id="body">
<p class="top"></p>

<div id="left">
<h2>Contact Me</h2>
<h3></h3>
<p class="event">
<form action="xxx.php" method="post"><table border=0><tr><td>
Name: </td><td align=left style="width: 239px"><input type="text" size=35 name="name"><span style="color: #ff6633">*</span></td></tr><tr><td>
Email Address: </td><td align=left style="width: 239px"><input type="text" size=35 name = "email"><span style="color: #ff6633">*</span></td></tr><tr><td>
Comments: </td><td align=left style="width: 239px">
<textarea name="comments" style="width: 231px; height: 125px"></textarea><span style="color: #ff6633">*</span></td></tr><tr><td>
</td><td style="width: 239px"><input type="submit" value="Submit"></td></tr></table>
</form>
<span style="color: #ff6633">*All fields are mandatory!</span></p>
</div>


<div id="right">
<h2>Search</h2>
<form id="search" action="#" method="post">
<input type="text" name="name" />
<input type="submit" name="go" value="" class="go" />
</form>
<img src="images/xxx.gif" alt="xxx" />
<p class="bottom">
<a href="#" class="xhtm"></a>
<a href="#" class="css"></a>
</p>
</div>


The table with input fielsds are displaying over the rightpan!!!

I will be appreciative if you could help me on this?

Thanks in advance,
Palz.

TheKyle

We'd have to see the CSS rules in your stylesheet to understand the problem that you're describing.

Also, you have a lot of inline styles that should be removed and put in your stylesheet instead.

PaulsonGeorge

ASKER

Hi,

Thank you very much for your timely response.

Here is the CSS.

/*------------------------------------------------left panel start---------------------*/
#left{
      width:414px;
      padding:0 0 0 29px;
      float:left;
}
#left h2{
      display:block;
      width:300px;
      font:bold 22px/38px Georgia, "Times New Roman", Times, serif;
      color:#694F10;
      background-color:#F8EFD3;
      float:left;
}
#left h3{
      display:block;
      width:354px;
      height:23px;
      padding:0 0 0 12px;
      margin:0 0 0 0;
      background:url(images/h3_bg.gif) 0 0 no-repeat #FCF8EA;
      font:bold 16px/23px "Trebuchet MS", Arial, Helvetica, sans-serif;
      color:#7C7A02;
      float:left;
}
#left p.text1{
      display:block;
      width:385px;
      font:normal 13px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
      color:#63562E;
      background-color:#F8EFD3;
      margin:0 0 0 0;
      padding:24px 0 0 0;
      float:left;
}
#left p.text2{
      display:block;
      width:385px;
      font:normal 13px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
      color:#63562E;
      background-color:#F8EFD3;
      padding:11px 0 19px 0;
      float:left;
}
#left p.text2 span{
      font:bold 13px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
      color:#9C4D00;
      background-color:#F8EFD3;
}
#left p.rm{
      display:block;
      width:370px;
      height:19px;
      margin:0 0 4px 0;
      font-size:0;
      background:url(images/read_more_div.gif) 0 0 repeat-x;
      float:left;
}
#left p.rm a{
      background:url(images/btn_read_more.gif) 0 1px no-repeat;
      width:58px;
      height:14px;
      padding:0;
      margin:0;
      float:right;
}
#left p.rm a:hover{
      background:url(images/btn_read_more_hover.gif) 0 1px no-repeat;
}
#left h3.date{
      display:block;
      background:url(images/date_bg.gif) 0 0 no-repeat #FCF8EA;
      width:125px;
      height:18px;
      padding:0 0 0 12px;
      margin:0 0 0 0;
      font:bold 11px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
      color:#7C7A02;
      float:left;
}
#left p.event{
      width:354px;
      background:url(images/event_bg.gif) 0 11px no-repeat #F8EFD3;
      padding:11px 0 0 20px;
      margin:0 0 15px 0;
      font:normal 12px/18px Arial, Helvetica, sans-serif;
      color:#63562E;
      float:left;
}
#left p.rm2{
      display:block;
      width:370px;
      height:14px;
      font-size:0;
      margin:0 0 4px 0;
      background:url(images/read_more_div.gif) 0 0 repeat-x;
      float:left;
}
#left p.rm2 a{
      background:url(images/btn_read_more.gif) 0 1px no-repeat;
      width:58px;
      height:14px;
      padding:0;
      margin:0;
      float:right;
}
#left p.rm2 a:hover{
      background:url(images/btn_read_more_hover.gif) 0 1px no-repeat;
}

/*------------------------------------------------left panel end---------------------*/

/*------------------------------------------------right panel start---------------------*/
#right{
      width:188px;
      padding:5px 0 55px 0;
      margin:0;
      float:left;
}
#right h2{
      display:block;
      background:url(images/serch_bg.gif) 0 0 no-repeat #ECE2C3;
      width:145px;
      height:27px;
      padding:0 0 0 9px;
      margin:0 0 5px 0;
      font:normal 18px/27px Georgia, "Times New Roman", Times, serif;
      color:#694F10;
      float:left;
}
#right form{
      width:154px;
      padding:0 0 35px 0;
      margin:0;
      float:left;
}
#right form p.domain{
      width:134px;
      height:15px;
      background:url(images/domain_name_bg.gif) 0 0 no-repeat #FCF8EA;
      padding:0 0 0 20px;
      margin:0 0 7px 0;
      font:normal 10px/15px "Trebuchet MS", Arial, Helvetica, sans-serif;
      color:#900C00;
      text-transform:uppercase;
      float:left;
}
#right form input{
      width:152px;
      height:22px;
      background-color:#fff;
      color:#000;
      border:#D0BE90 solid 1px;
      font:normal 11px/22px Arial, Helvetica, sans-serif;
      float:left;
}
#right form input.go{
      background:url(images/btn_go.gif) 0 0 no-repeat;
      width:27px;
      height:11px;
      border:none;
      cursor:pointer;
      float:right;
}
#right h2.scope{
      display:block;
      background:url(images/serch_bg.gif) 0 0 no-repeat #ECE2C3;
      width:145px;
      height:27px;
      padding:0 0 0 9px;
      margin:0 0 12px 0;
      font:normal 18px/27px Georgia, "Times New Roman", Times, serif;
      color:#694F10;
      float:left;
}
#right ul{
      width:140px;
      padding:0 0 28px 9px;
      margin:0 0 0 0;
      float:left;
      font-size:0;
}
#right ul li{
      padding:0;
      margin:0;
      float:left;
}
#right ul li a{
      display:block;
      width:125px;
      background:url(images/arrow1.gif) 0 5px no-repeat #F8EFD3;
      padding:0 0 0 15px;
      font:bold 11px/19px Arial, Helvetica, sans-serif;
      color:#BF0000;
      text-decoration:none;
      height:19px;
}
#right ul li a:hover{
      background:url(images/arrow1_hover.gif) 0 5px no-repeat #FEFAEC;
      color:#694F10;
}
#right img.banner{
      display:block;
      width:157px;
      height:146px;
      margin:0 0 15px 0;
      padding:0 0 0 3px;
      float:left;
}
#right p.bottom{
      display:block;
      background:url(images/bottom_bg.gif) 0 0 no-repeat;
      width:162px;
      height:14px;
      padding:0 0 0 22px;
      margin:0;
      float:left;
}
#right p.bottom a.xhtm{
      display:block;
      background:url(images/xhtml_bg.gif) 0 1px no-repeat;
      width:58px;
      height:14px;
      padding:0;
      margin:0 7px 0 0;
      font-size:0;
      float:left;
}
#right p.bottom a.xhtm:hover{
      background:url(images/xhtml_bg_hover.gif) 0 1px no-repeat;
}
#right p.bottom a.css{
      display:block;
      background:url(images/css_bg.gif) 0 1px no-repeat;
      width:58px;
      height:14px;
      padding:0;
      margin:0;
      font-size:0;
      float:left;
}
#right p.bottom a.css:hover{
      background:url(images/css_bg_hover.gif) 0 1px no-repeat;
}

/*------------------------------------------------right panel end---------------------*/

It would be highly appreciative if you could help me to solve this ASAP. I'm stuck with this, all the other things are almost done.

Warm Regards,
Palz.

TheKyle

I pasted all of your code into an html file, and the problem I'm running into now is that I'm not sure what your page is "supposed" to look like.

However, just by looking at what I have in front of me, it looks like you have an awful lot of floats in your code. That can very easily cause problems since floats are very temperamental.

Do you have some kind of template (in an image format) that you can link to that would give me an idea of what your page is supposed to look like?

PaulsonGeorge

ASKER

Hi,

Please check the page with Firefox, the input fields are mixed with the right panel. That is the problem.

Plesae check these:

Test.htm file contents...
---------------------------------------------------------------------------------------------------------
<head><LINK ID="skin" REL="stylesheet" TYPE="text/css" HREF="skin.css" /></head>

<div id="body">
<p class="top"></p>

<div id="left">
<h2>Contact Me</h2>
<h3></h3>
<p class="event">
<form action="xxx.php" method="post"><table border=0><tr><td>
Name: </td><td align=left style="width: 239px"><input type="text" size=35 name="name"><span style="color: #ff6633">*</span></td></tr><tr><td>
Email Address: </td><td align=left style="width: 239px"><input type="text" size=35 name = "email"><span style="color: #ff6633">*</span></td></tr><tr><td>
Comments: </td><td align=left style="width: 239px">
<textarea name="comments" style="width: 231px; height: 125px"></textarea><span style="color: #ff6633">*</span></td></tr><tr><td>
</td><td style="width: 239px"><input type="submit" value="Submit"></td></tr></table>
</form>
<span style="color: #ff6633">*All fields are mandatory!</span></p>
</div>


<div id="right">
<h2>Search</h2>
<form id="search" action="#" method="post">
<input type="text" name="name" />
<input type="submit" name="go" value="" class="go" />
</form>
<img src="images/xxx.gif" alt="xxx" />
<p class="bottom">
<a href="#" class="xhtm"></a>
<a href="#" class="css"></a>
</p>
</div>


--------------------------------------------------------------------------------------------------------

and here is the style sheet "skin.css" file contents...
--------------------------------------------------------------------------------------------------------

/*------------------------------------------------left panel start---------------------*/
#left{
width:414px;
padding:0 0 0 29px;
float:left;
}
#left h2{
display:block;
width:300px;
font:bold 22px/38px Georgia, "Times New Roman", Times, serif;
color:#694F10;
background-color:#F8EFD3;
float:left;
}
#left h3{
display:block;
width:354px;
height:23px;
padding:0 0 0 12px;
margin:0 0 0 0;
background:url(images/h3_bg.gif) 0 0 no-repeat #FCF8EA;
font:bold 16px/23px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#7C7A02;
float:left;
}
#left form input{
width:152px;
height:22px;
background-color:#fff;
color:#000;
border:#D0BE90 solid 1px;
font:normal 11px/22px Arial, Helvetica, sans-serif;
float:left;
}
#left form textarea{
background-color:#fff;
color:#000;
border:#D0BE90 solid 1px;
font:normal 11px/22px Arial, Helvetica, sans-serif;
float:left;
}
#left p.text1{
display:block;
width:385px;
font:normal 13px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#63562E;
background-color:#F8EFD3;
margin:0 0 0 0;
padding:24px 0 0 0;
float:left;
}
#left p.text2{
display:block;
width:385px;
font:normal 13px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#63562E;
background-color:#F8EFD3;
padding:11px 0 19px 0;
float:left;
}
#left p.text2 span{
font:bold 13px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#9C4D00;
background-color:#F8EFD3;
}
#left p.rm{
display:block;
width:370px;
height:19px;
margin:0 0 4px 0;
font-size:0;
background:url(images/read_more_div.gif) 0 0 repeat-x;
float:left;
}
#left p.rm a{
background:url(images/btn_read_more.gif) 0 1px no-repeat;
width:58px;
height:14px;
padding:0;
margin:0;
float:right;
}
#left p.rm a:hover{
background:url(images/btn_read_more_hover.gif) 0 1px no-repeat;
}
#left h3.date{
display:block;
background:url(images/date_bg.gif) 0 0 no-repeat #FCF8EA;
width:125px;
height:18px;
padding:0 0 0 12px;
margin:0 0 0 0;
font:bold 11px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#7C7A02;
float:left;
}
#left p.event{
width:354px;
background:url(images/event_bg.gif) 0 11px no-repeat #F8EFD3;
padding:11px 0 0 20px;
margin:0 0 15px 0;
font:normal 12px/18px Arial, Helvetica, sans-serif;
color:#63562E;
float:left;
}
#left p.rm2{
display:block;
width:370px;
height:14px;
font-size:0;
margin:0 0 4px 0;
background:url(images/read_more_div.gif) 0 0 repeat-x;
float:left;
}
#left p.rm2 a{
background:url(images/btn_read_more.gif) 0 1px no-repeat;
width:58px;
height:14px;
padding:0;
margin:0;
float:right;
}
#left p.rm2 a:hover{
background:url(images/btn_read_more_hover.gif) 0 1px no-repeat;
}

/*------------------------------------------------left panel end---------------------*/

/*------------------------------------------------right panel start---------------------*/
#right{
width:188px;
padding:5px 0 55px 0;
margin:0;
float:left;
}
#right h2{
display:block;
background:url(images/serch_bg.gif) 0 0 no-repeat #ECE2C3;
width:145px;
height:27px;
padding:0 0 0 9px;
margin:0 0 5px 0;
font:normal 18px/27px Georgia, "Times New Roman", Times, serif;
color:#694F10;
float:left;
}
#right form{
width:154px;
padding:0 0 35px 0;
margin:0;
float:left;
}
#right form p.domain{
width:134px;
height:15px;
background:url(images/domain_name_bg.gif) 0 0 no-repeat #FCF8EA;
padding:0 0 0 20px;
margin:0 0 7px 0;
font:normal 10px/15px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#900C00;
text-transform:uppercase;
float:left;
}
#right form input{
width:152px;
height:22px;
background-color:#fff;
color:#000;
border:#D0BE90 solid 1px;
font:normal 11px/22px Arial, Helvetica, sans-serif;
float:left;
}
#right form input.go{
background:url(images/btn_go.gif) 0 0 no-repeat;
width:27px;
height:11px;
border:none;
cursor:pointer;
float:right;
}
#right h2.scope{
display:block;
background:url(images/serch_bg.gif) 0 0 no-repeat #ECE2C3;
width:145px;
height:27px;
padding:0 0 0 9px;
margin:0 0 12px 0;
font:normal 18px/27px Georgia, "Times New Roman", Times, serif;
color:#694F10;
float:left;
}
#right ul{
width:140px;
padding:0 0 28px 9px;
margin:0 0 0 0;
float:left;
font-size:0;
}
#right ul li{
padding:0;
margin:0;
float:left;
}
#right ul li a{
display:block;
width:125px;
background:url(images/arrow1.gif) 0 5px no-repeat #F8EFD3;
padding:0 0 0 15px;
font:bold 11px/19px Arial, Helvetica, sans-serif;
color:#BF0000;
text-decoration:none;
height:19px;
}
#right ul li a:hover{
background:url(images/arrow1_hover.gif) 0 5px no-repeat #FEFAEC;
color:#694F10;
}
#right img.banner{
display:block;
width:157px;
height:146px;
margin:0 0 15px 0;
padding:0 0 0 3px;
float:left;
}
#right p.bottom{
display:block;
background:url(images/bottom_bg.gif) 0 0 no-repeat;
width:162px;
height:14px;
padding:0 0 0 22px;
margin:0;
float:left;
}
#right p.bottom a.xhtm{
display:block;
background:url(images/xhtml_bg.gif) 0 1px no-repeat;
width:58px;
height:14px;
padding:0;
margin:0 7px 0 0;
font-size:0;
float:left;
}
#right p.bottom a.xhtm:hover{
background:url(images/xhtml_bg_hover.gif) 0 1px no-repeat;
}
#right p.bottom a.css{
display:block;
background:url(images/css_bg.gif) 0 1px no-repeat;
width:58px;
height:14px;
padding:0;
margin:0;
font-size:0;
float:left;
}
#right p.bottom a.css:hover{
background:url(images/css_bg_hover.gif) 0 1px no-repeat;
}

/*------------------------------------------------right panel end-----------------

Open it in both IE and Firefox, you see the difference!!

Thanks,
Palz.

PaulsonGeorge

ASKER

hello experts please look into it... i am totally lost !!!! :(

ASKER CERTIFIED SOLUTION

TheKyle

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

PaulsonGeorge

ASKER

Thank you very much for your help. It will be highly appreciative if you could provide the code which worked for you.

Waiting for your reply.

Warm regards,
Pauls.

TheKyle

It's exactly the same code as you have above, but all of the floats are deleted except for the two that I referred to above...

#left{
width:414px;
padding:0 0 0 29px;
float:left;
}
#left h2{
display:block;
width:300px;
font:bold 22px/38px Georgia, "Times New Roman", Times, serif;
color:#694F10;
background-color:#F8EFD3;
}
#left h3{
display:block;
width:354px;
height:23px;
padding:0 0 0 12px;
margin:0 0 0 0;
background:url(images/h3_bg.gif) 0 0 no-repeat #FCF8EA;
font:bold 16px/23px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#7C7A02;
}
#left form input{
width:152px;
height:22px;
background-color:#fff;
color:#000;
border:#D0BE90 solid 1px;
font:normal 11px/22px Arial, Helvetica, sans-serif;
}
#left form textarea{
background-color:#fff;
color:#000;
border:#D0BE90 solid 1px;
font:normal 11px/22px Arial, Helvetica, sans-serif;
}
#left p.text1{
display:block;
width:385px;
font:normal 13px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#63562E;
background-color:#F8EFD3;
margin:0 0 0 0;
padding:24px 0 0 0;
}
#left p.text2{
display:block;
width:385px;
font:normal 13px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#63562E;
background-color:#F8EFD3;
padding:11px 0 19px 0;
}
#left p.text2 span{
font:bold 13px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#9C4D00;
background-color:#F8EFD3;
}
#left p.rm{
display:block;
width:370px;
height:19px;
margin:0 0 4px 0;
font-size:0;
background:url(images/read_more_div.gif) 0 0 repeat-x;
}
#left p.rm a{
background:url(images/btn_read_more.gif) 0 1px no-repeat;
width:58px;
height:14px;
padding:0;
margin:0;
}
#left p.rm a:hover{
background:url(images/btn_read_more_hover.gif) 0 1px no-repeat;
}
#left h3.date{
display:block;
background:url(images/date_bg.gif) 0 0 no-repeat #FCF8EA;
width:125px;
height:18px;
padding:0 0 0 12px;
margin:0 0 0 0;
font:bold 11px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#7C7A02;
}
#left p.event{
width:354px;
background:url(images/event_bg.gif) 0 11px no-repeat #F8EFD3;
padding:11px 0 0 20px;
margin:0 0 15px 0;
font:normal 12px/18px Arial, Helvetica, sans-serif;
color:#63562E;
}
#left p.rm2{
display:block;
width:370px;
height:14px;
font-size:0;
margin:0 0 4px 0;
background:url(images/read_more_div.gif) 0 0 repeat-x;
}
#left p.rm2 a{
background:url(images/btn_read_more.gif) 0 1px no-repeat;
width:58px;
height:14px;
padding:0;
margin:0;
}
#left p.rm2 a:hover{
background:url(images/btn_read_more_hover.gif) 0 1px no-repeat;
}

/*------------------------------------------------left panel end---------------------*/

/*------------------------------------------------right panel start---------------------*/
#right{
width:188px;
padding:5px 0 55px 0;
margin:0;
float:left;
}
#right h2{
display:block;
background:url(images/serch_bg.gif) 0 0 no-repeat #ECE2C3;
width:145px;
height:27px;
padding:0 0 0 9px;
margin:0 0 5px 0;
font:normal 18px/27px Georgia, "Times New Roman", Times, serif;
color:#694F10;
}
#right form{
width:154px;
padding:0 0 35px 0;
margin:0;
}
#right form p.domain{
width:134px;
height:15px;
background:url(images/domain_name_bg.gif) 0 0 no-repeat #FCF8EA;
padding:0 0 0 20px;
margin:0 0 7px 0;
font:normal 10px/15px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#900C00;
text-transform:uppercase;
}
#right form input{
width:152px;
height:22px;
background-color:#fff;
color:#000;
border:#D0BE90 solid 1px;
font:normal 11px/22px Arial, Helvetica, sans-serif;
}
#right form input.go{
background:url(images/btn_go.gif) 0 0 no-repeat;
width:27px;
height:11px;
border:none;
cursor:pointer;
}
#right h2.scope{
display:block;
background:url(images/serch_bg.gif) 0 0 no-repeat #ECE2C3;
width:145px;
height:27px;
padding:0 0 0 9px;
margin:0 0 12px 0;
font:normal 18px/27px Georgia, "Times New Roman", Times, serif;
color:#694F10;
}
#right ul{
width:140px;
padding:0 0 28px 9px;
margin:0 0 0 0;
font-size:0;
}
#right ul li{
padding:0;
margin:0;
}
#right ul li a{
display:block;
width:125px;
background:url(images/arrow1.gif) 0 5px no-repeat #F8EFD3;
padding:0 0 0 15px;
font:bold 11px/19px Arial, Helvetica, sans-serif;
color:#BF0000;
text-decoration:none;
height:19px;
}
#right ul li a:hover{
background:url(images/arrow1_hover.gif) 0 5px no-repeat #FEFAEC;
color:#694F10;
}
#right img.banner{
display:block;
width:157px;
height:146px;
margin:0 0 15px 0;
padding:0 0 0 3px;
}
#right p.bottom{
display:block;
background:url(images/bottom_bg.gif) 0 0 no-repeat;
width:162px;
height:14px;
padding:0 0 0 22px;
margin:0;
}
#right p.bottom a.xhtm{
display:block;
background:url(images/xhtml_bg.gif) 0 1px no-repeat;
width:58px;
height:14px;
padding:0;
margin:0 7px 0 0;
font-size:0;
}
#right p.bottom a.xhtm:hover{
background:url(images/xhtml_bg_hover.gif) 0 1px no-repeat;
}
#right p.bottom a.css{
display:block;
background:url(images/css_bg.gif) 0 1px no-repeat;
width:58px;
height:14px;
padding:0;
margin:0;
font-size:0;
}
#right p.bottom a.css:hover{
background:url(images/css_bg_hover.gif) 0 1px no-repeat;
}

TheKyle

Was there a particular reason why my solution was given a 'B'?

If my answer wasn't clear or didn't solve your problem, just let me know, and I can try to clarify some more. Thanks!

Table (with textboxes and textarea) displaced in Firefox, works fine with IE &amp; Opera

Table (with textboxes and textarea) displaced in Firefox, works fine with IE & Opera