Width not applying for class container in IE 9 - html

I am trying to apply width for .container class but ie is not taking any changes of css.If any body have any idea let me know.Bellow is my code.
<!-- [if ie 9]>
.nav > li > a{
padding-left: 20px !important;
}
.container{
max-width: 1350px !important;
width: 1350px !important;
}
<![endif]-->
My website link

Conditional comments are meant to be used in the html markup, not the css. (See here for usage)
There are hacks for css to target ie9, such as as /9 or ... this:
/* target Internet Explorer 9 and Internet Explorer 10:*/
#media screen and (min-width:0\0) {
/* ie9+ code here */
...
}
Check this example FIDDLE in IE9+ and other browsers

Related

CSS target internet explorer & screen width

I am trying to add a custom style for only internet explorer but it needs to be different for different screen sizes.
To only target IE I'm using this.
#media screen\0, screen\9 {
.site-logo{
max-width: 150px;
}
}
To then add a browser width I've tried this but it doesn't work:
#media screen\0 and (min-width: 59.6875em){
.site-logo{
max-width: 300px;
}
}
This may be easy but I cannot figure it... thanks in advance
You can use the property IE hacks instead
#media screen and (max-width: 59.6875em) {
.site-logo {
color: red\9; /* IE6, IE7, IE8, IE9 */
/* or this */
color: red\0; /* IE8, IE9 */
/* or this */
color: red\9\0; /*Only works in IE9*/
/* every browsers */
color: red
}
}
<div class="site-logo">text</div>
Changed min to max for demo purposes

Negative margin-bottom in IE9+ allows scrolling too far

Let's consider this fiddle (putting it on JSBin so it works in IE8):
http://jsbin.com/EpuboseG/1/edit
HTML:
<div id="outer">
<div id="inner">
<div id="notVisible">
I am not visible in all browsers (this is what I want)
</div>
1<br>2<br>3<br>4<br>5<br>
6<br>7<br>8<br>9<br>10<br>
11<br>12<br>13<br>14<br>15<br>
16<br>17<br>18<br>19<br>20<br>
</div>
</div>
CSS:
#outer {
overflow-y: scroll;
height: 150px; /*smaller than contents */
background-color: yellow;
width: 400px;
}
#inner {
position: relative;
top: -30px;
margin-bottom: -30px;
background-color:red;
}
#notVisible {
height: 30px; /* due to "top" in #inner I am invisible */
background-color: lime;
}
I have a negative margin-bottom in #inner which is compensated by the same negative top both of 30px. The result in all browsers is that the top 30px of #inner are invisible which is good.
Why I do have margin-bottom:-30px; top:-30px? In order to hide the top 30px of the inner div, and shift everything else up (as if the top 30px of the inner div never existed).
However the issue is that when I use the scrollbar, in IE9+ (IE9,IE10,IE11) I can scroll too far - at the bottom I can see a 30px empty yellow thing. This is not the case in IE8, Firefox, Chrome, Safari, Opera.
Basically any negative margin-bottom provokes this kind of behavior for me.
Is there any workaround for that?
Edit:
It seems that when I remove margin-bottom: -30px; but keep top: -30px, then the roles are switching, i.e. I see yellow background everywhere except IE9+.
You could have conditional statements for IE9, 10 and 11:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"> // For IE10+
<style>
//rest of the styles
</style>
<!--[if IE]>
<style> //IE9+ specific styles here
</style>
<![endif]-->
<!--[if lte IE 8]>
<style> //IE8 and under specific styles here.
</style>
<![endif]-->
It'd add a few more lines of code, but it works. The meta forces IE10+ to adopt IE9 behaviour, since IE10+ doesn't support if statements anymore. The first if statement targets IE in general, and the second specifically targets IE8 and below. If the browser is IE9+, it'll ignore the second statement and use the styles from the first statement. If the browser is IE8-, it'll use the styles in the second statement. All other browsers ignore the if statements and use the original CSS.

Weird gaps showing up under header when loaded in IE 9

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.

IE7 does not understand display: inline-block

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] {}

Chrome and Safari Hack

I have the following style:
table.jqTransformTextarea td#jqTransformTextarea-mm textarea{
margin:0;
}
This works as expected in Firefox, Opera, Internet Explorer 7,8 and 6.
However, to make it work in Chrome and Safari I need to do:
table.jqTransformTextarea td#jqTransformTextarea-mm textarea{
margin:10px 0 0 10px;
}
How can I set this style to Chrome and Safari only?
I would prefer not to use JavaScript (or jQuery) to get this effect, and get the solution with CSS only, or HTML (but I don't know if there is a tag like: <!--[if IE]> that selects this two browsers).
Just solved my own question:
#media screen and (-webkit-min-device-pixel-ratio:0)
{ table.jqTransformTextarea td#jqTransformTextarea-mm textarea { margin:10px 0 0 10px; } }