I am testing one of my web pages for compatibility in different browsers.
I had some issues with ie8 and so i added well known [if IE] block to the code. This is the code I added.
<!--[if IE]>
<style type="text/css">
.ie-issue{
top:0;
}
</style>
<![endif]-->
But it doesn't rendering in my ie8 and cannot think of a way to get it work. Please help me on getting this done.
If you can't get the conditional to work properly, this is a good work around: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Try !important. I would also specify position:absolute in you [if IE]. Finally, remember, negative numbers work as well (top:-100px;).
Try margin-top instead of top.
Related
I have some a tag that are assigned to class like: class='user-home' and I'm using this css to achieve background image:
.user-options .user-home{
background-image:url('../../img/user-home.png');
background-position:center;
background-size: 14px 14px;
background-repeat:no-repeat;
border: none;
}
And the problem- This is what I'm getting on chrome/mozila/ie11
This is what I'm getting on ie7
What will be the solution? Thanks.
The rule background-size is not supported on ie7. It is recommended to use small images (14X14) and not resize it with CSS rules, this way you're saving traffic and improving your page loading time.
There is a workaround (how-do-i-make-background-size-work-in-ie) but I still think it's better to just resize your image.
That's because background-size is a CSS3 property which isn't supported before IE9...
CSS background-size not working in IE7/8
Only solution i think is to edit image to 14px 14px
The browsers like IE7 do not support CSS3 properties. So you cannot use them otherwise you get these types of results.
You need to change the background-image CSS to this:
.user-options .user-home{
background-image:url('../../img/user-home.png');
background-position:center;
background-repeat:no-repeat;
border: none;
}
and now, edit the image resolutions and change its width and height to 14x14 yourself.
Or if you want to use the current CSS, please go to this website from Google:
https://code.google.com/p/ie7-js/
And from there, include the JS needed to make the IE behave like a standard browser, this is the code:
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js">
</script>
<![endif]-->
This JS will enable almost many of the CSS and HTML attributes. This should be included in head element.
Are you sure it's IE7 not the compatibility view (IE6) anyway background-size wont work with IE7
A way of your question, Earlier I used to use DD_belatedPNG Javascript to fix PNG issues in IE6
you may use one of the following tools to fix all IE issues:
Normalize
ie7-js
respond.min.js
For other HTML5 fixes and Media Query I use excanvas.js and respond.js
Code could be as follows:
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
the picture below describes my current problem. Is there a (css)way to achieve the "Good Browsers" behaviour (like FF) in IE8/9 without JavaScript/JQuery?
Found some old posts from 2008 / 2011, but without any possible solution.
(e.g. Thread1 Thread2 )
Thanks alot!
<!--[if IE]>
<style>
select{
width: 250px;
}
</style>
<![endif]-->
That code works only on IE browsers.
This is a good startingpoint. It doesn't work so well in the demo, but there are solutions in the final comments and the code looks fairly easy to improve upon: http://www.dougboude.com/blog/1/2008/05/Viewing-Option-Text-in-IE7-thats-Wider-than-the-Select-List.cfm
I can see some other question have been raised around this issue but none of the answers fixed it for me.
I have a table which is inside a <div>. In IE7 and above this renders fine and the table can be seen clearly using scroll bars. In IE6 however this renders as a single line (e.g. height of 1px).
Here is the css around these elements.
DIV.ScrollFrame {
overflow: auto;
height: 100%;
}
.DataTable {
border-collapse:collapse;
}
Then the html look like this
<div class="ScrollFrame" >
<table class="DataTable">
//some asp to generate the data
</table>
</div>
Sorry a cannot provide pictures as the data in the table is confidential.
Thank you in advance.
If your solution is to set a fixed height, make sure you serve it for IE6 only. Best practice is to use an IE6 only stylesheet displayed with conditional comments, like so:
<!--[if IE 6]>
<link href="/styles/ie6.css" rel="stylesheet" media="screen, print"/>
<![endif]-->
Alternatively you can use the * html hack, which only IE6 understands.
Hm, i´m not sure, but you can try this for ie6:
* html DIV.ScrollFrame { overflow:scroll; }
I did this layout here: http://www.2xfun.com/
It uses some css3 effects and stuff which are not supported in every browser, but if they dont work its fine.
The thing is that i really tried to keep the essentials working in old browsers.
I didnt use any negativ margins, which i know of make problems in IE 6 etc
But if i look at it in IE 6 the layout gets messy. The elements are completely garbled.
Where did I fail so terribly? I don't need an analysis of all my errors because i know its by far not perfect. But what positioning css directives are so wrong that they cause IE6 to mess everything up?
So my question is:
What properties or combination of properties do cause such legacy incompatibility
are there any good work arounds (css resets, javascript fixes) ?
addendum:
this is how the page looks like in ie6
and after Šime Vidas's javascript fix
and this is how it should look like and looks like in modern browsers
Everything that has position: absolute, put both top and left positions, not just top. Everything that has float AND margin, set to display: inline. That will at least fix many problems. I'd also recommend a reset styling, like Meyer's. Your code looks a bit underdefined for IE6, it's a picky one.
Put this on the page:
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
How does the page look in IE6 now?
Project homepage: http://code.google.com/p/ie7-js/
Getting started: http://www.charlescooke.me.uk/web/lab_notes/ie7_script.html
Here we go..
Add a rule to this effect to your normal stylesheet - #neXib was correct:
.headcontainer, .headbar {
left:0
}
Without that, your site has problems even in IE7.
The above snippet, combined with adding this voodoo magic dust I created fixes the pressing IE6 issues:
<!--[if IE 6]>
<style type="text/css">
.headbar-spacer {
width: 169px
}
.content div.right {
padding-right: 0
}
.content h2 {
margin: -30px 0 0 106px;
width: 535px;
padding: 0 0 12px 0
}
</style>
<![endif]-->
I commented out this:
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c90156b67654829"></script>
It seemed to somehow make IE6 jump the white video container to the top of the window. So wrap that in a conditional comment if need be.
Your site looks like this with the above changes in IE6 (ignoring the low color depth of this image):
Much better!
Improvements you could make:
Try out DD_belatedPNG to fix your .png transparency issues.
Make an image version of the CSS gradient you have on .headbar. At the moment, IE8 does not have a gradient. IE has support for it's own special kind of gradient, you might consider providing those rules (-ms-filter/filter + gradient?).
Redundant point: fix Notice: Undefined index: jsfix in /home/2xfun/html/application/views/vanilla.php on line 13. Obviously you just put that in for testing. I recommend suppressing the PHP error by prefixing the line with #.
Kick IE6 in the face. Twice.
Well it should work in IE, I know IE doesnt support content property anything other that?
The only option is the the content property:
The content property is used with the
:before and :after pseudo-elements, to
insert generated content.
But as you point out, this is part of CSS 3 and is not supported by IE. In the meantime you will need to compensate by using JavaScript.
It is quite possible to solve this without Javascript, using a combination of HTML and CSS. The trick is to duplicate the content added by the CSS in the HTML an IE-specific conditional comment (not shown by other browsers) and use the display CSS selector to toggle when that element is shown. According to MSDN, IE 8+ supports CSS :after and content:, so only IE 7 and below need to use a conditional comment.
Here is an example:
<style type="test/css" media="screen">
.printonly { display: inline; }
</style>
<style type="text/css" media="print">
#maintitle:after { content:" \2014 Site Title";} /* for IE8+ and Other Browsers. sidenote: Can't use &mdash directly in generated content, so using escape code */
.printonly { display:inline } /* For IE <= 7 */
</style>
<h1 id="maintitle">Page Title
<!--[if lte IE 7]><span class="printonly">— Site Title</span><![endif]-->
</h1>
Short of pictures of text — no.
You could try using IE8.js to fix content, which might do the trick. If not, then there's nothing you can do besides background-image's with text
The only way is JavaScript, or CSS3.
Maybe you could tell us what you need to do - then we can help.
Why can't you do it with js?