want to reduce the gap between 2 fields in my form

[nisha]

hi

i am learning css and i am not well versed with css codes
and have tried to code a form in my site using css code
which i got from some tutorials in some site.

Know the problem is that their too much of space between the 2
fields even if i don't give any padding or margin to the input class

Here is the link to my page :

:: Avenues

here look at the quick contact form at the left side of the page
also attaching an image how i want the block to look .
so u will have an idea of the error

Help and assistance from anybody will be appreciated.

[MickyO]

I can't see your css for
q_contact_top_inside

[nisha]

Originally Posted by MickyO

I can't see your css for
q_contact_top_inside

thanks for attempting to have a look into my page
Here i am adding the css for your conveniences

inside.css

.q_contact_inside {
    width:242px;
    height:226px;
    float: left;
    margin-top: 30px;
    overflow: visible;
}
#q_contact_top_inside {
    width:242px;
    height:8px;
    background-image: url(../images/img_qcontact_top.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    overflow: hidden;
}
#q_contact_main_inside {
    background-image: url(../images/img_qcontact_main_bg.jpg);
    width: 242px;
}
.q_contact_head_inside  {
    font-family: "Trebuchet MS";
    font-size: 16px;
    font-weight: bold;
    color: #862B05;
    background-image: url(../images/img_qcontact_head_icon.jpg);
    background-position: 8px bottom;
    vertical-align: bottom;
    height: 30px;
    width: 220px;
    background-repeat: no-repeat;
    margin-right: 8px;
    margin-left: 8px;
    margin-bottom: auto;
    margin-top: auto;
    padding-top: 5px;
}

#q_contact_bottom_inside  {
    background-image: url(../images/img_qcontact_bottom.jpg);
    background-repeat: no-repeat;
    height: 12px;
    width: 242px;
    background-position: left top;
}

#q_contact_list_inside  {
    width: 215px;
    margin-right: 12px;
    margin-left: 12px;
    height: 160px;
}

from here the code starts for the form

.label {
    width:150px;
    float:left;
    text-align:left;
    padding:2px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #DCC281;
}
.FormInputs {
    border:1px #F1D99A solid;
}
.FormButton {
    background-color:#ECE9D8;
    border:2px #F1D99A outset;
    width:100px;
    padding:3px;
}
.error {
    color:#FF0000;
    font-weight:700;
}
#form_content {
    padding:10px 15px 15px 15px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #DCC281;
}
#form_content h2 {
    color:#836000;
    font-size:12px;
}
.inputbox_newsletter
{
    width: 150px;
    border: 1px solid #E5A708;
    line-height: 20px;
    color: #D39F17;
    font-family: "Trebuchet MS";
    font-size: 11px;
    background-color: #FDF4DE;
    background-repeat: no-repeat;
    margin: 10em;
    text-align: justify;
    vertical-align: middle;
    text-indent: 5px;
 }
 .inputbox_browse
{
    width: 70%;
    border: 1px solid #FCE8CC;
    line-height: 20px;
    color: #AD5029;
    font-family: "Trebuchet MS";
    font-size: 11px;
    background-color: #F4D18D;
    background-repeat: no-repeat;
    margin: 1em;
    text-align: justify;
    vertical-align: middle;
    text-indent: 5px;
 }
 .FormButton1 {
    position: relative;
    bottom: 8px;
    top: 8px;
}

.FormButton2 {
    position: relative;
    bottom: 8px;
    top: 8px;
    left: 8px;
    right: 0px;
}
.FormButton3 {
    position: relative;
    bottom: 8px;
    left: 110px;
    right: 0px;
    visibility: visible;
}
.inputbox_qcontact
{
    width: 150px;
    border: 1px solid #C79942;
    line-height: 20px;
    color: #CA7327;
    font-family: "Trebuchet MS";
    font-size: 11px;
    background-color: #FEE9BD;
    background-repeat: no-repeat;
    margin: 1em;
    text-align: justify;
    vertical-align: middle;
    text-indent: 5px;
 }

just gave u the code for the block

and here is the html for the block

  
              <div class="q_contact_inside">
                 <div id="q_contact_top_inside"></div>
                    <div id="q_contact_main_inside">
                        <div class="q_contact_head_inside">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Quick Contact</div>
                           <div id="q_contact_list_inside">
                         
                  <form id=“loginForm” name=“loginForm” style="overflow:hidden; float:left">
                  <input name=name type=“text” class="inputbox_qcontact" id="name" value="Name"  onfocus="this.value='';" onblur="if (this.value=='') {this.value=' Name';}" />
                   <input name=email type=“text” class="inputbox_qcontact" id="email" value="Enter Email ID Here"  onfocus="this.value='';" onblur="if (this.value=='') {this.value=' Enter Email ID Here';}" />
                   <textarea name="Message" cols="20" class="inputbox_qcontact" id="Message" onFocus="this.value='';" onBlur="if (this.value=='') {this.value=' Message';}">Message</textarea>
                  <input type="image" src="images/img_qcontact_send_btn.jpg" name="Submit" value="Submit" alt="Submit" class="FormButton3">
                  </form>        
                 
                        
                      </div>

hope this will help u in giving me suggestions to fix my problems
in my code.

Also suggest me some good reference on making forms with css codes
or any tutorials on this topic.

Help appreciated.

[Marc]

Hi,

Input fields and textarea's have a standard margin applied to them so you just need to change this.
Add this to the botttom of your stylesheet and adjust the margin to your liking:

#q_contact_main_inside input, #q_contact_main_inside textarea{
       margin:0 0 3px 0;
}

[nisha]

hi,

Thanks for u r suggestions and i have achieved the what i wanted and placed the send cv tab on the banner in all the pages in my site.

but their is a small problem to it . In firefox it looks fine but in IE 6 & 7
their is a big gap between the banner and the header.

I want to make the look of the site same in all browsers and want to reduce the gap that is their in IE between the header and the banner at the top in all
the pages in my site.

Here is the link to my site :

:: Avenues

and in the clients page the whole right side coloumn moves down in IE.

Please check and suggest me how can i fix this error to make my site look
same in all the browsers including IE.

Help appreciated.