I don't believe it's a typical thing to see, but I'm curious if this is a possible inline scenario.
I have a table with several rows. Some of those rows may or may not have hrefs.
Can I specify link styles inside the or tags? Rather than inside the href tags?
<table>
<tr style="color:#000;">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Here's how I want to affect links only:
.a { text-decoration:underline;color:#EEE; }
I already placed a style in the <tr> tag, which affects regular text. Can I specify link styles inside there too? Or is that a limit that can only be done from within stylesheets or inside the tag itself?
Link colors are not inherited from their parent elements. You'll need to specify the color for the links specifically.
Firstly, let's get some terminology clear so we're all on the same page.
Elements such as the anchor tag <a> can be styled using CSS. Attributes, such as href give certain meaning to the tag they belong too. You cannot style attributes alone.
In order to change the style of all anchor tags (all links) in your site you can simply do:
a{
/* my styles here */
}
As #ceejayoz pointed out above, link colours are not inherited from their parent and so you either need to style them individually inline <a style="color:#eee"> (which I sugest you avoid doing), or you style them from a stylesheet/css code block.
Related
I'm developing a CMS plugin that generates HTML. I want to let users style the HTML any way they want. Here is the HTML:
<div id="ss:">
<table>
<colgroup>
<col span="1">
<!-- span can range from 3 to 6. -->
<col span="4">
<col span="4">
</colgroup>
<thead>
<tr>
<th rowspan="2">Variable text goes here</th>
<!-- span can range from 3 to 6. -->
<th colspan="4">Responses</th>
<th colspan="4">Percentage</th>
</tr>
<tr>
<!-- this row could contain from 6 to 12 headings -->
<th>Small</th>
<th>Med.</th>
<th>Large</th>
<th>Tot.</th>
<th>Small</th>
<th>Med.</th>
<th>Large</th>
<th>Tot.</th>
</tr>
</thead>
<tbody>
<!-- one more more rows with this structure -->
<tr>
<th>1. What size Coke do you prefer?</th>
<td>24</td>
<!-- largest number surrounded by strong tags -->
<td><strong>28</strong></td>
<td>0</td>
<td>52</td>
<td>46</td>
<!-- largest percent surrounded by strong tags -->
<td><strong>54</strong></td>
<td>0</td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
I've placed the HTML inside div with an ID to allow users to select only elements within it. So my questions are:
Can a stylesheet style every element here without using classes, even if that means using pseudo-classes like nth-child?
Would that be a good practice? If not, what is a good strategy?
I could actually generate a class for every element, but where's the line between that's good and that's crazy?
Can a stylesheet style every element here without using classes, even if that means using pseudo-classes like nth-child?
Absolutely. There are many ways to target elements. You would have to use nth-child once you get to all the td, th and trs.
#ss:,
table,
colgroup,
col,
[span="1"],
[span="4"],
thead,
tr,
th,
[rowspan="2"],
[colspan="4"],
tbody,
td,
td strong {
// css
}
Would that be a good practice? If not, what is a good strategy?
The argument against using nth-child is that the browser has to process every child element to do the math and find the correct elements, but with using classes or ids it can find the correct elements easier. So it's easier for the browser to process the css targeting classes and ids. I just read about browser processing nth-child this week, but I couldn't find the article for reference. I'm a big fan of this CSS Tricks page for nth-child references
I could actually generate a class for every element, but where's the line between that's good and that's crazy?
Everyone has their own definition of crazy. Giving rows a class would be helpful, then let the user get into the nth-child depth.`
Why do you need IDs or classes? Just target the elements themselves
h1 {
...
}
h2 {
...
}
h3 {
..
}
etc...
You can target your stylesheets dynamically like in this SO post.
Also for the record, DOM look-ups by class are significantly faster than by ID. A quick Google search on that will tell you more than I ever could.
I have a header row which has this structure:
<th...
<a...
<span...
{text}
If you look at the attachement, you will notice that all the headers with this structure are aligned.
Well, when a specific header is clicked for "sorted" status, the structure will be like:
<th...
<a...
<span...
<table>
<tbody>
<tr>
<td>
{text}
</td>
<td>
<div> //with a background image
</td>
</tr>
</tbody>
</table>
Well, in IE8 this sorted column is no longer aligned (see the screenshot please).
I've tried a lot to put some css style (position:relative, etc) to the table inside the span to fix the alignment in IE8 but I failed..
Is here any css guru which can suggest a fix?
Please note that I can NOT change this structure (its some generated code from ICEfaces library) but I can apply css attributes (if I know where...).
Also, there is no css difference (some specific important style) to the sorted column applied. Just plain table inside that span.
Thanks.
Check the vertical-align property, maybe. Here, judging by the screencap, it seems to be in default mode, 'baseline'. (I'm not sure it will do much, though)
Try :
th.stuff {
vertical-align:top;
}
or :
th.stuff {
vertical-align:middle;
}
Also you could make all th slightly higher and gain somme padding to align the content. I think the problem, overall; commes from the select that appears in the th, inside the table.
You can use IE specific style sheets. They are known as conditional style sheets.
http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/
The idea of course would be to change the CSS for that element for IE only (because it does work already with other browsers).
How would I go about selecting a parent element when a child element is hovered over.
For example:
<table id="tb1">
<tr>
<td id="td1">make table red</td>
<td id="td2">make table yellow</td>
</tr>
</table>
Is there a way to select tb1 when td1 is hovered over using either the id or the class tags?
Unfortunately it is not possible to select a parent element when a child element is hovered using just CSS. This would defy the cascade in cascading style sheets. You could however accomplish this using JavaScript or one of the libraries such as jQuery easily enough.
If you were to use jQuery the following would provide the result that you are looking for:
http://jsfiddle.net/fSqSx/
Are the IDs of the table and the TDs always named like that? Assuming hovering over a TD generates an event with a function you could do
function highlightTable(){
var tableID=this.id.replace('td','tb');
document.getElementById(tableID).style.backgroundColor='#c0c0c0';
}
I have a situation that I am looking at where certain CSS properties will not be inherited. This revolves around tables and IE8. Using the sample HTML below I cannot get the text within the table to inherit the green colour.
This works in Firefox and Chrome, but not IE8 and from reading up this seems to have always been a problem in IE but was meant to be working in version 8 from what I read.
I have tried to specify the inherit value everywhere possible, but to no avail so the question is whether the CSS inheritance support in IE8 is buggy, or am I missing something?
I don't want answer changing inline CSS to be classes and I certainly dont wan't any comments on tables as this all stems from building and designing HTML emails where inline CSS and tables are essential.
<html>
<head></head>
<body>
<table style="color: green;">
<tr>
<td>
<span>Span</span>
<p>Paragraph</p>
<div>Div</div>
<table style="color:inherit;">
<tr>
<td>Table</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You're right, this is pretty odd, although I find that adding a valid doctype solves the problem. http://jsbin.com/etuti/2
I've never had a problem with inheritance in any of the IEs. I usually have problems with lack of selector and property support, as well as positioning bugs etc.
Could it be you don't have the correct specificity with your selectors? I'm pretty sure they go in this order (from most specific to less)
Inline style attribute (style="color: green;")
Id selector (#bob)
Class selector (.jill)
Element selector (body)
If that all fails, could adding !important help? I'd use this as a last resort, as usually you can just give specificity by providing a more specific selector.
I am using a customized user control (that I don't have the permission to modify) which renders the HTML for a table as shown:
<tr>
<td></td>
<td></td>
</tr>
It lets me add any control dynamically within the tags. My question is how would I set the style of the cell for the table cell. Normally, I would do <td class="myClass">. Since I don't have the source code to modify it, the workaround I am using is to create a <div>, set the CSS class and add it to the <td>. The code looks something like this:
HtmlGenericControl divControl = new HtmlGenericControl("div");
divControl.Attributes.Add("class", "myClass");
//Add a textbox to divControl.
//Add the divControl to the customized user control
This does not give me the same UI I am expecting.
If you can, just add a DIV before the table is generated. The class name for the outer div will be inherited by the TD elements:
<div class="MyClassName">
//table code here
</div>
Then you can use CSS as follows:
.MyClassName TD { //CSS here }
Try using a SPAN instead of a DIV. A DIV is a block-level element that carries some extra formatting baggage along with it. The SPAN is an inline element and won't alter the presentation semantics the way a DIV will.
You might also be able to use hierarchical CSS selectors to achieve the same effect without having to wrap the contents of the table element in a container. This would probably be true if your CSS class were to apply equally to all table elements, but wouldn't work if they were to apply to some and not others.
After your control is added to the page's control tree you can use it's "parent" property to work up the tree to the table control.
NewDynamicControl.Parent.Parent.Parent.Attributes.Add("class", "myClass")
This assumes you have good knowledge of what the usercontrol you are adding to looks like and that it won't be changed by someone else and end up breaking your code later.
Just use divs and give classes to them.