Small CSS issue, if someone can please help.

Discussion in 'Programming' started by Talker, Nov 4, 2009.

0
  1. #1
    Hi there,

    I have a small CSS issue.

    Please open this site in Firefox and you would find it perfect.
    Then try opening it in IE and Chrome.. you would see the login form out of position.. can someone help me fix this?

    HTML on the index page is:

     <p class="rp_box0 flt">
       <span class="rp_spa flt" style="color: #00AB60"><form action="orderstats.php" method="post" enctype="multipart/form-data" name="form1" target="_self" id="form1">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="40%">OrderID</td>
    <td width="5%">&nbsp;</td>
    <td width="55%"> <input name="orderid" type="text" id="orderid" size="8" maxlength="8" class="rp_field"/></td>
  </tr>
  <tr>
    <td width="40%">Pass/ PIN</td>
    <td width="5%">&nbsp;</td>
    <td width="55%"><input name="pincode" type="password" id="pincode" size="4" maxlength="4"  class="rp_field" /></td>
  </tr>
</table><input type="image" name="imageField" id="imageField" src="images/rp_but0.jpg" class="rp_but0 flt"/>
</form></span>
         </p>
    HTML:

    And the CSS used is:

    
.rp_box0
{
 background:url(../images/rp_box0.jpg) no-repeat;
 width:206px;
 height:107px;
 margin:-82px 0px 0px 0px;
 position:relative;
} 
.rp_spa
{
 font:11px/15px Arial, Helvetica, sans-serif;
 color:#3BB8D2;
 width:115px;
 margin:32px 0px 0px 49px;
} 
.flt
{
 float:left;
 display:inline;
}
.rp_but0
{
 margin:3px 0px 0px 0px;
}
.rp_field
{
	height:10px;
	font:10px/15px Arial, Helvetica, sans-serif;

}
    Code (markup):
    I'd appreciate any help you can provide..
     
    Talker, Nov 4, 2009 IP
  2. alfieindesigns

    alfieindesigns Well-Known Member

    Messages:
    128
    Likes Received:
    5
    Best Answers:
    2
    Trophy Points:
    130
    #2
    Try to change the width of your right panel, from width:231px to 210px.
    Hope this will work well lol. ~_^

    Thank and God bless always!

    Best regards,
    alfieindesigns
    www.alfieindesigns.com
     
    alfieindesigns, Nov 4, 2009 IP
  3. Talker

    Talker Notable Member

    Messages:
    2,795
    Likes Received:
    108
    Best Answers:
    0
    Trophy Points:
    210
    #3
    Thanks for the instructions. i followed them however it made no differnce.

    I tried one thing to see if it makes any difference and it did. I removed the FORM tag and replaced it with some text, i was amazed to see that the view came to normal on all three browsers.

    I just removed this part:
    <form action="orderstats.php" method="post" enctype="multipart/form-data" name="form1" target="_self" id="form1">
 <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin:0px">
  <tr>
    <td width="40%">OrderID</td>
    <td width="5%">&nbsp;</td>
    <td width="55%"> <input name="orderid" type="text" id="orderid" size="8" maxlength="8" class="rp_field"/></td>
  </tr>
  <tr>
    <td width="40%">Pass/ PIN</td>
    <td width="5%">&nbsp;</td>
    <td width="55%"><input name="pincode" type="password" id="pincode" size="4" maxlength="4"  class="rp_field" /></td>
  </tr>
</table><input type="image" name="imageField" id="imageField" src="images/rp_but0.jpg" class="rp_but0 flt"/ >
</form>
    HTML:
    So now we know that the issue lies with the form tag.
    I have also tried to use the style="margin:0px" on the form tag but that did not work..

    Any help is highly appreciated...
     
    Talker, Nov 4, 2009 IP