While fixing some browser compatibility issue I faced a really confusing problem like the application is running well in Firefox 28,29 etc, chrome and IE 9. But when I try to make it run in IE 8 it is taking some property like : sizzle-1398717162242="[object Object]".The alignment is also breaking. Is this because of that extra added property? Please help.
You haven't included very much information on what is actually breaking except the alignment but if you are using some new tags or features you can go to http://caniuse.com and check what browsers and versions they are supported in.
Related
on a website I am working on I have problems with an rendering issue which I can't figure out.
I've already played with margins, positioning, z-indices and so on to get it away but nothing of that helped.
It only occurs in IE8 (under Windows XP, don`t know if on newer OS also). I know IE8 is a bit deprecated, but because the rest of the page is displaying fine with it I would also like to support it, since some of my visitors may have installed it.
If you take a look at the page you can identify the issue very fast when using IE8:
http://kunden.tommy-computer.at/fsv_noetsch/
Here is what the menu headers look like in modern browsers like FF/Chrome/Opera/IE>8:
And here is what they look like in IE8 (wrong):
How can I get rid of it. Please help, can`t figure it out why this happens. Thank you very much !
You are using the new html doctype and I noticed you are also using at least one html 5 element article. IE 8 won't recognize that element, or anything related to html 5. You need to use javascript to fix IE by using a script called html5shiv.
What this will do is inform IE of the new elements so they can be styled.
The website I'm working on is currently working fully on latest chrome which is what I'm using, but when I use tools like IE NetRender to check its compatibility with older IE versions, the site comes up plain, with no styling AT ALL!
However, IE8 is on a completely different level. The site is looking almost as good as it's on chrome/firefox/whatever.
I tried using IE9.js, modernizr, IE Hacks, everything - but nothing worked.
Somehow it all seems to take effect only on IE8+.
It's as if IE7- don't even load the stylesheet.
I also checked my code for errors in the CSS/HTML markup but all of the errors point at the IE css hacks.
What could possibly be the cause to this? I'm literally frustrated with it.
The site (just a development page) is http://kanjiman.0zed.com/
Any help will be MUCH appreciated.
Please try to render the page using IE NetRender and see what I'm talking about.
P.S; I did try to Google/search for a solution - but in none the situation was as bad as mine.
EDIT:
The problem was IE9.js - I found this out thanks to Fabio's answer.
Whether you want to keep it or not is up to your project requirements and your priorities.
I personally am going to keep it since as both Rob / Felis commented, IE versions 6/7 are DYING! I'd rather provide a better user experience for now rather than supporting and spending more time with older browsers.
Also, this is only a matter of about 3 lines, so if your site starts to gain more IE7 traffic (I doubt it will even worth it), it's always changeable.
Thanks Rob, Felis and Fabio :)!
This is what i see in Internet Explorer 7
<style _7="
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}">CSS Stylesheet</style>
this is what should be there:
<style>
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}</style>
For some reason, you are assigning the style as an attribute for the style tag making it useless for internet explorer. Why dont you use css files for styling instead of mixing it with the html source code?
Hope it helps
I am developing the follow website:
http://di20studios.com/2012/royalpack/
All works fine in Mozilla Firefox and IE 8, but Safari, Opera and Google Chrome don't like my display:table-*CSS...
The display:table-* is at header and bottom.
What I want? Continuous background:
Can you enter the website and see this issue in action? How I can solve this?
Check this out, I believe you will find your problem is similar.
This is an unconfirmed webkit bug. My only suggestion would be to make sure you are using an HTML5 doctype:
<!DOCTYPE html>
From John Resig:
What’s nice about this new DOCTYPE, especially, is that all current browsers (IE, FF, Opera, Safari) will look at it and switch the content into standards mode – even though they don’t implement HTML5. This means that you could start writing your web pages using HTML5 today and have them last for a very, very, long time.
Also, I might suggest you NOT use this method (display:table-*) unless it is the ONLY solution (which is never :P). There are many known issues with this method, one being that it is not supported in IE7.
A plausible solution would be to use floating to achieve this. You will need to change the transparency over the images for the repeat-x to overlay properly. I edited the images so you can see a working example. As long as you MAKE sure to clear after the header-container, you shouldn't run into any issues using float. PS, this works in IE7+ :]
Can you enter the website and see this issue in action?
If the question is as above, then my answer is: Yes, yes I can. I am using Google Chrome 18.0.1025.162 on Linux.
Please check out this snippet of my site.
http://jsfiddle.net/TmnPV/
The logo is made up of the 'circle1' and other div tags in the same html sections. It doesn't show up on jsfiddle either and it looks different on every browser.
On chrome = shows all
On firefox = no logo shows and bottom text under input field is larger
On safari = no logo shows
What can I do?
This is called, umm... , welcome to wild wild world of web. Every browser vendor parses html/css/javascript differently. Some are lenient, some are strict. (Chrome Vs. Opera). Some have different Box model, some have standard operational behavior, some tend to do their own thing.(Opera Vs. IE6)
Answer to different renderings : You have to hunt down each and every little quirk. One by one.
Welcome.
You'll need to adjust your styles for older browsers if you plan on doing alot of css3 transforms.
IE 6, 7, and 8 just don't have the ability to read those styles.
Even on Firefox, depending on the version, you'll run into various spacing issues since the rendering engine is different than Chrome (and Safari).
For using html5 and css3 in older IEs you can (sparingly) use polyfills, which duplicate the effect using javascript. You can see a list of available polyfills here:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Quirksmode is a great resource for checking compatibility: http://www.quirksmode.org/compatibility.html
I would highly recommend the Firebug add-on for Firefox to see where the extra spacing, etc is happening.
When you run into a specific issue with a specific browser that you can't figure out post a question here. It's much easier to help with one bug than just general browser problems.
That's mostly because you are using code to work with one browser. Different browser uses different code renderer. It's hard to make everything look the same, even tho Internet explorer is the worst, other browsers have different features. Opera has most of the HTML5 form features, that no other browser supports so far, but Chrome and Firefox supports the most of the HTML5 attributes. Hope this helps understand the reason why.
I'm having some problems with a certain piece of code which sits in my site; this error only occurs in Internet Explorer 7.
Rather than post all my HTML/CSS markup here I have put up a version of the site here.
As you can see I have "Widgets" in columns, for some reason IE7 adds an extra space under the Widget Header while FF displays it fine without any space.
This error does not occur in IE8, FF3, Opera, Safari or Chrome.
Can anyone suggest why this occurring and if possible, a fix?
Thanks in advance!
Add this css to wgt-wrap and it should behave.
zoom: 1
Google for hasLayout for explanation.
[EDIT] This discussion provides more insight into this IE bug. Why does Internet Explorer need the "hasLayout" flag?
Unfortunately IE 7 doesn't run very well on Ubuntu so I'm unable to reproduce your error, but have you tried resetting your CSS with a stylesheet like Reset CSS?
There is also a great site about browser quirks that you might want to have a look at.
Did you start by zero'ing out all of your element by doing a CSS reset? I see you have a few different elements in your div, it's possible that one of these has a default marin in IE7 that is throwing everything out of wack...