Turn on thread page Beta

CSS GEEK REQUIRED: Overriding the asterisk / wild card in CSS watch

    • 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

    15
    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
Turn on thread page Beta
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.

This forum is supported by:
Updated: April 1, 2011
The home of Results and Clearing

1,340

people online now

1,567,000

students helped last year
Poll
A-level students - how do you feel about your results?
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.