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/
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 made web page and styled it using CSS3 (gradients, image-border, text-shadow etc.). Our work browser (IE9) totally ruined the look of it. Don't you please know how to fix in css that when browser is lower than IE10, don't use this set of styles but this set of style? Thanks a lot :)
There are differents solutions.
1 IE Conditional Comments in the "head"
ex:
<!--[if IE 8]>
<style type="text/css">
/* css for IE 8 */
</style>
<![endif]-->
<!--[if lt IE 8]>
<link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
2 CSS Rules Specific to Explorer (IE CSS hacks)
IE8 or below: to write CSS rules specificially to IE8 or below, add a backslash and 9 (\9) at the end before the semicolon.
IE7 or below: add an asterisk (*) before the CSS property.
IE6: add an underscore (_) before the property.
ex:
.box {
background: gray; /* standard */
background: pink\9; /* IE 8 and below */
*background: green; /* IE 7 and below */
_background: blue; /* IE 6 */
}
In my opinion the second one is the best way!
You can fix it using this conditional statement
<!--[if lte IE 9]>
// Your css for IE9 and below or
// Perhaps importing a specific style sheet as
<link rel="stylesheet" type="text/css" href="ie9_and_below.css" />
<![endif]-->
you can apply text shadow using
.shadow {
filter: progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);
}
Complete documentation
gradient can be applied as
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
The border-image property is not supported by IE, check: this
you can make it possible using css3pie for you to use a border-image in IE 6-9
In IE8 when I set the border of my input fields like that:
input {
border: 0;
}
There is no border around the input fields like desired, but I would like an standard outline like in Chrome or Safari whenever the focus is on an input. Now, I could add a border via pseudo class :focus, but I do not want that pseudo class apply to browsers that already have a standard outline.
How can I accomplish that?
EDIT: I just found out that :focus is not working in IE8. I have to add a DOCTYPE to get it working.
To target ie8 specifically you can use this method
Add an ie8 class to your html tag and inherit from that.
On your html tag
<!--[if IE 8]> <html class="ie ie8 lte9 lte8"> <![endif]-->
Your css
.ie8 input:focus {
//your styles
}
You can include the style in a conditional CSS stylesheet:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Then in that external stylesheet, include your CSS like:
input:focus { border: 1px solid golden; }
focus should work in IE8. Add the doctype and see.
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] {}
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