...

View Full Version : How do I get my margin fixed at 4px ?



jeddi
02-12-2008, 06:55 AM
First : Thanks for helping out with my div centering :thumbsup:
( its not quite right ...but nearly)

My Question sounds a bit obvious but its not working :confused:

I have this css:


.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:


<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.

effpeetee
02-12-2008, 07:34 AM
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

jeddi
02-12-2008, 09:03 AM
I have converted what was a

jeddi
02-12-2008, 09:31 AM
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


.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:



<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 ? :o

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

Thanks

technica
02-12-2008, 09:38 AM
.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

jeddi
02-12-2008, 10:22 AM
OK table has gone and form looks all nice now :thumbsup:

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:


.button {
background-color: #950000;
width: 370px;
height: 50px;
}

and HTML:


<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 ! :confused:

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

Please help out if you can see the problem.

Thanks.

abduraooft
02-12-2008, 10:33 AM
Because span is an inline element and it doesn't support width,height properties normally.
Change
<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

<input class="button" type="submit" value="Give Me Free Entry Now"/> and use a CSS like

input.button{
font-size: 14pt; font-family: Arial; letter-spacing: -1px; font-weight: bold; width: 360px; height: 40px;
border:1px outset #950000;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum