IE8 not outlining textbox - html

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.

Related

Find the browser version using css

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/

Web page display in IE9 and earlier

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

Different line heights using inline-block on IE7

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/

internet explorer 8 ignores width for 'display: table-cell' element

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

how come my IE conditional statements do not work inside style tags?

I'm trying to use the IE specific conditional statements to alter class settings based on browser type. I was under the impression they could do this but I can't seem to get it working.
Below is a simple example, if the browser is IE the text should be blue, otherwise text should remain red.
"The browser is IE" statement in the body works fine, if I open firefox it's not there, internet explorer.. it is.
What am I doing wrong?
<html>
<head>
<style type="text/css">
.class{color:red;}
<!--[if IE]>
.class{color:blue;}
<![endif]-->
</head>
</style>
<body>
<!--[if IE]>
This browser is IE
<![endif]-->
<p class="class">Color changing text based on browser</p>
</body>
</html>
Firstly your code doesn't work - you should have the css read .color not .class
Second the conditional statements just don't work inside css. So instead write your code such that the conditional is around the IE specific styling.
<html>
<head>
<style type="text/css">
.color{ color:red; }
</style>
<!--[if IE]>
<style type="text/css">
.color{ color:blue; }
</style>
<![endif]-->
</head>
<body>
<!--[if IE]>
This browser is IE
<![endif]-->
<p class="color">Color changing text based on browser</p>
</body>
</html>
Apparently they don't work within the style tag. (see here: http://reference.sitepoint.com/css/conditionalcomments)
It appears you can use them within the head tag, though, and include an external CSS file if it is IE, and hide that css file if it is another browser.
If the 'hack' is targeted on IE6 or older you can however also do as follows:
.color {
color: red;
}
* html .color {
color: blue;
}
Note the "* html" prefix. This is only parsed by IE6 and older. You can also use the "!important" declaration. The particular line would then be ignored by IE6 and older.
.color {
color: red !important;
color: blue;
}
If you have relatively a lot of them, a better practice would be to load an additional CSS stylesheet file using the conditional statement.
you can also do color: red;_color:blue;