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 6 of 6

Thread: Formation?

  1. #1
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts

    Formation?

    Is there a way to keep the default appearance of form elements like text input fields, pulldown menus and especially "submit" buttons while overriding margins, padding and borders for the rest of the page?

    Page in question (the form is below the first table): http://www.imageworksdisplay.com/tobacco/index.php

    I add this to the beginning of every style sheet:

    Code:
    * { 
    	margin:0px; 
    	padding:0px; 
    	border:0px; 
    }
    which just gets everything and every browser (for the most part) on an even playing field. However, because the values are inherited it also wipes out the appearance of form elements. I happen to like the way the default form buttons look, among other things.

    Is there a way to restore the defaults to the form by itself? I'd rather not go through the style sheet and nix the margins, padding and border on everything individually. Ideas?

    THANKS!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Add some classes to your elements like
    Code:
    <input type="text" class="text" />
    
    <input type="text" class="button" />
    
    <select  class="text" >
    </select>
    Then applly a CSS like
    Code:
    input.button{
    border-width:1px;
    border-color: #777 #000 #000 #777;
    padding:2px;
    }
    input.text, textarea
    {
    border-width:1px;
    border-color: #000 #777 #777 #000;
    padding:2px;
    }
    Last edited by abduraooft; 05-14-2008 at 03:53 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Nevermind. I just replaced the * with a list of all the elements (except those related to the form) that I have on the page:

    Code:
    html, body, div, p, h1, h2, h3, h4, img, table, tr, td { 
    	margin:0px; 
    	padding:0px; 
    	border:0px; 
    }
    Bingo. Not a whole lot when it comes down to it.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Dan Schulz had posted a detailed CSS on this
    http://codingforums.com/664410-post.html
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    BoldUlysses (05-14-2008)

  • #5
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    That's great. I appreciate the link.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    There is also the one by Eric Meyers.
    http://meyerweb.com/eric/thoughts/20...eset-reloaded/
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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