Posts: 258
Threads: 37
Joined: Jun 2014
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
Attached Files
Thumbnail(s)
Posts: 47
Threads: 4
Joined: Aug 2014
2015-09-05, 18:38:29
(This post was last modified: 2015-09-05, 18:39:16 by 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.
Posts: 258
Threads: 37
Joined: Jun 2014
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...
Posts: 6,266
Threads: 181
Joined: Sep 2011
Give your table an id and use that
#tablename td{
Posts: 258
Threads: 37
Joined: Jun 2014
2015-09-06, 01:17:10
(This post was last modified: 2015-09-06, 01:18:16 by Hypertexter .)
(2015-09-05, 23:41:32) shawn_a Wrote: 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
Posts: 6,266
Threads: 181
Joined: Sep 2011
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
Posts: 258
Threads: 37
Joined: Jun 2014
Hello shawn_a,
I'm sorry, I am a german native speaker and do not understand everything:
Quote: border-left-color:1px solid orange !important;
is not a valid declaration
But the reset.css works with that.?
Quote: What rule is being reset in innovation exactly ?
I don't know: I use the standard reset.css of innovation theme, just compressed.
Quote: Oh this is your browsers reset....
What is my browser doing? Is this the explanation for the "freeze"?
Thank you,
Hypertexter
Posts: 6,266
Threads: 181
Joined: Sep 2011
your browser has its own reset.css innovation does not reset tables
Posts: 6,266
Threads: 181
Joined: Sep 2011
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.
Posts: 258
Threads: 37
Joined: Jun 2014
Quote: 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.
Posts: 6,266
Threads: 181
Joined: Sep 2011
Those are irrelevant overrides.
Also you dont typically assign global css rules like that.
Like i said you need to learn css specificity.
Posts: 258
Threads: 37
Joined: Jun 2014
(2015-09-07, 10:17:38) shawn_a Wrote: ...
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!
Posts: 6,266
Threads: 181
Joined: Sep 2011
Or use your themes parent containers
article table{}
.wrapper table{}