Hey there! Sign in to join this conversationNew here? Join for free
    • Thread Starter
    Offline

    0
    ReputationRep:
    I've been stuck on this for a while now.

    I'm trying to edit a site and remove padding from tables. In the main style sheet, it says:

    Code:
    /* ========================== CSS Reset ========================== */
    * {
    	border: 0 none;	
    	font-family: Helvetica, Arial, sans-serif;
    	font-size: 100%;
    	font-style: inherit;
    	font-weight: inherit;
    	margin: 0;
    	outline: 0;
    	padding: 0;
    	vertical-align: baseline;
    }
    If I understand correctly, this sets the default style.

    So how do I override it in order to remove padding and vertical-alignment for tr, td and th?

    If anyone solves this I will be your best friend and rep you. Google isn't doing much for me but then again, I don't know the terminology so I might not be searching for the right thing.
    • Thread Starter
    Offline

    0
    ReputationRep:
    I should mention - I only need tr, td and th do be changed - everything else is good. I just need it taken out for those 3. So deleting it out of the code snippet above is no good.

    And I think I am right in saying I could change the * to all the elements I want it to apply to, but I don't have the time or a good enough brain to figure all that out.
    Offline

    15
    ReputationRep:
    Just add in another one for tr, td and th and specify what padding and alignment, etc.. you want:

    Code:
    tr, td, th
    {
    padding: 0; // Or whatever
    vertical-alignment: middle; // or whatever
    }
    Offline

    3
    ReputationRep:
    When you're defining the table in your html, you'll want to:
    Code:
    <table cellpadding="0" cellspacing="0"> [...]
    Or you can do this in css with table { border-spacing: 0 } table td { padding: 0 } (the latter should already be the case, but you didn't do the former.

    Incidentally, there are some much better css resets out there you should look into.
    • Thread Starter
    Offline

    0
    ReputationRep:
    (Original post by OceanInTheSky)
    Just add in another one for tr, td and th and specify what padding and alignment, etc.. you want:

    Code:
    tr, td, th
    {
    padding: 0; // Or whatever
    vertical-alignment: middle; // or whatever
    }
    That's what I thought but I tried it and it didn't do anything. I added it to the same style sheet just below the * segment.
    Offline

    0
    ReputationRep:
    Try instead of the asterisk use body, then do what OceanInTheSky suggested:

    Code:
    /* ========================== CSS Reset ========================== */
    body {
    	border: 0 none;	
    	font-family: Helvetica, Arial, sans-serif;
    	font-size: 100%;
    	font-style: inherit;
    	font-weight: inherit;
    	margin: 0;
    	outline: 0;
    	padding: 0;
    	vertical-align: baseline;
    }
    
    tr, td, th
    {
    padding: 0; // Or whatever
    vertical-alignment: middle; // or whatever
    }
    Offline

    0
    ReputationRep:
    Use !important, that give the most priority. E.g div#header { text-align:center !important; }

    Also download the firefox plugin Web Developer once installed press ctrl + shift + y and then inspect the table element and you can find out where the style is coming from.
 
 
 
Reply
Submit reply
TSR Support Team

We have a brilliant team of more than 60 Support Team members looking after discussions on The Student Room, helping to make it a fun, safe and useful place to hang out.

Updated: April 1, 2011
Poll
Who is your favourite TV detective?
Useful resources

The Student Room, Get Revising and Marked by Teachers are trading names of The Student Room Group Ltd.

Register Number: 04666380 (England and Wales), VAT No. 806 8067 22 Registered Office: International House, Queens Road, Brighton, BN1 3XE

Write a reply...
Reply
Hide
Reputation gems: You get these gems as you gain rep from other members for making good contributions and giving helpful advice.