Results 1 to 13 of 13

Thread: CSS - Do tables support margins?

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,711

    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.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  2. #2
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    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.
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  3. #3
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

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

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  4. #4

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,711

    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.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  5. #5
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    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.

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  6. #6

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,711

    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.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  7. #7
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: CSS - Do tables support margins?

    Quote Originally Posted by dday9 View Post
    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.
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  8. #8
    PowerPoster Nightwalker83's Avatar
    Join Date
    Dec 2001
    Location
    Adelaide, Australia
    Posts
    13,344

    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

  9. #9

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,711

    Re: CSS - Do tables support margins?

    Quote Originally Posted by Nightwalker83 View Post
    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.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  10. #10
    New Member
    Join Date
    Apr 2013
    Posts
    2

    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

  11. #11
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,597

    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.
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  12. #12
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: CSS - Do tables support margins?

    Quote Originally Posted by sapator View Post
    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?
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  13. #13
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,597

    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
  •  



Click Here to Expand Forum to Full Width