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.
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]-->
A known old known problem is that various old browsers both IE 7 (perhaps also IE 8) and FireFox 3.0 ~ 3.6, are the experiencing of very SLOW scrolling down through a webpage whenever a background image img or div with an image has the position: fixed; property.
Having built a site with this feature I noticed that in IE 7 (maybe 8 too) that had a terribly sluggish scrolling experience ruing the good enjoyment of the entire website. All other JQuery effects were also not smooth anymore. Now, as soon as I commented the position: fixed; property of the background image div:img, everything becomes good again.
<html><head>
img#bg {
/* position:fixed;*/
top:0;
left:0;
height:auto;
min-height:100%; /* proportionally fit height (eg panorama images) */
width: 100%;
z-index:-2;
}
</head>
<body><img src="background.jpg" id="bg"/></body>
</html>
Q1: How to make that line conditional? Users with IE7 or IE8 /*position:fixed;*/ and users with IE9 or FF4 position:fixed
Q2: Could anything in my css have triggered the bug except position: fixed? for example should img#bg be written differently?
Some links: MozzilaZine, StackOverflow, LinDesk
Thanks very much for your suggestions and ideas on this browserbug. Much appreciated!
Q1: How to make that line conditional?
For IE older than version 9 there's always a conditional comment override:
<!--[if lt IE 9]>
<style>img#bg { position: absolute; }</style>
<![endif]-->
For Firefox, one way would be to find some hack that distinguishes version 4 from its predecessors, which I can't really think of right now.
Q2: Could anything in my css have triggered the bug except position: fixed?
That and the fact that it's an image. But mostly the fixed positioning. This also happens if you used a background image with background-attachment: fixed, and is a well-known performance issue on those browsers.
Q1: How to make that line conditional?
If you'd rather not to use conditional comments (per BoltClock's reply), a summary of browser-specific CSS hacks can be found on Paul Irish's site.
Q2: Could anything in my css have triggered the bug except position: fixed?
Short answer: Yes, but probably none as much as position: fixed. If removing it fixes your issue, it's your biggest problem.
Slightly longer answer: box-shadow has been shown to cause performance issues. So will IE's proprietary filters. Inefficient selectors are sometimes mentioned, but it's debatable whether they have a large effect.
To profile your code, use the CSS Stress Test bookmarklet to drill down on exactly which selectors are causing your browser trouble. It's great!
Certain pages display terribly in IE generally, what is the best approach to solving these issues?
You forgot to add a doctype, so your page is in Quirks Mode.
Add this (the HTML5 doctype) as the very first line:
<!DOCTYPE html>
and it should look better.
Although, changing the Document Mode manually (using Developer Tools; hit F12), it still doesn't look right. There are evidently other problems with the page.
The most pertinent problem (after escaping Quirks Mode) is this:
<body style="margin: 0; padding; 0;background-color: 4DA2CA;">
Internet Explorer is not showing any background colour because you forgot the # before the colour. (And you have padding; 0, with a ; instead of :)
This will work:
<body style="margin: 0; padding: 0; background-color: #4DA2CA">
But you shouldn't be using inline styles in the first place..
This would be better:
<body>
with CSS in your stylesheet:
body {
margin: 0;
padding: 0;
background-color: #4DA2CA
}
you mean that in IE the Div's are smaller.Thats because in IE css border,margin are included in the width declared.So, if you have given a div width of 100px and a margin of 10px both sides then in IE the actual visible width of this div will be 100-10-10=80px.To solve the problem you can use child css decleration.
Considering our example if you want to show this div 100px width in both the browsers do the following
.mydiv{ /*This deceleration will be understood by all the browsers*/
margin:10px;
width:120px;
}
html>body .mydiv{ /*This deceleration will not be understood by IE browsers so other will override the width*/
width:100px;
}
Using this you can uniform the width of your Divs across both IE and non-ie browsers
Instead of pointing out the reason for each element's different way of rendering in IE, I would strongly recommend not re-inventing the wheel each time you create a new page element.
Even in modern standards-complaint browsers, CSS can be very unpredictable, so it's better to use bullet-proof snippets of code from trusted sources such as
CSS the Missing Manual
CSS the Definitive Guide
CSS Cookbook
Start out with working blocks of HTML/CSS and modify them to your liking and test cross-browser from there. The whole process will be much less frustrating.
i know IE6 is dead,but in china, there are lots of people still using it. so expect someone can do me a favor about this problem.
this is the page.the even line's background color is not the same length, under IE6, which is shorter
the display under IE6. (http://run.xxmn.com/ie6.jpg). the bgcolor displays different from other browers.
the display under IE7,FF,CHROME (http://run.xxmn.com/ie7.jpg). it displays ok.
how to make it under IE6 displays the same result as other browers?
ps:the problem is solved. thanks all the guys.
The problem in IE6 is probably due to negative margins on the views-field-title class (though I don't have IE6 installed to check).
You don't actually need negative margins to achieve the effect you want. So suggest removing them like this:
Remove margin-left: -4px; from #left_cplist .cplist-bg .view-content .views-field-title
Remove margin-left: 5px; form #left_cplist .cplist-bg .views-row
I have it set up in css to have the background an image slightly bigger than the content section so as to have a shadow behind it that repeats in the y direction but in IE it doesn't show the transparency. I have used google to try to solve this problem with no luck having done the image in css.
CSS:
#shadow{
width:854;
margin-left:auto;
margin-right:auto;
text-align:left;
background-image:url(shadow.png);
background-repeat:repeat-y;
}
HTML:
<div id="shadow">
</div>
Any help is greatly appreciated as I at a total loss on this.
If it's possible, you make the png a gif, and everyone is happy.
If that isn't possible, the approach I use is the IE only css behavior.
With a behavior you can link to an htc file, like the one found here: http://www.twinhelix.com/css/iepngfix/
You would then have to add CSS like:
behavior: url(iepngfix.htc)
IE7 supports png transparency.
You could use something like a browser gate (which is an ugly hack) if you'd like to support IE6.
Use selectors in your CSS which IE<7 doesn't support:
html>body #transparent_png {
background: url(gfx/transparent_png.png);
background-repeat: no-repeat;
}
#transparent_png {
/* additional properties here */
}
the html>body #transparent_png style is ignored by IE6. Then, we use the ugly DXImageTransform-filter in a seperate .css file to display the png in IE6 transparently.
But this css should only be loaded if the ie version is less than 7:
html header:
<!--[if lt IE 7]>
<style type="text/css" media="screen, projection">
#import "iefixes.css";
</style>
<![endif]-->
The iefixes.css contains something like this :
#transparent_png {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gfx/transparent_png.png');
}
Unfortunately, this filter does not support repeat-x or repeat-y. But with this gate hack, you could display an ugly dithered gif shadow for IE 6 instead of the nicer png shadow :).
But, there is also a sizingMethod property for the DXImageTransform-filter (see http://msdn.microsoft.com/en-us/library/ms532920%28VS.85%29.aspx), so you could scale the image to the size of its container element:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gfx/transparent_png.png',sizingMethod='scale');
A very nice png fix for IE6 can be found here
I used it and can assure u it works.
It is JS though, but most people have it turned on lately
All the above may work, especially the alpha image loader which is good, vut if you plan on using it and want to rely on it in the future then you are better using another technique.
The best I have found is:DD_belatedPNG.js
it works likke a treeat and is very easy to use.
The problem I have with the others is that there are bugs when you want to use links appearing over the top of the bg. They dont work, without further hacks.