CSS - Do tables support margins?
I'm having trouble creating margins for my table. My html looks like this:
Code:
<!doctype html>
<html>
<head>
<Title>EMP - Login</title>
<link rel="stylesheet" type="text/css" href="login.css">
</head>
<body>
<table id="user_and_pass">
<tr>
<td id="tbl_user"><b>Username:</b></td>
</tr>
<tr>
<td id="tbl_user_txt"><input type="text", name="txt_user"></td>
</tr>
<tr>
<td id="tbl_pass"><b>Password:</b></td>
</tr>
<tr>
<td id="tbl_pass_txt"><input type="text", name="txt_pass"></td>
</tr>
<tr>
<td id="tbl_casing">Passwords are case sensative.</td>
</tr>
<tr>
<td id="tbl_forgot"><a href="">Forgot your password?</a>
<td id="tbl_btn_login"><button name="btn_login">Login</button></td>
</tr>
</table>
<table id="new_user">
<tr>
<td id="tbl_new_acc">Don't have an account?</td>
</tr>
<tr>
<td id="tbl_new_acc_btn"><button name="btn_new_account">Get one now</button></td>
</tr>
<tr>
<td id="tbl_easy">It's easy!</td>
</tr>
</table>
</html>
And my CSS looks like this:
Code:
table #tbl_user_txt, #tbl_pass_txt
{
margin-bottom:15px;
}
table #tbl_casing
{
color:grey;
font-size:11px;
}
But the user/pass textboxs don't have space below them as I expect they should. So it leads me to believe that margins are not supported in tables, or I'm doing it wrong.
Re: CSS - Do tables support margins?
First thing, SGML and XML don't use commas in any tags. Tag attributes are space-separated. Get rid of the commas.
EDIT: Check out the fiddle here: http://jsfiddle.net/PvpCa/2/
Re: CSS - Do tables support margins?
Just a thought here - why not put your css on a CLASS and not an ID - and then put just that CLASS identifier on the element you want styled.
Learn about styling before trying to conquer cascading...
Re: CSS - Do tables support margins?
Are classes similar to classes in vb.net? To be honest, I'm just trying to learn html and css on my own and I'm finding it so much harder than when I taught myself vb.net.
Re: CSS - Do tables support margins?
Nope - ID and CLASS are attributes of elements.
ID's are special in that an ID can only ever appear on a single element in the DOM. If you put it on two elements you get unpredictable results.
#xyz is an ID identifier.
CLASS identifiers do not have that restriction.
So - look here
Code:
<div id="dlgLogin">
<p><span class="acs-span-medium">Username </span><input type="text" id="acs-username" class="acs-edit-large-text"/></p>
<p><span class="acs-span-medium">Password </span><input type="password" id="acs-password" class="acs-edit-large-text"/></p>
<p><label id="acs-login-error"></label></p>
<p><span id="acs-passwordnewlabel" class="acs-span-xlarge">New Password </span><input type="password" id="acs-passwordnew" class="acs-edit-large-text"/></p>
<p><span id="acs-passwordverifylabel" class="acs-span-xlarge">Verify Password </span><input type="password" id="acs-passwordverify" class="acs-edit-large-text"/></p>
</div>
The CLASS CSS is put in the CSS with a leading "."
Code:
.acs-span-medium
{
display: inline-block;
width: 60px;
text-align: right;
}
The CSS you are using connects with ID's - those are #-prefix identifiers.
And you are putting "two" identifiers - the ID and a "type" - now you are trying to connect with all the something's within something.
Get a TD cell working with a simple class. Then try to apply that class with cascade to all the elements of the table.
Granted - CSS is meant to allow you to syntactically attack a group of elements in the DOM-tree with a single cascading class - you need to see the styling work first...
Do you use FIREBUG to DEBUG the web work you are doing? It's got really nice css/styling debugging features.
Re: CSS - Do tables support margins?
I didn't know that you could debug html/css. I've been using notepad++ and running the pages in IE.
Re: CSS - Do tables support margins?
Quote:
Originally Posted by
dday9
I didn't know that you could debug html/css. I've been using notepad++ and running the pages in IE.
Due to the dodgy standards support in old versions of IE, the recommended practice has become to develop/test in Firefox, Chrome or Opera, and then test in IE to fix up any IE-specific problems.
Firefox has some built-in developer tools as well as the highly-regarded firebug extension. Firefox also has a whole host of other web development extensions.
Google Chrome has the Chrome Developer Tools built-in to the browser. Safari also has similar built-in tools due to them both being WebKit browsers. Note that Opera has also recently said it would switch from Presto to WebKit.
Opera also has its own built-in Dragonfly developer tools.
Re: CSS - Do tables support margins?
Why are you still using tables if you are going to use CSS? You can create the same layout without CSS without needing to use tables.
Re: CSS - Do tables support margins?
Quote:
Originally Posted by
Nightwalker83
Why are you still using tables if you are going to use CSS? You can create the same layout without CSS without needing to use tables.
Like I've said, I'm trying to learn HTML/CSS and this is just the way I thought of. If there are other ways, I'll try those too.
Re: CSS - Do tables support margins?
put style in any tag ,it works fine with td and tr but not sure about table ,but i think it wokring in td and tr will give you the desired effects
Re: CSS - Do tables support margins?
Still using tables if i want to center my left and top because good ol' Iexplorer will start dancing things around if i use a zoom.
If there is a better and standard way to center table like items with div's i would like to know.
Re: CSS - Do tables support margins?
Quote:
Originally Posted by
sapator
Still using tables if i want to center my left and top because good ol' Iexplorer will start dancing things around if i use a zoom.
If there is a better and standard way to center table like items with div's i would like to know.
Flexbox is what you're looking for?
Re: CSS - Do tables support margins?
Interesting but i do not wish to imagine what destructive force this will have to, let's say IE7 that is the ultimate zoom killer and i see no support for mobile, iphone safari leviathan is a killer too.
Interesting however for a full html5 page.
