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]-->
Related
I am testing css with conditional comments on internet explorer 9 using emulation mode, however it seems to render the css on screen as text. why is this happening?
<!--[if IE]>
.path2 {
font-weight:300;
}
<![endif]-->
Because conditional comments are rendered as HTML, not CSS. So if you want styles, you have to add a style tag:
<!--[if IE]>
<style type="text/css">
.path2 {
font-weight:300;
}
</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);
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 with displaying a set height in ie.
In my css I have set a height for my sidebar div as 2150px; which it displays fine in firefox but does not display the full height in ie.
How can I get ie to display the height I have set in ie?
Thanks in advance
The source code is below
#sidebar_newspr{
width:160px;
min-height:2150px;
margin-top:1px; margin-right:2px;
border-right-style:solid; border-right-color:#900; border-right-width:1px;
float:left;
}
#sidebar_newspr a{
text-decoration:none;
color:#FFF;
font-size:12px; font-family:Verdana,Arial,Helvetica,sans-serif;
}
#sidebar_newspr a:hover{
color:#900;
}
This is a bit of a shot in the dark because you didn't really specify which versions of IE you're testing it in. Nevertheless, min-height requires IE7 and IE8 to be operating in Standards Mode. To enable Standards Mode, you need to use a strict !DOCTYPE.
From the documentation:
In Internet Explorer 7, the min-height/max-height attributes apply to floating and absolutely positioned block, inline-block elements, and some intrinsic controls. They do not apply to non-replaced inline elements, such as table columns and row/column groups. (A "replaced" element has intrinsic dimensions, such as an img or textArea.)
In Internet Explorer 7, this property is enabled only under the strict !DOCTYPE.
min-height in IE6 applies only to th, td and tr elements.
Try to use conditional comments:
<!--[if lt IE 9]> //will target IE less than version 9
<link href="/directroy/IE.css" rel="Stylesheet" type="text/css"/>
<![endif]-->
To your head tag and use this new stylesheet to define what you want IE to do.
#sidebar_newspr{
width:160px;
height:2150px; /*change to just height*/
margin-top:1px; margin-right:2px;
border-right-style:solid; border-right-color:#900; border-right-width:1px;
float:left;
}
You can also use more than one Conditional comments to target different versions of IE.
Like so:
<!--[if IE 8]> //will target only IE 8
<link href="/directroy/IE.css" rel="Stylesheet" type="text/css"/>
<![endif]-->
Then try to set your doctype to strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Might work, if not then I'm sure someone else has another idea :)
Some versions of IE dislike min-height, I try to tend to avoid it if possible.
As a quick solution that wont weigh your page down like an IE only style, simply state height:2150px; min-height:2150px; Browsers that support min-height will take that, while the ones that don't support it will simply ignore it.
On this page: http://catonthecouchproductions.com/fish/fishing-trips.html in IE the font is much larger and is cutting off the page. I have a simple:
<!--[if IE 7]>
<style type="text/css" media="all">.borderitem {
border-style:solid;
}
p.trip-includes-text,ul li{
font-size:10px;
}
p.about-text{
font-size:11px;
}
</style>
<![endif]-->
If conditional to change the font but I cant get it to change. As well as the includes box on the bottom left, it is being cut out.
It's not the font, it's the size of the box that contains the text that IE has changed. I've had this before and making the box bigger (with margins or padding) makes it work ok.