Just working on a Wordpress site & making some changes to the style.css to impact on tables within the site.
It's tables of class 'lassa' and the edits I've made are:
table.lassa {
border-width: 1px;
border-color: #99cc00;
border-collapse: collapse;
}
table.lassa th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #99cc00;
background-color: #dedede;
}
table.lassa td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #99cc00;
background-color: #ffffff;
}
table.lassa tr:hover {
background-color: Green;
}
...and it all works fine - except for the tr:hover bit
It's not even that important, but I'd like to know where I'm going wrong. I'm an SEO guy rather than out & out code junkie so always want to know why something isn't doing as I expect! :)
Thanks!
Because the background color is on the 'td' rather than the 'tr', the 'tr' element is effectively behind the 'td' element so you will never see its background color if the 'td' is set, change to the below:
table.lassa tr:hover td{
background-color: Green;
}
Related
I have styled all my text fields with a gray border, and for the fields with class="form_field_error", I want the border-color to change to red.
I have tried the following code, but I can't get my class to override the previously defined border? What am I missing?
HTML:
<input type="text" name="title" id="title" class="form_field_error">
CSS:
input[type="text"] {
display: block;
height: 15px;
font-weight: normal;
color: #777;
padding: 3px;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.form_field_error {
border: 1px solid #f00;
}
I created a jsFiddle to illustrate the problem.
The input[type="text"] css takes precedence over the .form_field_error css.
Change it to input.form_field_error and the border will work.
Try this:
.form_field_error {
border: 1px solid #f00 !important;
}
I would recommend using:
input[type="text"].form_field_error {
border: 1px solid red;
}
The "!important" rule should only be used as a last resort - nuclear option - because it will surpass all other attempts to target an element based on precise and relevant specificity, reducing the control you have and creating potential roadblocks for future developers. Therefore the proper way, and the best way to handle it is to start with the same selector as the original one you are trying to override, then simply add the one thing that distinguishes it from the original. This way the specificity will be precisely what you want.
Have you tried specifying which div to apply the red border to like this?
input.form_field_error {
border: 1px solid red;
}
And on a side note - the ID you set as 'title' is that just for that one or are you thinking of reusing that?
Because you could also do ->
#title.form_field_error {
border: 1px solid red;
}
Picked up a friend's CSS project to help out. I'm not an expert in CSS, here it goes:
I can't seem to find a direct answer. I am creating a table and I want 2 types of TH class that uses differnet background color in a table.
(also i might need some help on the DIV tag)
The css I'm using is like this can someone tell me what am I doing wrong?
<div class="one"><div class="two">
<table>
<TR><TH> one color </TH></TR>
<TR><TH class="color">differnet color </TH></TR>
</table></div></div>
.one .two th {
padding: 5px 10px;
border: 1px solid #d9d9d9;
background: #000000;
}
.one .two th .color{
padding: 5px 10px;
border: 1px solid #d9d9d9;
background: #ffffff;
}
Remove the space between th and .color
Otherwise you're looking for a .color descendant element inside the th, not for the class on the th itself.
I'm using DOMPDF to build out a download report of database entries for a shopping cart.
Not sure what code to put in here, it's a very typical html page with some foreach loops to display the content, and it creates the pdf just fine, but none of the css from the file is rendered as css, it gets printed as text at the top of the document.
The CSS is inline in the head of the document as any normal inline css would be.
$export_pdf ="<html><head>";
$export_pdf .="<meta http-equiv='Content-Type'
content='text/html; charset=utf-8' />";
$export_pdf .="<style type='text/css'>
.list {
border-collapse: collapse;
width: 100%;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.list td { border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; }
.list thead td { background-color: #E5E5E5; padding: 3px; font-weight: bold; }
.list tbody a { text-decoration: none; }
.list tbody td { vertical-align: middle; padding: 3px; }
.list .left { text-align: left; padding: 7px; }
.list .right { text-align: right; padding: 7px; }
table .interior,
table .interior td { border: none !important; }
table .interior tr { border-bottom: #DDD 1px solid !important; }
.list tbody .interior thead td { background: #efefef !important; }
</style>";
Then just a basic table etc.
I can't find anyone else having this issue with inline css. I've seen some posts where people have troubles getting linked styles to work, but this is simple inline css, why is it being interpreted as text instead of css?
Thanks.
-Vince
As weird as it appears, it is due to the simple quotes in the <meta> tag.
Replace them by escaped double quotes and it will work. Could you report this issue in the issue tracker please ?
I have the following CSS for my table
#currency_table
{
th { background-color: red; width: 119px; height: 45px;border-right: 1px solid #cfcfcf; border-left: 1px solid #ededed; }
th:first-of-type { width: 131px; }
th:last-of-type { width:45px;}
}
problem is that the border-right and border-left fall on top of each other so I do not see two border lines, but rather just one! I made sure that the width is large enough so that it is not a size issue.
What is wrong here?!
See border-collapse and border-spacing: http://www.w3.org/TR/CSS2/tables.html#borders. If that doesn't help, you may want to post your actual HTML.
I have a table which has rows that alternate colors, when I hover over rows they are highlighted yellow.
I would like some of the rows to be highlighted all the time too(not just onhover). I have discovered however that most of the rows that are to be highlighted are right next to each other and it gives the effect that that part of the table is just yellow and it doesn't look that good.
I want to know if it is possible to create a small strip of highlighting through the middle of the row while the outsides remain their natural color.
This is what I have:
.resultTable tbody tr:nth-child(2n+1){
background-color:white;
}
.resultTable tbody tr:nth-child(2n){
background-color:#E6EBEC;
}
.resultTable tbody tr:nth-child(n):hover{
background-color: yellow;
}
.highlightedRow{
background-color:#F2F18D !important;
}
This is what I want:
UPDATE:
I cant seem to get the border method to work.
This is the closest I get but there is space between the borders.
.resultTable{
text-align:center;
width: 100%;
padding: 0px;
margin: 0px;
}
.resultTable thead{
background-color: #000099;
color: white;
font-size:22px;
font-weight:bold;
}
.resultTable caption{
background-color: #000099;
color: white;
font-size:22px;
font-weight:bold;
}
.resultTable tbody tr:nth-child(2n+1){
background-color:white;
border-top:2px solid green;
border-bottom:2px solid green;
}
.resultTable tbody tr:nth-child(2n){
background-color:#E6EBEC;
border-top:2px solid red;
border-bottom:2px solid red;
}
.resultTable td{
border:inherit;
}
.resultTable tbody tr:nth-child(n):hover{
background-color: yellow !important;
}
.highlightedRow{
background-color:#F2F18D !important;
}
Gives me:
By the way: i made them red and green on purpose to easily spot the problem.
Set the border-width: 3px; or something and then set border-color: #FFF; that will do what you want.
In other words, you can't set part of a row to a color, unless you use an image for the background. But you can color the borders.
Why not add a border to your highlighted row ?
.resultTable tbody tr:nth-child(n):hover{
background-color: yellow;
border-top: solid 1px #333;
border-bottom: solid 1px #333;
}