I'm using .class1.class2 .class3 selector, where .class1.class is a combination selector and .class3 belongs to a descendant. works fine in FF, but on IE7, it doesn't work.
In the css below, the second style is always shown in IE. any solution?
<STYLE type="text/css">
.test1.test2 .test3{
width:90px;
height:100px;
}
.test4.test2 .test3{
width:900px;
height:100px;
}
</style>
<div class="test1 test2">
<button value="test" class="test3"/>
</div>
just for let you know, what you are using is called Multiple Classes method! IE7 need to use this form:
div.class1.class2 div.class3 {}
IE6 don't suppurt this you can hack it, read the solution
http://www.quirksmode.org/css/multipleclasses.html
hope this help!
That style should work perfectly on IE7+. As Pekka said in the comments there is a small problem with IE6. I'm guessing that you're not using the strict doctype perhaps?
In which case, you deserve everything you get :-o
Just add <!doctype html> to the start of the HTML file and everything should be fine.
Use Conditional Comments , this issue has been raised too many times here is an example :
<!--[if lte IE 9>
<style type="text/css">
.test1,.test2,.test3{
width:90px;
height:100px;
}
.test4,.test2,.test3{
width:900px;
height:100px;
}
</style>
<![endif]-->
This means all IE family browser less than version 9 are going to read in this style, or you can use style with # to be read by IE like this :
<STYLE type="text/css">
.test1,.test2,.test3{
#width:90px;
#height:100px;
}
.test4,.test2,.test3{
#width:900px;
#height:100px;
}
</style>
Related
is there a way to add a css which will work only for IE8 in compatibility mode, but will not if IE7 or IE8 or (obviously any other browser) ???
My CSS is trivial
h1 {
font-size:14px;
}
but that must font-size must only work on IE8 (compatibility mode)
NOTE:
I know how to write a conditional statement to spot IE8... but I don't know how to do it for IE8 compatibility mode.
CSS hack for IE8, like this:
h1{font-size:14px\0;}
Unfortunately there is no way to apply to just IE8 Compatibility mode. However, IE8CM will display exactly the same IE7, because it is an IE7 emulator. You could use something like the following code, but it will also apply to IE7:
<!--IE9 compatibility mode & IE8:-->
<!--[if IE 8]>
<p>Welcome to Internet Explorer 8.</p>
<![endif]-->
<!--IE8 compatibility mode & IE7:-->
<!--[if IE 7]>
<p>Welcome to Internet Explorer 7.</p>
<![endif]-->
Is there any reason that it can't also apply to IE7? Any hack that you're doing that would fix a problem compatibility mode in IE8 should also be needed in IE7.
You should add code below before html tag in your code:
<!--if IE 8>
<html class="IE8">
<[endif]-->
<html>
...
</html>
and in CSS file, do this:
.IE8 h1{
font-size:14px;
}
This will work only for IE8.
use css hack :
body{
color:red; /*every browser*/
color:blue\9; /*IE8 or below*/
}
Compatibility mode unless there is a modified DocType renders as IE 7 or less, so if it is in compatibility mode, it will often render also in IE 7.
However, you can still do it: if you check the user agent string, you can differentiate it that way. IE 8 and newer include the word 'Trident' in the user agent string, so if it is rendering as IE 7 or less, but the word Trident does show up in the uagent, then it must be in compatibility mode.
While most people would not find this necessary, I did have reason for it. In one of my previous projects, it was needed to tell people to use the compatibility mode option until we were able to modify our applications to handle the newer browsers. Not everyone reads instructions, so a message that pops up is often the best way to tell people what to do.
This modified version of a script I wrote and put in the head of the document did the trick:
<script language="javascript" type="text/javascript">
if (!!navigator.userAgent.match(/MSIE/i)) {
ie__mode=' not_ie_compatibility_mode';
(!!navigator.userAgent.match(/Trident/i)&&document.documentMode<8)?ie__mode=' ie_compatibility_mode':''; }
</script>
So then the javascript variable ie_mode would be set to either: "ie_compatibility_mode" or "not_ie_compatibility_mode"
If you were to add document.documentElement.className+=ie__mode; to the script so as to add a css class to the document itself like so:
<script language="javascript" type="text/javascript">
if (!!navigator.userAgent.match(/MSIE/i)) {
ie__mode=' not_ie_compatibility_mode';
(!!navigator.userAgent.match(/Trident/i)&&document.documentMode<8)?ie__mode=' ie_compatibility_mode':'';
document.documentElement.className+=ie__mode; }
</script>
Then you would be able to use css in the document for either mode. Example styles:
<style type="text/css">
html { color:#000000; }
/* default settings: start with all items 'off' */
.hide_element { display:none; visibility:hidden; }
.ie_compatibility_mode .display_compatibility_mode { visibility:visible; display:block; color:#FF9900; }
.not_ie_compatibility_mode .display_not_compatibility_mode { visibility:visible; display:block; color:#666666; }
</style>
and in the body you could then do this:
<body>
If you are using internet explorer there will be more here:
<br><br>
<script language="javascript" type="text/javascript">
if (document.documentMode) document.write("which ie mode: "+document.documentElement.className);
</script>
<br><br>
<div class="hide_element display_compatibility_mode">
This is in compatibility mode. [this should show up in orange]
</div>
<div class="hide_element display_not_compatibility_mode">
This is not in compatibility mode. [this should be show up in blue]
</div>
</body>
Here is the complete working page with all the parts put together:
<!DOCTYPE html>
<html>
<head>
<title>HTML Class Setting / Detect Compatibility Mode Example - Jeff Clayton</title>
<script language="javascript" type="text/javascript">
if (!!navigator.userAgent.match(/MSIE/i)) {
ie__mode=' not_ie_compatibility_mode';
(!!navigator.userAgent.match(/Trident/i)&&document.documentMode<8)?ie__mode=' ie_compatibility_mode':'';
document.documentElement.className+=ie__mode; }
</script>
<style type="text/css">
/* default settings: start with all items 'off' */
.hide_element { display:none; visibility:hidden; }
.ie_compatibility_mode .display_compatibility_mode { visibility:visible; display:block; color:#FF9900; }
.not_ie_compatibility_mode .display_not_compatibility_mode { visibility:visible; display:block; color:#0000FF; }
</style>
</head>
<body>
If you are using internet explorer there will be more here:
<br><br>
<script language="javascript" type="text/javascript">
if (document.documentMode) document.write("which ie mode: "+document.documentElement.className);
</script>
<br><br>
<div class="hide_element display_compatibility_mode">
This is in compatibility mode. [this should show up in orange]
</div>
<div class="hide_element display_not_compatibility_mode">
This is not in compatibility mode. [this should show up in blue]
</div>
</body>
</html>
The following selector is declared in external stylesheet
p:first-letter
{
color: red;
}
But it doesn't make the first letter in <p> element turn red. It does work when this is declared in internal css.
Yes it can.
What you wrote should work just fine; are you sure you are linking to the external stylesheet correctly?
This works perfectly fine for me in Firefox 3.6.x:
external-selector.htm
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="external-selector.css" type="text/css">
<style type="text/css">
p { color: blue; }
</style>
</head>
<body>
<p>Paragraph!</p>
</body>
</html>
external-selector.css
p:first-letter {
color: red;
}
output
I had this problem as well, and after over an hour of messing with Firefox I figured out that it's the InvisibleHand addon that is causing this problem for me. When I disabled it, the problem went away.
I have emailed their info email address asking them to fix the bug.
it seems any other CSS is conflicting.
try if it work
p:first-letter
{
color: red !important;
}
I had the same problem described here. I knew the external stylesheet was being applied because I could see other styles being applied. After reading Heptite's answer I decided I'd try updating Firefox. This fixed the problem.
So, perhaps this was a bug that got fixed in the latest Firefox (v39.0)
.sample{
height:15px;
width:15px;
margin:10px;
padding:10px;
float:left:
/* this one apply in ie only */
border:1px solid #fff;
/* this one apply in ie only */
}
I would recommend using an entirely separate IE-specific stylesheet, to isolate all of the nasty IE hacks you use. Then, in your HTML, you can use a conditional comment to load that stylesheet for IE only.
HTML
<html>
<head>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/css/ie-hacks.css">
<![endif]-->
</head>
<body>
<!-- ... --->
</body>
</html>
ie-hacks.css
.sample{
border:1px solid #fff;
}
Use a conditional comment in the head of your HTML document.
<!--[if IE 6]>
.sample {border:1px solid #fff;}
<![endif]-->
check out "conditional CSS comments"
http://www.quirksmode.org/css/condcom.html
You can add !ie after the style declaration, e.g. .sample {border:1px solid #fff !ie;}. This works on IE 6 and 7, but doesn't work in 8, unless you trick it into IE7 compatibility mode using <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" > (just make sure this appears before the CSS).
The cleanest solution though, is to include am IE-specific CSS file.
If you need to make more changes, and to keep your pages clean, I would recommend using a separate stylesheet for IE.
<!--[if IE]>
//place link to IE stylesheet here.
<![endif]-->
Then make the change inside of the IE stylesheet.
you can simply do the following give some charcter like # or so before it. Firefox ,chrome and other browsers ignore that line but IE executes that.
Give that line at the end of your css so that it will take care. Most of the developers use this hack for margin, padding issues in IE browser
.sample{
height:15px;
width:15px;
margin:10px;
padding:10px;
float:left:
/* this one apply in ie only */
border:1px solid #fff;
# border:2px solid #fff;
/* this one apply in ie only */ for ie it treats as 2px.
}
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.
Has anyone been able to succesfully use the IE CSS hack #IEroot? I stumbled upon it from this article but it doesn't seem to work for me.
I'm trying to fix/hack the inline styling bug to produce li inline blocks
#featured li {
margin:0px;
padding:0px;
width:317px;
height:310px;
display:inline-block;
border-left:1px #bdbdbd solid;
}
#IEroot #featured li {
display:inline;
}
Any help would be greatly apperciated, thanks.
IT DOES WORK, exactly as described, EVEN in IE8, and is actually a pretty smart CSS hack to get around IE specific bugs.
You MUST swap out the DOCTYPE line for a REAL DOCTYPE though first.
Here is the code from the link, tweaked to be a working sample.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
/* all browsers make border red */
#IE { border : 2px solid red; }
/* all browsers see this, but only IE thinks #IEroot exists as an element and makes border blue */
#IEroot #IE { border-color : blue; }
</style>
</head>
<body>
<!--[if IE]>
<div id="IEroot">
<![endif]-->
<p id="IE">This browser is IE. (red in all, blue in IE)</p>
<p id="notIE">This browser is not IE.</p>
<!--[if IE]>
</div>
<![endif]-->
</body>
</html>
I'm using a beta of IE8, and the example on the page that you are referring to does not work. The live demo also doesn't seem to take IE8 in count.
These kinds of hacks are clever, but I'd advice you to stay away from it.
Whenever you encounter differences between browsers, there are always alternative ways to do the same thing in such a way that it works for all browsers.
I've made more websites full of CSS than I can count, and I never ever resort to browser-specific code, especially not the kind that exploits bugs in specific versions of browsers. They solve a tiny problem today, but give you twice the headaches tomorrow, and are a bitch to maintain.
If you insist on using such a hack, make sure to add a comment like this:
/* >>>>>>> BUTT-UGLY BROWSER HACK! FIX ME!!!!! <<<<<<<< */
#IEroot #featured li {
display:inline;
}
:-)