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;
}
Related
I have tables that has large width, so I'm trying to make all divs that contain those tables scrollable as following :
div.ui-widget-content:has(table){
overflow: auto;
}
Unfurtunately this didn't work, I don't know why, since I'm using the latest version of chrome (54.0.2840.99) which supports CSS4 selectors, and it has to work depending on this website : http://caniuse.com/#feat=css-has
I know how it's done using the has method in jQuery, but I need this to be done using only CSS.
When I force overflow: auto; in the developer tools, it works, so, the problem resides in the selector I'm using, as you can see in this picture :
So how can I solve this ?
If you gave the divs that have tables a class unique to those divs, you could set overflow: auto on that specific class. Something like this:
<div class="ui-widget-content contains-table">
{your table here}
</div>
Then set overflow: auto on the .contains-table class.
There is currently no such thing as CSS4 or the :has() pseudo-class.
It is true that certain CSS modules are at Level4, but that is not the same as a CSS4.
Also, the :has() pseudo-class very likely won't be implemented due to 'logistical reasons' (CSS goes DOWN the tree of elements, visualising elements in that order - :has() would force it to have to go "backwards" (up the tree), which would mean far more resource consumption).
I'm afraid JS (/jQuery) is the way you'll have to go about it.
Something like:
$("div").has("table").css("overflow","auto");
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 { ... }
basically im in a little dilemma... As usual, IE6 is messing up some tiny line of CSS.
All i need to fix everything is:
overflow:hidden;
Thats it. But, heres the problem. This is for a uni assigned piece of coursework and they say only 1 css file which must be valid. And no conditional comments :S so there goes my plan. Is there any way to target IE6 ONLY (not 7+ etc.) and still maintain a valid CSS file?
PS: before any of you say, well you should rethink your CSS etc, I have, its for a CSS dropdown menu and a nested element is stretching my link container so i need overflow set to hidden. Only IE6 needs this :S
EDIT MY SOLUTION:
html>body .allbrowsersceptIE6 {
overflow:visible;
}
.onlyIE6 {
overflow:hidden;
}
It works because all other browsers use the first value and ignore the second one unless the second has !important on it :D
If it comes down to using hacks as your only option: http://www.javascriptkit.com/dhtmltutors/csshacks2.shtml
So, you want to apply that rule to #menu or whatever:
* html #menu { overflow: hidden; }
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?
For IE 6 we have plenty of bugs to bug us as a designer.
incorrect box model etc etc.
i have searched for fixes via JavaScript and found
[link text][1]
IE7.js
IE7 is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
but do we have real life saver other than javascript via css.
Ways to deal with IE6 bugs with CSS? Sure.
See: http://www.quirksmode.org/css/condcom.html
for conditional comments
There are other ways, such as adding some specific characters in some CSS properties that get ignored in some browsers but not in others.
However, in some cases, web designers should be very cautious when using these.
The alternative is to live within the IE 6 world of bugs and design your pages to look right despite them. You can serve up different css for your IE6 clients, or even different html if necessary, depending on your design. In some cases, you can use one CSS file that will mean different things to IE6 clients, but that technique is problematic with respect to IE7 and 8.
this link is also handy one
How do you deal with Internet Explorer?
I never knew this - thanks svinto
"IE6 doesn't have the incorrect box model unless you have the wrong doctype. – svinto"
There are some simple stylesheet hacks that can modify the presentation in various internet explorer versions to solve your CSS problems. For example these three:
Simplified box model hack for IE4, IE5, IE5.5:
div.values { margin: 10px; m\argin: 20px; }
star html hack for IE4, IE5, IE5.5 and IE6:
* html div.values { margin: 5px; }
star first-child+html hack for IE7:
*:first-child+html div.values { margin: 5px; }
PNG transparancy issues could be solved with solutions like this:
<div style="width:50px;height:50px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/logo/logo.png');">
<img src="/images/logo/logo.png" height="50" width="50" alt="" style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" />
</div>
Great info so far but one thing to note is that IE7.js doesn't fix pngs in all cases (at least last I looked). For instance, you won't be able to tile a background image with transparency.
In the case of DXImageTransform you may find that when this is applied to elements that contain links, those links are no longer 'clickable'. You can sometimes fix this by giving the parent element that has the transform applied to it static positioning and to position the child anchor element e.g.,
h2{
position:static;
zoom:1;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/mypng.png", sizingMethod="scale");
}
h2 a{
position:relative;
}
<h2><a href="" >a link!</a></h2>
If you have to do this sort of garbage put it in a separate stylesheet and control loading with conditional comments. If the design is of any complexity try you best not to support ie6 or <. If you can't avoid doing it, charge more ;). Sometimes that is enough to persuade someone that supporting ie6 isn't "worth their while".
why don't you try FireBug Light for IE? It's not as powerful as FireFox FireBug but can be helpful
Many bugs can be worked around in CSS using conditional comments or CSS selector hacks. But there are some bugs that CSS hacks alone cannot handle such as IE6's .multiple.class.selector.bug
There's another quick and dirty hack for IE6 styles
for e.g.
You can define the CSS as;
.divTitle
{
padding: 5px;
width: 600px;
_width: 590px;
}
All the other browsers picks up 600px as the width value & IE6 overwrites it & take 590px;
I've tested this in IE7 & FF as well.
Also you may want to check this link;
link text