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.
Related
I'm working on a legacy web app that requires use of Internet Explorer's 'IE5 Quirks Mode' (set using X-UA-Compatible: IE=5).
A number of text fields in the app have (app-generated) 'x' buttons to clear the content. In IE10, IE also generates an 'x' button to clear the field, so the user sees two of them.
As discussed in this question, you can remove the IE-generated 'x' using the ::-ms-clear CSS pseudo-element. Unfortunately, this appears not to work in IE5 Quirks Mode: styling of the ::-ms-clear pseudo-element shows up in the developer tools as :unknown, and the IE-generated 'x' continues to appear.
Aside from rewriting the app to use a modern browser mode, is there any way to get rid of the IE-generated 'x'?
Following is a test page that reproduces the problem in IE5 Quirks Mode when run under IE10:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=5">
<style type="text/css">
::-ms-clear { width: 0; height: 0; }
</style>
</head>
<body>Enter some text:<input></body>
</html>
Try
input::-ms-clear { display: none; }
Or
input::-ms-clear { visibility: hidden; }
A hackier hack might be to use the margin-right and overflow properties
input { margin-right: -20px; overflow: hidden }
Say I have the following code
<style type="text/css" media="all">
span, ul, ul li {
display: inline-block;
vertical-align: top;
margin: 0;
padding: 0;
list-style: none;
}
</style>
<span>i would want</span>
<ul>
<li>this</li>
<li>on</li>
<li>one line.</li>
</ul>
I want this to display inline in IE8. Everywhere I have read everything says this should work, IE8 supports inline-block. However after a morning of trying I cant get the above to line up. I know I could float it, but with the other elements on my page (not shown here) I would need to use a 'clearfix' which is more mark up. I only need to target IE8 and would love to know why inline block doesn't work for me when apparently its supported. The above code does what I want when viewed in Google Chrome.
I'm guessing you haven't declared a doctype. Try placing this on the first line, before the html tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The code you pasted works in IE8 with that doctype.
Not all IE8 versions seem to work equally. I found that the given code, even with a DOCTYPE, does not work in IE 8.0.6001.18702, which is an early version.
However, the workaround for lower IE versions did its job on that particular IE 8 as well:
<!--[if lt IE 8]>
<style type="text/css">
li { display: inline; }
</style>
<![endif]-->
You can set margin-right:1px
worked for me pretty well.
In my experience it is always a better idea to use the universal way (IE6+) of declaring an inline block. Even if you are targeting newer browsers every time I've tried to say that it's only supported by newer browsers some client still messes with their document type, and then the sales say, it needs to be fixed, because clients can still see it and does not get it, that it's down to their IE settings and not our fault. More over when you are using inline-blocks for structural stuff, it keeps the site from completely disintegrating if the user is viewing the site on an older IE for what ever reason.
display: inline-block;
*zoom: 1;
*display: inline;
IE8 will treat it as a block level element unless you use float.
.divInlineBlock
{
display: inline-block;
float: left;
}
Note that IE8 will act like IE7 if you are viewing an intranet site, which can happen as you develop! See this StackOverflow question:
IE8 Rendering as IE7 By Default?
For IE8 - you can add a specific declaration:
display: inline-table;
which works great.
I got the following css:
div#header, header {
height: 88px;
width: 100%;
background-image: url('/images/header.jpg');
background-repeat:no-repeat;
}
And the following HTML:
<header></header>
<div id="header"></div>
The second HTML-line does exactly what I want it to do. However, the first html-line (< header >) does not.
I'm using Firefox 3.6.8. In firebug the markup for both html-line looks exactly the same.
In Internet explorer I have the same problem. Only Chrome displays the code as expected.
I'm pretty confused right now. How to fix this?
Firefox 3.6 does not have a User Agent stylesheet that recognizes the header elements as block level elements, so as with all unknown elements it is displayed as an inline element.
Adding in this line should do the trick:
display: block;
Make sure that you use a HTML5 reset so that these elements display correctly for older browsers that do not recognize these new elements as block level elements, like:
article, aside, figure, footer, header, hgroup, nav, section { display:block; }
If you need to use HTML5 elements like header and It needs to work in older browsers like ie 6, 7 & 8. Than in addition to adding display: block; to the elements, you may have to use a javascript workaround that targets ie.
Here is an example from communitymx.com that does this for a several HTML5 elements:
<!--[if IE]>
<script type="text/javascript">
(function(){
var html5elmeents = "address|article|aside|audio|
canvas|command|datalist|details|dialog|
figure|figcaption|footer|header|hgroup|
keygen|mark|meter|menu|nav|progress|
ruby|section|time|video".split('|');
for(var i = 0; i < html5elmeents.length; i++){
document.createElement(html5elmeents[i]);
}
}
)();
</script>
<![endif]-->
Source: Making HTML5 work in IE6, IE7 & IE8
You may want to replace <!--[if IE]> with <!--[if lt IE 9]> if ie9 supports the elements the way you need it to.
I have the following CSS code
.editable:before {
content: url(../images/icons/icon1.png);
padding-right:5px;
}
this is used in conjunction with the following markup:
<span class="editable"></span>
In every other blessed browser in the world my icon is appearing, but IE8 seems to have a problem with this. Isn't the :before pseudo-element CSS2? isn't content: also a CSS2 command? what gives?
Actually you should be careful here and read the detail. For full details, see this link - which states
In Windows Internet Explorer 8, as well as later versions of Windows
Internet Explorer in IE8 Standards mode, only the one-colon form of
this pseudo-element is recognized—that is, :before. Beginning with
Windows Internet Explorer 9, the ::before pseudo-element requires two
colons, though the one-colon form is still recognized and behaves
identically to the two-colon form.
Meaning for browsers <IE9 - you must use :before and for >=IE9 - you must use ::before
Update: I misread the page! IE 8 does support :before with images, it just doesn't when it is in IE7 compatibility mode.
IE8 supports :before, but not and also images as content when not in compatibility mode. Kudos to #toscho for testing!
Source
Detailed comparison of which browsers can deal with what sort of content
How I love quirksmode.org, which makes dealing with this stuff at least half-way bearable. The guy deserves a medal!
When using :before and :after, just be careful not to use double colons (::after - will not work, but :after will work). I lost about 20mins for this...
You may use the image as background for the generated content:
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Generated content with an image</title>
<style>
p:before
{
content: '';
padding: 20px;
background: url("css.png") center center no-repeat;
}
</style>
<p>Test</p>
Works in IE 8, Opera and Mozilla. Live-Demo.
This is going off of Pekka's awesome example...
My heights on my project was to tall for the row... So I added a padding-bottom: 0px;
Just in case you rain into this....
.icon-spinner:before {
content: '';
padding: 15px;
padding-bottom: 0px;
background: url("css.png") no-repeat left top;
}
So I just love it when my application is working great in Firefox, but then I open it in IE and... Nope, please try again.
The issue I'm having is that I'm setting a CSS display property to either none or table-cell with JavaScript.
I was initially using display: block, but Firefox was rendering it weird without the table-cell property.
I would love to do this without adding a hack in the JavaScript to test for IE. Any suggestions?
Thanks.
I've solved this using jQuery:
$(document).ready(function(){
if ($.browser.msie && $.browser.version == 7)
{
$(".tablecell").wrap("<td />");
$(".tablerow").wrap("<tr />");
$(".table").wrapInner("<table />");
}
});
the above script assumes you have divs using style such as:
<style>
.table { display: table; }
.tablerow { display: table-row; }
.tablecell { display: table-cell; }
</style>
A good way of solving this setting the display value to '':
<script type="text/javascript">
<!--
function toggle( elemntId ) {
if (document.getElementById( elemntId ).style.display != 'none') {
document.getElementById( elemntId ).style.display = 'none';
} else {
document.getElementById( elemntId ).style.display = '';
}
return true;
}
//-->
</script>
The empty value causes the style to revert back to it's default value. This solution works across all major browsers.
I had the same issue and used
*float: left;
"*" indicates IE only
Well, IE7 does not have display: table(-cell/-row) so you will have to figure something else out or do browser targeting (which I agree, is bad hack). As a quick fix (I don't know what you're trying to achieve, appearance-wise) you could try display: inline-block and see what it looks like.
Maybe figure out a way to do display: block and solve the problem of "Firefox rendering it weird" instead? Can you describe what you mean by the weird rendering exactly?
You never need Javascript to test for IE, use conditional comments.
You might look at the solution these guys came up with for handling table-like display in IE.
Using inline-block works well for this type of stuff. No, IE 6 and IE 7 technically do not have display: inline-block, but you can replicate the behavior with the following styles:
div.show-ib {
display: inline-block;
*zoom: 1;
*display: inline;
}
The key to this is 'zoom: 1' toggles the 'hasLayout' property on the element which changes the way the browser renders a block level element. The only gotcha with inline block is you cannot have a margin of less than 4px.
I've been using CSS for over a decade and I've never had occasion to use display:table-cell, and the only times I ever use conditional comments are to hide advanced effects from IE6.
I suspect that a different approach would solve your problem in an intrinsically cross-browser way. Can you open a separate question that describes the effect you're trying to achieve, and post the HTML and CSS that's currently working in Firefox?
A code example fot the conditional comments that user eyelidlessness, kindly posted
"[if lt IE 8]" only works if the browser is IE lower than IE8 because IE8 does it right. With the conditional comments IE7 arranges the DIVs nicely horizontally...
HTML:
<div class="container">
<!--[if lt IE 8 ]><table><tr><![endif]-->
<!--[if lt IE 8 ]><td><![endif]-->
<div class="link">English</div>
<!--[if lt IE 8 ]></td><![endif]-->
<!--[if lt IE 8 ]><td><![endif]-->
<div tabindex="0" class="thumb"><img src="pictures\pic.jpg" /></div>
<!--[if lt IE 8 ]></td><![endif]-->
<!--[if lt IE 8 ]><td><![endif]-->
<div class="link">Deutsch</div>
<!--[if lt IE 8 ]></td><![endif]-->
<!--[if lt IE 8 ]></tr></table><![endif]-->
</div>
My CSS
.link {
display:table-cell;
vertical-align:middle;
}
div.container {
margin: 0 auto;
display:table;
}
.thumb {
display:table-cell;
float: left;
text-align: center;
}
IE 8 and 9 Work with the CSS as does FireFox. IE7 looks now the same using the Table and TD & TR tags. On some pages IE 8 worked only 20% of the time, so I used [if lt IE 9 ]
This also helps smoothing out vertical-align issues that IE7 can't handle.
I tried everything and the only way I found that was all cross browser was to use Javascript / Jquery. This is a clean lightweight solution: click here
IE7 doesn't support display:inline-block; either. An apparent hack is zoom: 1; *display: inline; after your css for display:table-cell;