Long time reader, first time poster asks:
After many weeks of google and forum trawling, I am still at a loss. I have a series of nested divs, some with ids, some with classes, and some with ids and classes.
It's XHTML strict, and validates.
Original code http://www.drewsonne.com/melonstack/?topic=brisbane
eg.
<div id="main">
<div class="rEntry" id="r1">
City of Brisbane<br>
<span id="rSum1" class="rSum">This is a website summary</span>
</div>
<div class="rEntry" id="r2">
City of Brisbane<br>
<span id="rSum2" class="rSum">This is a website summary as well</span>
</div>
... et cetera ...
</div>
For the purposes of testing, my CSS currently looks like this
.rEntry{
padding:10px;
margin:10px;
}
For the life of me, I can not get this style to work at all in IE6. If I change to #r1, #r2, or div the style is applied to the appropriate elements, but neither div.rEntry nor .rEntry will make the style stick. Does anyone know where I have gone wrong?
DJS.
Now, looking at the HTML at your provided link, I don't see any divs with the rEntry class. Then I realized, they were being generated dynamically. That reminded me that for IE6, when adding CSS classes through the DOM, you have to use the className property, not class. In other words, the IE6 DOM is not seeing that the divs are of class rEntry at all.
How are those divs being generated? If it's through your own code, you may want to try modifying the class AND className properties of your elements.
edit: It looks like it's in scripts/REsultsList.js. Try changing the line that says:
entry_div_element.setAttribute('class', 'rEntry');
to:
entry_div_element.setAttribute('class', 'rEntry');
entry_div_element.className = 'rEntry';
I have three pieces of advice:
Use a reset CSS (there are several of these around);
Use a DOCTYPE declaration, if you aren't already, to force IE into standards-compliant mode (well, as standards compliant as IE can be) instead of quirks mode. I usually use HTML 4.01 transitional for this but if you comply with strict, even better;
Qualify your styles with the element name.
For example:
div.rEntry {
padding:10px;
margin:10px;
}
The more specific a style is, the greater its importance in CSS for determining which one applies. You can see if thats the issue by testing it with !important:
div.rEntry{
padding:10px !important;
margin:10px !important;
}
If that fixes the issue then you've got other CSS that is taking precedence. I suspect this is the issue as #id selectors have a higher precedence than .class selectors, which is the behaviour you're seeing.
Note: I don't recommend using !important as a general rule, just to find issues with CSS precedence. Once identified, it's generally best to fix them the "right" way.
I just went to the "original code" link, and your CSS reads:
div.rEntry{
margin:10px !important;
} padding:10px !important;
It looks like your padding style is outside of the the bracket. Are you certain this isn't all just due to a typo?
Related
I am primarily a mainframe developer and maintain a front end web application which was built in 2002 (but I joined it since 2012) and compatible only with IE 5. We have been surviving all these years with compatibility mode in IE. Now our client want us to make it compatible with IE 11. We just started off with a basic proof of concept taking one page and we noticed a couple of things with javascripts (fixed).
But we are stuck with an issue with our external style sheets. CSS properties are not being applied. When checked in debugger, there are check boxes are available for Position & Visibility attributes but top, left, and other things don't have check boxes and doesn't seem to apply. I researched a lot before posting this question but couldn't find a right answer. Here is a sample div and CSS.
<DIV id=PD_DIV_SEARCHBY class=srchSearchBy style="VISIBILITY: visible">
....
....
</DIV>
.srchSearchBy
{ position:absolute; visibility:hidden; -> Seems to work
top:75; left:5; width:225; height:135; } -> Don't work
Please pardon my knowledge if something was mentioned inappropriately.
Thanks
Per the comments, you should add quotes to your id and class declarations.
You also need units for your dimensions.
If your styles are still not being applied, it may be because another rule is taking precedence in Cascade Order or Specificity. You may be able to use a more specific CSS selector. If not, you can use the !important exception, however this should be used sparingly.
HTML
<DIV id="PD_DIV_SEARCHBY" class="srchSearchBy">
....
....
</DIV>
CSS
.srchSearchBy{
position:absolute;
visibility:hidden;
top:75px !important;
left:5px !important;
width:225px !important;
height:135px !important;
}
I'm having some trouble with some CSS. I have a number of unique tables with a similar format name, and I need to set the background color on some of them. However, if I try and use a wildcard the style gets overwritten by a parent CSS file.
The background colour here works fine:
#AllProtectedServers1 td.status.online{
color: green;
background-color: yellow;
font-weight: bold;
}
But the background colour doesn't work here as it's being overwritten higher up (although everything else does):
td.status.online {
color: green;
background-color: yellow;
font-weight: bold;
}
I'm going to have 20+ tables all starting with "AllProtectedServers", so naming them all individually is going to make the css huge. Is there anyway I could use a wildcard? I've tried using div[id^='id_'] and similar selectors without any luck.
Anyone have any ideas of what I could use instead?
Update:
Please note the ID's are unique (AllProtectedServersCompany1, AllProtectedServersCompany2, etc), but they all start with AllProtectedServers. I want to create some CSS that will override the stylesheet for the table that is overriding my changes and use a wildcard so I don't have to specify each one.
Maybe this would help:
td.status.online
{
color: green;
background-color: yellow !important;
font-weight: bold;
}
Alpipego's comment is not correct. You're perfectly fine using ID selectors (#) for CSS. These can be overwritten by other ID selectors of the same or higher specificity (depending on page order) or the !important rule.
However, you want to avoid using !important as a CSS rule because that can back you into a corner and become a maintenance nightmare.
As a matter of fact what you need to learn about is CSS Specificity. I recommend reading the CSS: Specificity Wars for an entertaining but educational overview of how CSS Specificity works.
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Smashing Magazine also published an article on it that's more extensive:
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
You do want to be careful about not going crazy with specificity. ID's are (supposed to be) unique per page, so if you end up with a lot of deeply nested rules (#foo .bar .baz .goo), you're probably looking at needing some refactoring.
So, if you use Chrome, pop open the developer tool and look at the CSS selector and determine the specificity. All you need to do is:
a) Match the specificity but make your style come later in the DOM page order
or
b) Use a higher specificity
That's all there really is to it.
I hope that helps!
Cheers.
jmbertucci's answer is quite correct, if perhaps a little incomplete, I will expand with some examlpes.
One of the most overlooked aspects of CSS is specificity rules. As mentioned by jmbertucci please see:
http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
A little more googling will present a wealth of articles for you.
Let's take some base html and css and a bit of a guess as to what you have.
HTML
<table class="myTable">
<tr>
<td class="status online">Online</td>
<td class="status offline">Offline</td>
</tr>
</table>
CSS
table.myTable td.status
{
background-color:#fff;
}
td.status.online
{
background-color:#f00;
}
Fiddle
This will result in a white background for "online" as table.myTable td.status is more specific than td.status.online.
In this example we need to make the second selector more specific. As you mentioned adding an ID results in what you want as IDs have an extremely high specificity score and a very hard to over-write. So much so that some say never to use them*. A simple solution in this example is to add table to the seconde selector.
table td.status.online
{
background-color:#f00;
}
This results in a red background for "online"
Fiddle
Adding table may not work in your instance. YOu need to find the style rule that is being applied using Chrome Developer Tools or Firebug for Firefox and create a rule that is more specific.
If you provide more information I may be able to provide a more specific answer.
* A note on ID's ID's extremely high specificty is both their strenth and weakness. I believe they can be used, but with caution. If you want to style a specific part of a page in a specific manner, you may have a canditate for ID. Think along the lines of a header and footer before the days of HTML5. Another good example may be <section id="discalimer">, using an ID provies two benifits: it's an anchor for specific styling and it can be linked to, e.g: Disclaimer. A further read: http://www.zeldman.com/2012/11/21/in-defense-of-descendant-selectors-and-id-elements/
Keep in mind the arguments on weather to use IDs or not are a matter of optinion and their are good points on both sides. W3C, the standards guys, has no stance on this. If where you work has a coding guide, stick to that mandate. If you're unsure, don't use them in CSS to be safe. Most importantly keep IDs unique.
Andy68man, no wildcard needed, just use a class. Same class for all the tables if they all share the same properties. As in (first the HTML):
<table class="allProtectedServers"> ..... </table>
<table class="allProtectedServers"> ..... </table>
<table class="allProtectedServers secondClass"> ..... </table>
and the CSS:
.AllProtectedServers td.status.online { ... }
If there are one or more properties that only some of the tables have, create another class and give those particular tables both classes, as in the third line of HTML above.
Alternatively, if that still gets overruled by the CSS above, put a single div round all the tables or even the whole page (or there may already be one), give the div an id, and add that into your selector to increase it's specificty (your first bit of code above shows the extra id will be enough to overrule the other CSS that's causing your problem):
#myDiv td.status.online { ... }
For some time now I'm using a little trick that I thought was smart.
That is combining the same css selector to add specificity to the rule's selector.
CSS Specs do mention :
Note: Repeated occurrances of the same simple selector are allowed and
do increase specificity.
http://www.w3.org/TR/css3-selectors/#specificity
For example if HTML is
<body>
<section id="main">
<header class="titles">
<h2>Title red</h2>
<h2 class="blue">Title blue</h2>
</header>
<h2 class="blue">Title blue</h2>
</section>
</body>
And CSS
#main .titles h2{
color: red;
}
#main .blue.blue{
color: blue;
}
This way I can use the class .blue to override styles, event in the header...
(I'm doing this because I hate using !important. To me it should be avoided at all costs.)
First selector weighs 0111 (1 id, 1 class, 1 element)
Second selector weighs 0120 (1 id, 2 classes)
Sometimes I do it with IDs. And it works... in real browsers...
This selector :
#main#main .blue{}
should weigh 0200, as it's got 2 IDs right?
Well IE9 (didn't try others) does not interpret multiple identical IDs in selectors.
This selector won't override #main .titles h2{} in IE9...
IE's css console shows a computed selector equal to #main .blue and removes the second occurence...
Why is that?
To me this is just another IE implementation "bug".
As #BoltClock suggested, I filed a report here :
https://connect.microsoft.com/IE/feedbackdetail/view/958790/repeated-occurrences-of-the-same-simple-selector-should-increase-specificity-even-with-ids
Yes, judging by the behavior shown in F12, this is definitely a bug. It's also a violation of the spec, if you interpret "do increase specificity" as "must increase specificity". This issue seems to only affect ID selectors. Class selectors, attribute selectors and pseudo-classes are OK.
This appears to have been reported before as when I search Microsoft Connect, it turns up an existing report, but I can't view it for some reason. The issue is still present in IE11; if you can't view the report either, feel free to file another one.
I have this code
*html #alertBox {
height:100px;
}
#modalContainer > #alertBox {
position:fixed;
}
is this supported by css, i found this code in some other site(I forgot the link)
*html #alertBox {
height:100px;
}
That's a mistyped star-HTML. Star-HTML is a CSS hack usually used to target rules at IE6.
The star-HTML prefix in a rule shouldn't match anything, because there is no element (*) above the root element (html). But it does in IE up to version 6 due to bugs in that browser.
However for this to be a valid rule, there must be a space between the * and the html. The current code is invalid CSS: the validator will complain and browsers might do unexpected things with it. As it happens, in the current crop of browsers there is no difference: IE6-7 allows the spaceless syntax, the others ignore the whole rule. But you shouldn't really rely on that.
#modalContainer > #alertBox {
position:fixed;
}
That's a child selector: it selects the alertBox when it's a direct child of modalContainer.
> is something IE6 doesn't understand at all, so the consequence is to target the rule at all browsers except IE6 (which doesn't support position: fixed). This makes it more-or-less the opposite of the star-HTML hack. Clearly it is being used for the purpose here, as otherwise the selector, including two unique IDs, is quite redundant.
This is known as the star HTML hack and is useful in helping you pass certain CSS rules to older versions of Internet Explorer.
So the first example will only set the height of #alertBox to 100 pixels if the browser that is used is susceptible to the star HTML hack:
The second example (#modalContainer > #alertBox) will be applied to any element with an ID of alertBox which is also a direct child of another element that has an ID of modalContainer.
The markup would have to look something like this:
<div id="modalContainer">
<div id="alertBox"></div>
</div>
and not this:
<div id="modalContainer">
<div>
<div id="alertBox"></div>
</div>
</div>
Both of these rules are valid CSS.
Is there any way with CSS to target all inputs based on their type? I have a disabled class I use on various disabled form elements, and I'm setting the background color for text boxes, but I don't want my checkboxes to get that color.
I know I can do this with seperate classes but I'd rather use CSS if possible. I'm sure, I can set this in javascript but again looking for CSS.
I'm targeting IE7+. So i don't think I can use CSS3.
Edit
With CSS3 I would be able to do something like?
INPUT[type='text']:disabled that would be even better get rid of my class altogether...
Edit
Ok thanks for the help! So here's a selector which modifies all textboxes and areas which have been disabled without requiring setting any classes, when I started this question I never thought this was possible...
INPUT[disabled][type='text'], TEXTAREA[disabled]
{
background-color: Silver;
}
This works in IE7
Yes. IE7+ supports attribute selectors:
input[type=radio]
input[type^=ra]
input[type*=d]
input[type$=io]
Element input with attribute type which contains a value that is equal to, begins with, contains or ends with a certain value.
Other safe (IE7+) selectors are:
Parent > child that has: p > span { font-weight: bold; }
Preceded by ~ element which is: span ~ span { color: blue; }
Which for <p><span/><span/></p> would effectively give you:
<p>
<span style="font-weight: bold;">
<span style="font-weight: bold; color: blue;">
</p>
Further reading:
Browser CSS compatibility on quirksmode.com
I'm surprised that everyone else thinks it can't be done. CSS attribute selectors have been here for some time already. I guess it's time we clean up our .css files.
Sadly the other posters are correct that you're
...actually as corrected by kRON, you are ok with your IE7 and a strict doc, but most of us with IE6 requirements are reduced to JS or class references for this, but it is a CSS2 property, just one without sufficient support from IE^h^h browsers.
Out of completeness, the type selector is - similar to xpath - of the form [attribute=value] but many interesting variants exist. It will be quite powerful when it's available, good thing to keep in your head for IE8.
w3 reference
browser support reference
You can do this with jQuery. Using their selectors, you can select by attributes, such as type. This does, however, require that your users have Javascript turned on, and an additional file to download, but if it works...
Sorry, the short answer is no. CSS (2.1) will only mark up the elements of a DOM, not their attributes. You'd have to apply a specific class to each input.
Bummer I know, because that would be incredibly useful.
I know you've said you'd prefer CSS over JavaScript, but you should still consider using jQuery. It provides a very clean and elegant way of adding styles to DOM elements based on attributes.