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.
Related
My intro photo slightly covers the breadcrumbs panel on IE and Chrome, see here https://www.hawaiidiscount.com/luaus.htm
It looks fine on Safari and Firefox.
I have been reading on the Internet about css specific code for IE and tried different methods to fix that, but it doesn't work. What am I doing wrong? Thanks!
<!--[if IE]>
<style>
.breadcrumbs {
margin-top: -22px;
}
</style>
<![endif]-->
<style>
.ie .breadcrumbs {
margin-top: -22px;
}
</style>
<style>
#breadcrumbs {
margin-top: -22px;
}
</style>
It's possible that the different heights are due to the different font rendering engines on the different browsers, as this element is being positioned by <br /> elements.
You're able to use conditional statements, such as
<!--[if IE]>
.element{
margin-top: 10px;
}
<![endif]-->
.. to add code that only IE6 - 9 will render, however this will not work in IE10 and above.
You could also browser sniff, but this is really not a good solution as it's better to have one codebase that works across browsers. You also won't be able to anticipate all browsers that your users will use.
The website you've shared is also using quite a few negative margins and absolute positions, which can also cause inconsistent layout issues.
My suggestion would be to remove all <br /> elements, remove as many of the negative margins and absolute positions as possible and lay the page out using a simpler system. For instance, you've split out the background of the breadcrumbs from the text of the breadcrumbs - these should really be together so that you can easily style them together.
Hope that helps
I'm setting image width based on conditional comments as follows.
<o:conditionalComment if="lte IE 9">
<style>
.image-width {
width: 210px;
}
</style>
</o:conditionalComment>
<o:conditionalComment if="!IE">
<style>
.image-width {
width: 216px;
}
</style>
</o:conditionalComment>
It works on Internet Explorer (8). IE 8 sets the image width to 210px. The image width on other browsers however, should be set to 216px. The last conditional comment i.e !IE does not function on other browsers (Chrome and FF).
How to apply the width: 216px; style on browsers other than IE?
The generated HTML code appears to be correct as follows.
<!--[if lte IE 9]>
<style>
.image-width {
width: 210px;
}
</style><![endif]-->
<!--[if !IE]>
<style>
.image-width {
width: 216px;
}
</style><![endif]-->
The !IE is somewhat an extreme conditonal comment condition. It's namely utterly useless.
Basically, every browser ignores everything inside comments <!-- ... -->. IE is the only browser which actually interprets the content of comments matching <!--[if ...]> ... <![endif]-->. Note that other browsers don't interpret them and still treat them like <!-- ... -->.
When you use !IE, then IE browser won't interpret the comment's content. But other non-IE browsers also not, for the very simple reason that they don't support conditional comments. In effects, the comment is not being parsed by any browser. It has exactly the same effect as <!-- ... -->. The only feasible reason why !IE condition exists is that Microsoft assumed that "other" browsers would in some future support conditional comments as well (this was after all a severe misassumption; even more, the support for conditional comments is removed since IE10).
In order to achieve your concrete functional requirement, you'd better swap the two style declarations and make the main one non-conditional. In CSS, the latter declared one has higher precedence.
<style>
.image-width {
width: 216px;
}
</style>
<o:conditionalComment if="lte IE 9">
<style>
.image-width {
width: 210px;
}
</style>
</o:conditionalComment>
Simple as that. Even IE understands that.
By the way, you'd better use <h:outputStylesheet> resp. <link> elements instead.
The site in question is here.
All Browser except ie7 and ie8 display the page proper. Those two don't float the two main elements nav#navigation and section#content. I already tried using html5_shiv.
Does anyone have a suggestion?
You said html5 shiv didn't work, but it should. Regardless, you could manually apply the fix yourself. In the <head>:
<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
document.createElement('hgroup');
</script>
<![endif]-->
And the CSS file:
header, nav, section, article, aside, footer, hgroup {
display: block;
}
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.
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;