IE is freaking me out.
my css code looks like this:
kl {
font-size:10pt;
font-weight: bold;
color:#6e90a6;
}
and my html code looks like this:
<div id="testid"><kl>test</kl>
Why does IE ignore my CSS code?
You're making custom tags? IE deals with custom tags differently than other browsers.
Why not use span and a class, I think IE6 might respond better, just a might.
<div id="testid"><span class="kl">test</span></div>
.kl {
font-size:10pt;
font-weight: bold;
color:#6e90a6;
}
I would use a css class or an id, but if YOU MUST have your custom tag, then I believe you need to define your tag in the XSL and then include that in your page in order for IE to recognize it.
Kl? Try this...
CSS:
#testid span {
font-size:10pt;
font-weight: bold;
color:#6e90a6;
}
HTML:
<div id="testid"><span>test</span></div>
Ajaxian authored an article in late 2008 that addressed the imlementation of custom tags in IE, along with the application of CSS to said tags. You can read the short paper here:
Adding Custom Tags To Internet Explorer, The Official Way
Why wouldn't you do this for your css:
#testid (
font-size:10pt;
font-weight: bold;
color:#6e90a6;
}
That should work. Although you should know IE (especially <7) is less than CSS compliant.
Related
For an exercise I have to change the size of the french content on my page using the pseudo-class lang in CSS but it is not working.
Here is what I tried.
:lang(fr) {
font-size: 20pt;
}
make sure to add the lang attribute to your html:
<div lang="fr">
Otherwise your css looks correct.
You can read up more about lang here: https://developer.mozilla.org/en-US/docs/Web/CSS/:lang
I don't use Font Awesome but I do use icon fonts in the way described by Chris Coyier on CSS Tricks.
I wish to tweak his code to enable them to work in IE7. I realise generated content is not supported in IE7 so I had a look at how Font Awesome deals with the issue and it looks like they use this JS expression:
.ie7icon(#inner) {
*zoom: ~"expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '#{inner}')";
}
My problem is that I just can;t get my head around what it is actually doing. I need to know this so I can tweak it and make it work for the way I am using icons.
ADDED:
I have this in my Sass file at the moment:
[data-icon]:before {
#extend %icon-font
content: attr(data-icon)
speak: none
-webkit-font-smoothing: antialiased
How could I use the JS expression to add IE7 support on? Maybe a mixin would help here somehow?
Can you explain the actual JS expression?
The Sass equivalent of that mixin would be like this:
#mixin ie7icon($inner) {
*zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = '#{$inner}');
}
.foo {
#include ie7icon(\f000);
}
Output:
.foo {
*zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = '\f000');
}
Zoom is a proprietary IE CSS property and tends to be the property of choice for triggering HasLayout (see: http://haslayout.net/haslayout) because it doesn't have any side effects for non-IE browsers.
The asterisk before the zoom property is your standard star hack. It exploits a bug in the CSS parser for IE<8 as a way to provide styles exclusively to those browsers (see: http://en.wikipedia.org/wiki/CSS_filter#Star_hack)
Expressions are primarily an IE only thing. They allow you to run arbitrary JavaScript via CSS (see: http://msdn.microsoft.com/en-us/library/ms537634(v=vs.85).aspx). This particular expression is setting the contents of whatever tag it is being applied to with the value of $inner, so it is really only intended to be used with an empty tag like so:
<p><i class="foo"></i> I have an icon!</p>
First of all, you need to covert your img to font formats, fontsquirrel.com
and the css would like
#font-face { font-family: 'imgtoicon';
src:url('icons.eot');
src: url('icons.eot?#iefix') format('embedded-opentype'),
url('icons.ttf') format('truetype'),
url('icons.svg#icons') format('svg');
font-weight: normal;
font-style: normal;
}
create a class name for the font
.iconic {
display:inline-block;
font-family: 'imgtoicon';
font-weight: normal;
-webkit-font-smoothing: antialiased;
}
icon references example
.cat:before{content:'\e011';}
.dog:before{content:'\e022';}
in your css for IE7
.iconic {
font-family: 'imgtoicon';
font-weight: normal;
}
.cat{ *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = '\e011'); }
You could provide an alternative stylesheet using a conditional like so (credits to Paul Irish) <!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" />< ![endif]-->
Then in your ie7.css :
[class^="icon-"],
[class*=" icon-"] {
font-family: your-icon-font;
}
.icon-custom { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = 'utf8-Custom'); }
I think *zoom helps giving a layout to the element and debug a IE+windows weird behavior, while this.innerHTML enables you to provide the utf8 value that corresponds to your icon.
You could also go like this (still Paul Irish and h5bp) and alternatively give a specific class to your html selector by pasting this line below your DOCTYPE :
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
Then you can go
.lt-ie8 [class^="icon-"],
.lt-ie8 [class*=" icon-"] {
font-family: your-icon-font;
}
.lt-ie8 .icon-custom { *zoom: expression( this.runtimeStyle['zoom'] = "1", this.innerHTML = 'utf8-Custom'); }
h5bp plans to drop support for IE6 IE7 and considers [complete removal for these conditionals][3] but I find them useful for this especially.
Hope this helps
Please let me know how it goes
Charles
If your icon is not intented to change at runtime, you could use the following :
.icon-glass {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
If your icon is intended to change at runtime, you could do something like this :
.icon-glass {
*top:expression(0, this.innerHTML = '');
}
Unfortunately, this is extremely slow. While it is likely to work in IE6 with a significant reduction of your performance, IE7 is likely to crash if you have too many icons on your page. So I wouldn't recommend this second technique unless you use only very few icons and you can afford the performance reduction.
Here is a simple code sample from a language switch in HTML. The CSS should separate the span elements and display a dot in between:
<html>
<head>
<style type="text/css">
.languageSwitch span:before {
content: "•";
padding: 0 4px;
font-weight: normal;
}
.languageSwitch span:first-child:before {
content: "";
padding: 0;
}
.languageSwitch .current {
font-weight: bold;
}
</style>
</head>
<body>
<div class="languageSwitch">
<span>Deutsch</span>
<span class="current">English</span>
<span>français</span>
</div>
</body>
</html>
This works fine in Firefox, but Internet Explorer 9¹ simply ignores the :before directive. In the “developers tools” CSS dialog the “content” property does not show up either. I have searched all over the web: There are pseudo-element issues IE 8, but IE 9 should know them, and this is “old” CSS 2.
Does someone have a clue why this fails (bug in IE 9?) or how the syntax must look like?
1) To be clear: Version 9.0.8112.16421 / “Updateversion” 9.0.6 (KB2675157)
Check the doctype. On jsfiddle, this works fine in IE9: http://jsfiddle.net/4nGW9/. IE8 should handle this as well.
I can see the dots fine in IE 9. Exact version as yours. Only difference in my code is a valid HTML5 doctype at the top.
Without a valid doctype IE could be switching its rendering for your page to quirks mode, or a rendering mode for IE8/IE7 which would not handle the pseudo selectors like first-child or generated content.
See your page here in browserling.
For some odd reason any background styles I set on my (being loaded within a modal if that makes any difference) are not rendering in IE7 or IE8. It all looks completely fine in all other (real) browsers (including IE9). My code is as follows:
<hgroup>
<h6>Request Information Form</h6>
<img src="/images/x-close.png" alt="Close" class="close" />
</hgroup>
I know you aren't supposed to put anything besides <h1>-<h6> within an <hgroup>, but I need this little close img in there, and even when I've tried pulling it out, I ran into the same problem (plus it all "seems" to validate).
The CSS is:
hgroup {
position: relative;
width: 668px;
height: 32px;
margin: 0 0 16px;
padding: 14px 14px 0 14px;
background: #B66115 url(/images/modal_header_bckgrnd.png) repeat-x 0 0;
font: normal 20px/20px 'crimson Text',Georgia,serif;
color: #F6F5EE;
}
Also, I have declared <hgroup> as display:block, and I am using the IE shim. All I keep getting is a white background (which really doesn't work when I have white text in the block!).
Thanks in advance for any and all help.
IE7 and IE8 do not load html5 tag names into the document. Any unrecognized tags are ignored. Try adding a bit of javascript to manually add them (or use something like modernizr.js).
<script>
document.createElement('header');
document.createElement('hgroup');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
being loaded within a modal if that
makes any difference
Does your modal window use an iframe?
If so, you also need to run your HTML5 element shim script inside the iframe.
Use the HTML5 Shiv.
On a slightly unrelated note, you're using <hgroup> incorrectly. It's only supposed to contain one or more hN elements, and nothing more.
Using your code above, you should be using <header> instead.
Quite confused here.
<html>
<head>
<style>
.one
{
font-weight: normal;
}
.two
{
font-weight: bold;
}
</style>
<body>
<p class="two one"> Test!!!!!</p>
</body>
</html>
Why is Test bold? I'm clearly defining "normal" for the font weight "after" the bolded one?
I thought CSS did the cascading based on what order the classes were added right? Not the location in the file?
CSS doesn't care what order you specify the classes inside your class attribute.
Here, both classes have equal specificity, so the class lower down in your CSS "wins".
Specifics on CSS Specificity - a well written article explaining specificity.
Pointless demo of your code: http://jsfiddle.net/JwhmE/
It doesn't go off the order of the classes on the div but the order they are defined in the style rule.