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;
}
Related
I want to show big text only in Ie9. I have a lot of div and span used in my page. I can't write for every div a css line.
I want to write a single css to applied on whole page. I want to applied it on IE9 only.
*{
font-size:120%;
}
I agree with Ben Lee, this is something you should do with a conditional statement.
<!--[if IE 9]>
<style type="text/css">
*{
font-size:120%;
}
</style>
<![endif]-->
I am trying to create a custom Facebook Tab using iframes. Anyways, it has a popup when it first loads. However, this popup doesn't display correctly when shown in Internet Explorer.
I tried the below code so I could attempt to hind the popup altogether, but it didn't work.
<!--[if !IE]>
-->
#hidepopup {
display: none;
}
<!--
<![endif]-->
With the popup code between <div id="hidepopup"> & </div>
Any suggestions on how to hide or resize it?
http://www.facebook.com/pages/GTD/104839016256119?sk=app_168848466497060
There are a few things going on here.
The conditional used is a IE conditional directive specifying: if not IE, these are IE only so it is a bit backwards
The conditional is incomplete the end comment happens immediately after the first condition.
Try This:
<!--[if IE]>
<style type="text/css">
#hidepopup {
display: none;
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
#hidepopup {
display: none;
}
</style>
<![endif]-->
Do not use ! because it means not IE and you have extra opening/closing tags for comments. Also you have not declared that it is style. Here is link to help you with conditional comments: http://www.quirksmode.org/css/condcom.html
Your second issue is that you are using jQuery for animating popup. Animations are changing display:none to display: block. So your special condition for IE is overwritten by script.
here:
//transition effect
$(id).fadeIn(2000);
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.
Can we use like this <body class="all" <!--[if IE 7]>class="ie"<![endif]--> >?
I want to keep all CSS in one file.
You could use:
<body class="all">
<!--[if ie]>
<div class="ieOnly">
<![endif]-->
<div id="content">
<p>...</p>
</div>
<!--[if ie]>
</div>
<![endif]-->
</body>
That way the css selector to address IE's flaws/differences is more specific than the normal
#content {/* for non-IE browsers */}
body.all .ieOnly #content {/* for IE */}
...and should override the 'normal' #content rules and will never be applied by non-IE browsers, since there's an element .ieOnly in the selector which is otherwise 'invisible' to them.
Still, strictly speaking, no; you can't do what you propose in your question, though there are alternative approaches.
Short answer: No (at least, not in-line), but why do you need to? :)
Just defined a body { } style in an IE conditional stylesheet, like this:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
And inside there:
body { /* or body.all { */
background: pink; /* Pink is pretty!, or green, whatever */
}
No, you cant specifically comment out an attribute even with IE's conditional comments. But there could be other ways of expressing it.
If you want to add a class to body based on the browser without hacks, you're gonna need to use server-side code and UA sniffing.
i have a problem in display:inline and display:inline-block.......how should i define both in css...i.e display:inline for ie and display:inline-block for ff and chrome....
You can use Conditional Comments to load a CSS file with overrides that will only be loaded by Internet Explorer. For example:
<!-- main stylesheet for all browsers (uses display: inline-block) -->
<link href="main.css" media="screen" rel="stylesheet" type="text/css" />
<!-- overrides for IE 7 and earlier (uses display: inline where necessary) -->
<!--[if lte IE 7]>
<link href="main-ie.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->
<!-- overrides for IE 6 and earlier (uses display: inline where necessary) -->
<!--[if lte IE 6]>
<link href="main-ie6.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->
Here is a good overview of CSS browser hacks:
http://brainfart.com.ua/post/css-hacks-overview/
I guess section 4, 8 or 9 could apply for your case.
IE7 and below doesn't support inline-block. But there's a simple workaround. As an inline-block is - simply put - an element that behaves like a block but aligns as inline, you only need to tell IE it's an inline element with a layout (a IE idiossincracy). So:
.el { display:inline-block; *display:inline; *zoom:1; }
There you have it! Really simple. You may as well use conditional comments and avoid the star hack. I personally use Paul Irish's HTML declaration (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/) and then I target specifically IE7 and below using:
.el { display:inline-block; }
.lt-ie8 .el { display:inline; zoom:1; }
The problem with IE is that it does not properly support "inline-block". Therefore, to compensate for this you have to float the element. The container for the floated elements thus has to to be cleared, using "clear:both" unless everything is a fixed size, such as menu links.
I much prefer figuring out what isn't supported in each browser than writing individual style sheets for each.