-
Apr 2nd, 2013, 05:11 PM
#1
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.
-
Apr 2nd, 2013, 06:56 PM
#2
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/
Last edited by tr333; Apr 2nd, 2013 at 07:14 PM.
-
Apr 2nd, 2013, 07:20 PM
#3
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...
-
Apr 2nd, 2013, 07:36 PM
#4
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.
-
Apr 2nd, 2013, 07:48 PM
#5
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.
-
Apr 3rd, 2013, 10:55 AM
#6
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.
-
Apr 3rd, 2013, 06:03 PM
#7
Re: CSS - Do tables support margins?
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.
Last edited by tr333; Apr 3rd, 2013 at 06:06 PM.
-
Apr 4th, 2013, 04:20 AM
#8
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.
when you quote a post could you please do it via the "Reply With Quote" button or if it multiple post click the "''+" button then "Reply With Quote" button.
If this thread is finished with please mark it "Resolved" by selecting "Mark thread resolved" from the "Thread tools" drop-down menu.
https://get.cryptobrowser.site/30/4111672
-
Apr 4th, 2013, 10:05 AM
#9
Re: CSS - Do tables support margins?
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.
-
Apr 17th, 2013, 02:43 PM
#10
New Member
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
-
Apr 21st, 2013, 10:38 PM
#11
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.
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
Apr 22nd, 2013, 02:33 AM
#12
Re: CSS - Do tables support margins?
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?
-
Apr 22nd, 2013, 06:36 PM
#13
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.
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|