CODEWITHSUNDEEP
htmlcss
user3492795
user3492795

Reputation: 193

reset CSS affecting inline styling and table attributes

I have

reset.css

/* Resets default browser CSS. */

html, body, div, span, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, code,

del, dfn, em, img, q, dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

  margin: 0;

  padding: 0;

  border: 0;

  font-weight: inherit;

  font-style: inherit;

  font-size: 100%;

  font-family: inherit;

  vertical-align: baseline;

}



/* Tables still need 'cellspacing="0"' in the markup. */

table { border-collapse: separate; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; }

table, td, th { vertical-align: middle; }



/* Remove possible quote marks (") from <q>, <blockquote>. */

blockquote:before, blockquote:after, q:before, q:after { content: ""; }

blockquote, q { quotes: "" ""; }

My problem is that when I am applying some styles most importantly cell-padding on a table, these are not being applied. A style which I am applying is :

<table class='roaming-table' width='310' cellpadding='6' cellspacing='0' border='0' style='border-color:#00abbd; border-width:0px; border-style:solid; padding:3px'>

If I inspect the web page and untick the reset styles, mystyle will be applied accordingly.

PS I cannot remove the reset.css as this is doing other things in other areas

The fiddle can be seen here: http://jsfiddle.net/AAr9N/

Would someone help me out figure in solving this issue.

Upvotes: 0

Views: 1782

Answers (6)

Bobby5193
Bobby5193

Reputation: 1625

If it's the cellpadding property you need, it would be better to just use css for layout and positioning if you already have a reset css file loading on your page.

you could add this : 

.roaming-table td
{
    padding:6px;

}

here's a fiddle: http://jsfiddle.net/AAr9N/4/

Upvotes: 2

sfyn
sfyn

Reputation: 706

To do all this in a separate style sheet you can use these rules:

table.roaming-table {
    border: 10px solid #00abbd; 
    padding: 3px; 
    width: 310px;
}

table.roaming-table td {
    padding: 6px;
}

You can include these in a <style> tag on the page, too.

Upvotes: 1

sfyn
sfyn

Reputation: 706

What is wrong with the border is that a border width property is missing from your style declaration.

Try: 

<table class='roaming-table' width='310' cellpadding='6' cellspacing='0' style='border-color:#00abbd; border-width:1px; border-style:solid; border-width: 10x; padding:3px'>

Or:

<table class='roaming-table' width='310' cellpadding='6' cellspacing='0' style='border: 1px solid #00abbd; padding:3px'>

Although as other commentors have noted, it would be better to do this in a seperate stylesheet.

Upvotes: 0

Santy
Santy

Reputation: 312

Add css in your own stylesheet and that css file add in header after reset.css

To Overwrite the reset css file

table.roaming-table {
   width: 310px; /* Add your css */
}

Upvotes: 1

Jozsi
Jozsi

Reputation: 138

Try to not use inline style, because that will apply all time. Or you can try to add the !important property for all attributes, but i don't think this is the correct way, and i'm not sure it will work anyway.

Upvotes: 1

Simon
Simon

Reputation: 663

Use !Important on the class name.

Upvotes: -2

Related Questions