PROBLEM How can I get rid off reset.css rules?

[Hypertexter]

Hi,

please look at the attached screenshot:

I would like to style a table under Innovation scheme, but the only way to kill those reset.css styles is using !important;
I tried

Code:

<style>
td {
 border:1px solid orange !important;
}
</style>

next to the table html, but without !important nothing happens

(It is the standard reset.css, only compressed, so that only line 1 exists.)

I thought css is hierarchical, the more specific commands rule? How can reset.css be the "chief"??

Bye
Hypertexter

[vallhund]

You are using less specific property ('border') than reset.css does ('border-left-color', for instance)

Now you can either specify all 'border-xxxx-yyy' properties or decompress and edit reset.css according to your needs.

[Hypertexter]

I tried

<style>
td {
border-left-color:1px solid orange !important;
}
</style>

in html and nothing happens. This even does not produce an orange which is overwritten later...


And another question:
I thought I should never edit reset.css. Could I get the same effect with editing my style.css instead? And what is "stronger": style.css or <style> section in html?

Thank you...

[shawn_a]

Give your table an id and use that
#tablename td{

[Hypertexter]

Give your table an id and use that
#tablename td{

But then I could use inline elements - or stop using CSS...

I really would like to replace the reset.css and use something else - but I still do not know why my browser freezes without it:

http://get-simple.info/forums/archive/in...-7168.html

[shawn_a]

well your css is wrong also.
border-left-color:1px solid orange !important;
is not a valid declaration

And i doubt vallhund comments apply to your situation at all.

What rule is being reset in innovation exactly ?

Oh this is your browsers reset....

nm, you just need more selectivity in your styles... or use classes and ids

Code:

.wrapper td{
  border:1px solid orange;
}

article,section whatever

[Hypertexter]

Hello shawn_a,

I'm sorry, I am a german native speaker and do not understand everything:

border-left-color:1px solid orange !important;

is not a valid declaration

But the reset.css works with that.?

What rule is being reset in innovation exactly ?

I don't know: I use the standard reset.css of innovation theme, just compressed.

Oh this is your browsers reset....

What is my browser doing? Is this the explanation for the "freeze"?

Thank you,

Hypertexter

[shawn_a]

your browser has its own reset.css innovation does not reset tables

[shawn_a]

If i add this

Code:

table td{
    border:1px solid orange;
}

to the bottom of my style.css it works fine.

Not sure i understand the problem, perhaps it is browser specific.
Try another browser.

[Hypertexter]

Code:

table td{
    border:1px solid orange;
}

works for me, too. Thank you.

But yes, reset.css resets tables:

Code:

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

And what I do not understand at all: that seems to have priority over the following html styles:

Code:

table {
border-collapse: separate !important;
border-spacing: 15px !important;
border: 2px solid black !important;
}

... which only work with !important.

[shawn_a]

Those are irrelevant overrides.

Also you dont typically assign global css rules like that.
Like i said you need to learn css specificity.

[Hypertexter]

...
Like i said you need to learn css specificity.

I am very proud to present:

Code:

<style>
table.class1  {
   border-collapse: separate;
   border-spacing: 0px;
   border: 2px solid black;
}
table.class1 td {
   border:1px solid orange;
   padding:10px 0px
}
table.class1 th:nth-child(2), table.class1 td:nth-child(2) {
   padding:10px 30px
}
</style>

Thank you!

[shawn_a]

Or use your themes parent containers

article table{}
.wrapper table{}