Can someone please help me get my head around this bug? With Firefox its working fine but with Internet Explorer 7 its not. It seems not to understand the display: inline-block;.
html:
<div class="frame-header">
<h2>...</h2>
</div>
css:
.frame-header {
height:25px;
display:inline-block;
}
The IE7 display: inline-block; hack is as follows:
display: inline-block;
*display: inline;
zoom: 1;
By default, IE7 only supports inline-block on naturally inline elements (Quirksmode Compatibility Table), so you only need this hack for other elements.
zoom: 1 is there to trigger hasLayout behaviour, and we use the star property hack for setting the display to inline only in IE7 and lower (newer browsers won't apply that). hasLayout and inline together will basically trigger inline-block behaviour in IE7, so we are happy.
This CSS will not validate, and can make your stylesheet messed up anyways, so using an IE7-only stylesheet through conditional comments could be a good idea.
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
Update
As nobody uses IE6 and 7 anymore I will present a different solution:
You don't need a hack anymore, because IE8 supports it by itself
For those who must support those stone age browsers before IE8 (It's not that the IE8 is that old, too cough):
For the account of IE version control, use some Conditional Class in <html>tag like Paul Irish states in his article
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
By this you will have different classes in html-tag for different IE Browsers
The CSS you need is as follows
.inline-block {
display: inline-block;
}
.lt-ie8 .inline-block {
display: inline;
zoom: 1;
}
This will validate and you don't need an extra CSS file
Old answer
.frame-header
{
background:url(images/tab-green.png) repeat-x left top;
height:25px;
display:-moz-inline-box; /* FF2 */
display:inline-block; /* will also trigger hasLayout for IE6+7*/
}
/* Hack for IE6 */
* html .frame-header {
display: inline; /* Elements with hasLayout and display:inline behave like inline-block */
}
/* Hack for IE7 */
* + html .frame-header {
display: inline; /* Elements with hasLayout and display:inline behave like inline-block */
}
IE7 does not support 'inline-block' properly, more info here: LINK
Use can use: 'inline' instead.
What exactly are you trying to achieve? Make us an example and put here: http://jsfiddle.net/
use inline, it works with this kind of selectors for list items:
ul li {}
or to be specific:
ul[className or name of ID] li[className or name of ID] {}
Related
I have a problem with IE8, so I need to apply some css only if browser is not IE8
In html I can do it using
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
But I want to filter this using CSS
Is there a way where I can instruct browser apply these styles if its not
IE8 ?
For example, how can i make this css not have any impact in IE8?
#font-face{
//some css
}
Conditional comments would work (<!--[if lte IE 8]><stylesheet><![endif]-->), but if you want to do it all in the stylesheet, there is a way:
body {
color: red; /* all browsers, of course */
color: green\9; /* IE only */
}
The important thing here is the "\9", which has to be exactly "\9". I'm not clear on exactly why this is.
EDIT: The \9 hack isn't enough by itself. To exclude IE9, you also need the :root hack:
:root body {
color: red\9; /* IE9 only */
}
Other browsers besides IE might support :root, so combine it with the \9 hack if you're using it to target IE9.
IE6
Lastly, we have the underscore hack, which most designers are familiar with by now. Rather than the * symbol, we use the underscore. This will target only Internet Explorer 6.
body {
color: red; /* all browsers, of course */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}
For More Information
http://code.tutsplus.com/tutorials/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters--net-10575
IE 8 doesn't support media queries - you can use that (just insert your CSS inside some broad media query).
Have a look at list of browser-specific CSS hacks here or here.
Below I copy-pasted some concerning IE 8:
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
For only IE of specific version best way is to use conditional comments in HTML, like this (and like you mentioned):
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
But also you can do in this way for IE 8 only:
#media \0screen {
body { background: blue; }
}
More info here : http://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/
I've used something which isn't working at IE7. That's why, I wanted to write some specific css for ie7 and lower only. That's why, I wrote IE comments tag inside html tag. But, it's not working. I wrote at first:
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="sites/css/ie7-and-down.css" />
<![endif]-->
But, it's not working! I haven't ie7. I had to check via developers tool of IE. I thought, at developers tool, comment tag doesn't work. That's why, for checking I wrote comment tag for all IE such as:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="sites/css/all-ie-only.css" />
<![endif]-->
But, still it's not working!! I don't understand why it's happened. This is the website. I need to replace navigation for IE 7. the navigation is defined at my main stylesheet such as:
.modern-menu {
display: block;
}
I need to remove this at ie so that I wrote at my ie specific styleshhet such as:
.modern-menu {
display: none;
}
some HTML CODE of the websites:
<ul class="modern-menu>
<li>abcd</li>
<li>abcd</li>
<li>abcd</li>
<li>abcd</li>
</ul>
style.css:
.modern-menu {
width: 920px;
height: 40px;
width:99%;
font-family: 'SourceSansProRegular',Arial,Helvetica,"Nimbus Sans L",sans-serif;
font-size: 13px;
float:left;
font-weight: normal;
position: relative;
clear: both;
margin-top:0px;
display: block;
}
all-ie-only.css:
#charset "utf-8";
/* CSS Document */
body {
background-color: #0099FF;
}
.modern-menu {
display: none;
}
.nav {
display: block;
}
Can you please tell me Why this comments tag not working?
In the MS IE developer tools, you can set the browser and document version. Maybe you have just set the browser version.
In Internet Explorer 10 HTML conditional comments are not supported when the page is in standards mode.
http://en.wikipedia.org/wiki/Conditional_comment
Make sure that both buttons above the developer tools window display IE 10 to get a similar result as in the original MS IE 7. The only way to really test what happens in IE 7 is to use an IE 7 (for example in a second Windows test installation inside a virtual machine)
I've been scratching my head looking for a solution to this "common gap problem".
Here's what the page's like in Chrome & how the page is like in IE9 https://dl.dropbox.com/u/3788693/Work/example.jpg
Here's my HTML file: https://dl.dropbox.com/u/3788693/Work/01index.html
I've read lots about using and applying
Setting position:relative on the header block.
Setting position:absolute; top:0; right:0
#header img { display: block }
But it just doesn't seem to show any change in IE. Perhaps i'm applying the wrong things in the wrong place? Anyhow, why is it different in IE in the first place?
In your conditional comment for IE you're using
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColElsLtHdr #sidebar1 { padding-top: 30px; }
.twoColElsLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
Removing padding-top: 30px from .twoColElsLtHdr #sidebar1 and padding-top: 15px from .twoColElsLtHdr #sidebar1 will take care of the gap you're seeing.
I am creating a webpage to work in IE7. I want to vertically center a span (which may be several lines long) in a speech bubble. I have achieved this in modern browsers by setting the line-height property of the span's parent to the height of the span's parent itself. The span is then given the display property inline-block, its line-height property is set to something which corresponds to its font size and its vertical-align property is set to middle. However, when I try to view it in IE7, the line height of the span's text seems not to be that of the span and instead is that of the span's parent. It is as if the span did not have the inline-block display property as this is what you would expect if it was inline. As the span element is inline by default, you would expect the inline-block property to work in IE7 but it does not. I have tried applying things like zoom: 1; and the 'cross-browser inline block' suggested by css-tricks but none of this works. I am seriously considering using a table but that is really not something I want to resort to.
You can take a look at the issue at http://jsfiddle.net/sAuhsoj/bWdwE/ (you may want to view the fullscreen version http://jsfiddle.net/sAuhsoj/bWdwE/embedded/result/ using browserlab.adobe.com to see how it looks in IE7)
To target IE7 with a CSS hack, you can add this display rule:
*display : block;
a so written *property is processed by IE7 and lower only.
May i suggest you to use conditional comments on <html> tag?
Personally, i use:
<!--[if lt IE 8]> <html class="ie ielt8 ielt9"> <![endif]-->
<!--[if IE 8]> <html class="ie ie8 ielt9"> <![endif]-->
<!--[if IE 9]> <html class="ie ie9"> <![endif]-->
<!--[if gt IE 9]> <html class="ie10"> <![endif]-->
<!--[if !IE]>--> <html> <![endif]-->
Then i can target any IE browser this way:
.ielt8 .anyClass {
/* any rule here will effect ie7-6 only */
}
.ie8 .anyClass {
/* any rule here will effect ie8 only */
}
.ielt9 .anyClass {
/* any rule here will effect ie6-7-8 only */
}
.ie9 .anyClass {
/* any rule here will effect ie9 only */
}
.ie10 .anyClass {
/* ie10, for future reference */
}
.ie .anyClass {
/* any ie but 10 */
}
That's really easier and you don't have to use hacks, which is better for validation and will exclude any future possible interference.
In your case, you could set up a completely new style for IE7, like
.userQuote .quoteText {
display: block;
line-height: a pixel value;
}
The issue in this particular case is the use of the rem unit on the line-height attributes.
By simply changing rem to em, it solves the issue in IE.
http://jsfiddle.net/bWdwE/2/
According to quirks mode, internet explorer 8 does support table options for display property, but in this example it exhibits very strange behaviour
http://jsfiddle.net/e3cUn/3/
In a normal browser, inner image will be scaled to fit 150x150 box without changing dimension ratio (stretching).
But in IE8, outside box (blue one) will also stretch:
1) Have you seen anything like that? It seems to be related to text-align:center: removing this property fixes the problem, but I do need to center image (in non-ie browsers, at least).
2) If this can't be fixed properly, how can I provide a special display value for IE? I've seen a few examples on the web, like #display: block;, but all of them work up to IE7 only.
edit I know about <!--[if IE 8]> and similar commands to put in html, but I was actually looking for a way to do that in css file. Something like this
display: table-cell;
#display: block;
Second line isn't a comment, it overrides previous value for ie7 and below. (but not ie8)
Thanks!
After adding the bounty, I ended up working around this problem by targeting my CSS to IE8. I was already using Paul Irish's technique of adding classes to the <html> element using conditional comments:
<!--[if lt IE 7 ]> <html class="ie6 ielt9"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7 ielt9"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8 ielt9"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
So all I had to do is add an extra CSS rule for IE 8 and lower:
.img-container { display: table-cell; } /* IE9+ and other browsers */
.ielt9 .img-container { display: block; } /* IE8 and lower */
Coupled with the techniques for vertically centring images, this gives me a nice cross-browser solution.
Use width instead of max-width because in ie8 the actual width of the image will be taken for the table. Check this Fiddle .
Rearrange CSS :
.root img {
width: 130px;
max-height: 130px;
}
Updated
CSS :
.root span {
width:130px;
overflow:hidden;
display:inline-block;
}
.root img {
max-width: 130px;
max-height: 130px;
}
HTML :
<div class="root">
<span><img src=http://www.google.com/intl/en_com/images/srpr/logo1w.png /></span>
</div>
It seems to help if the parent container of a display:table-cell element has a display:table attribute (and a table-layout:fixed), see this example and this related question.
If text-align: center isn't working, can you try the following, instead (unless you have some reason that using the table layout is necessary). This is generally the preferred method of centering any block layout element. Using text-align center is a fallback when necessary, but less reliable in my experience - you can't use it for nested divs, etc.
img {
display: block;
margin-left: auto;
margin-right: auto;
}
If you need to do a custom override for IE, the easiest way is to use an external stylesheet, and supply the following in your <head> section:
<!--[if lte IE 8]>
<link type='text/css' rel='stylesheet' src='link-to-your-source'/>
<[endif]-->
Supply that stylesheet below the ordinary one, and it should override it. If it does, you can always resort to supplying !important tags at the end of statements you need to override (though it's always preferable to avoid that unless absolutely necessary, as it messes up the inheritance for child elements, and you constantly have to remember it). For example:
.root img {
text-align: left !important;
...
}
do you have a doctype tag?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
I had a same problem once with IE, that solved the problem.
Good luck