Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts

    How do I get my margin fixed at 4px ?

    First : Thanks for helping out with my div centering
    ( its not quite right ...but nearly)

    My Question sounds a bit obvious but its not working

    I have this css:

    Code:
    .table01 {
      margin: 0px auto 0px auto;
      text-align: center;
      color: #000;
    	font-family: Arial; 
      font-size: 10pt;
    	font-weight: bold; 
    }
    
    .tab-cell-left {
      width: 50%;
      text-align: right;	
    }
    
    .tab-cell-right {
      width: 50%;
      text-align: left;	
    	background-color:  rgb(255, 255, 160);
    }
    
    .button {
      background-color:  #950000;
    	margin: 0px auto 0px auto;
    	padding: 4px 4px 4px 4px;
    }
    And this html:

    Code:
    <TABLE class="table01">
    <TR>
    <TD class="tab-cell-left">Enter Your First Name: </TD>
    <TD class="tab-cell-right"><INPUT name="first_name" size="28" type="text"></TD>
    </TR>
    
    <TR>
    <TD class="tab-cell-left">Your <span style="text-decoration: underline;">main</span> Email Address:</TD>
    <TD class="tab-cell-right"><INPUT name="email" size="28" type="text"></TD>
    </TR>
    
    <TR>
    <TD colspan="2">
    <TABLE>
    <TR>
    <TD class="button" ><P><INPUT style=
    "font-size: 14pt; font-family: Arial; letter-spacing: -1px; font-weight: bold; width: 360px; height: 40px;" value="Give Me Free Entry Now" type="submit"></P></TD>
    </TR>
    </TABLE>
    </TD>
    </TR>
    </TABLE>
    The padding on my button div is supposed to produce a nice 4px border around the button. I am using Moz FF and I get about 10 or 15px on the top and bottom.

    What am I doing wrong ?

    PS full code is at http://www.lets-get-started.net/index.php

    Thanks.
    Last edited by jeddi; 02-12-2008 at 06:58 AM.
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I don't know what you are doing wrong. I haven't the time to check now, but padding is inside the button, margin is outside the button. Margin effectively makes the button bigger. Padding does not.

    Normally one does not use tables for layout. CSS is for that.

    look here.

    http://www.hotdesign.com/seybold/

    Frank
    Last edited by effpeetee; 02-12-2008 at 07:37 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts
    I have converted what was a
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #4
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts
    Hi thanks for input

    I have converted what was a HORRIBLE table layout into what is now mainly css.

    Yes I still have this table for the form.

    From your own link - I quote

    "You can still use tables if you need to, just don't use so many of them"

    ANYWAYl I am trying to put this form into css but it'S NOT easy to make it look nice.

    I have this so far:

    CSS
    Code:
    .formfill {
      text-align: center;
      border-style: dashed;
    	border-width: 3px;
      border-collapse: collapse;
    	border-color: #9F0000;
    	background-color: #DEE4ED;
    	margin: 20px auto;
    	padding: 10px;
    	width: 520px;
    }
    
    .tab-cell-left {
      width: 50&#37;;
      text-align: right;	
    	margin: 10px auto;
    }
    
    .tab-cell-right {
      width: 50%;
      text-align: left;	
    	background-color:  rgb(255, 255, 160);
      margin: 10px auto;
    }
    
    .button {
      background-color:  #950000;
    	margin: 4px 4px 4px  4px;
    	}
    HTML:

    Code:
    <Div class="formfill">
    <H2> Claim Your <span class="big_let_01">FREE</span> Entry NOW!</H2>
    <P>
    <INPUT type="checkbox">
    <B>Fill out the form below</B> and
    you'll immediately receive <B>FREE</B> entry to our internet business coaching system.
    Put an end to the frustration. 
    <br>Start today: I am waiting to send you your free login details.
    </P>
    
    <form name="main_fm" action ='index.php' method = 'POST'>
    <span><input type='hidden' name = 'run_mn' value = 'yes' ></span>
    
    <span class="tab-cell-left">Enter Your First Name: </span>
    <span class="tab-cell-right"><INPUT name="first_name" size="28" type="text"></span>
    
    <br>
    
    <span class="tab-cell-left">Your <span style="text-decoration: underline;">main</span> Email Address:</span>
    <span class="tab-cell-right"><INPUT name="email" size="28" type="text"></span>
    
    <br>
    
    <span class="tab-cell-left">Give yourself a Password:</span>
    <span class="tab-cell-right"><INPUT name="pword" size="28" type="password"></span>
    
    <br>
    
    <span class="button" ><P><INPUT style=
    "font-size: 14pt; font-family: Arial; letter-spacing: -1px; font-weight: bold; width: 360px; height: 40px;" value="Give Me Free Entry Now" type="submit"></P></span>
    
    </FORM>
    </Div> <!-- END FORM FILL -->
    Despite my left and right aligns and trying with margins and padding I cant get the form elements lined up nicely

    Any ideas ?

    See the display at :http://www.lets-get-started.net/index.php

    Thanks
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #5
    Regular Coder
    Join Date
    Dec 2007
    Posts
    107
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Smile

    .tab-cell-left {
    width: 50%;
    text-align: right;
    margin: 10px auto;
    }

    Here why r u using margin:10px auto;

    Why auto ?

    Try to define some fixed parameter
    Programming & Webmaster Forum - AdSense Revenue Sharing forum

  • #6
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts
    OK table has gone and form looks all nice now

    Just one thing.

    For my big button I wanted to have a nice reddish border by putting a background color behind it.

    I tried to do it with a "span class" like this:
    Code:
    .button {
      background-color: #950000;
    	width: 370px;
    	height: 50px;
    	}
    and HTML:

    Code:
    <span class="button" >
    <INPUT style=
    "font-size: 14pt; font-family: Arial; letter-spacing: -1px; font-weight: bold; width: 360px; height: 40px;" value="Give Me Free Entry Now" type="submit">
    </span>
    You can see a bit of the color on the edges f the button - but it doesn't strecth all the way around it according to the dimensions that I gave.

    I've got something wrong !

    Also should I use an "index" number to push it behind the button ?

    Please help out if you can see the problem.

    Thanks.
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Because span is an inline element and it doesn't support width,height properties normally.
    Change
    Code:
    <INPUT style=
    "font-size: 14pt; font-family: Arial; letter-spacing: -1px; font-weight: bold; width: 360px; height: 40px;" value="Give Me Free Entry Now" type="submit">
    to
    Code:
    <input class="button" type="submit" value="Give Me Free Entry Now"/>
    and use a CSS like
    Code:
    input.button{
    font-size: 14pt; font-family: Arial; letter-spacing: -1px; font-weight: bold; width: 360px; height: 40px;
    border:1px outset #950000;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •