So while trying to help a friend with there wordpress website I noticed something very strange in regards to the "inspect element" tool in IE vs other browers. When I inspect the title of his blog post with IE's inspect element tool it proceeds to say that the element I'm inspecting is an h1 tag. But when I inspect that same element in other web browsers like firefox and chrome, their inspect element tools say its an h2 tag. What the heck is going on? Is it something wrong with IE? I don't understand how two different browsers come up with two differents answers for HTML elements. Thanks for any input.
Each browser use different rendering engines so expect that each browser will render pages differently.
IE uses an engine called Trident: http://en.wikipedia.org/wiki/Trident_(layout_engine)
Safari use Webkit:http://en.wikipedia.org/wiki/WebKit
Google's Chrome now use Blink: http://en.wikipedia.org/wiki/Blink_(layout_engine)
Firefox uses the Gecko: http://en.wikipedia.org/wiki/Gecko_(software)
The only thing I could come up with is that it may be conditional based on which browser you're viewing the page from, and that IE is not the best anyway.
Related
I was viewing a page in firefox/chrome.
I found that major chunks of information are not being rendered.
What I found is - The browsers are completely ignoring some of the html tags which are recently introduced.Example: <title>within the body ,<aside>,<section>...
I want to know is there a way to find out which tags are ignored by the browser, and if possible, why?
Check http://html5test.com/
It shows what elements are supported in your browser (or specific versions of different browsers).
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.
The code below render differently between firefox and google chrome (opera and safari render similar to google chrome)
I am not sure what is the cause of it, but I would prefer the firefox rendering, because the parent node of the tree structure spread from the middle rather than top.
Could you point out what I have done wrong here?
Many Thanks & Kind Regards
Andy
The code is located
https://docs.google.com/document/pub?id=1OAsOb-tV29KsNfSQXmgAdvv_2Fac_H8dVm0ktoMT8a8
To see a preview http://jsbin.com/ufamo5/edit
I can't quite tell, but it's probably due to a tag closed improperly, and being interpreted slightly differently by the html parser in Firefox and Chrome
Hey guys, i have recently created a HTML page but it is appearing differently in Mozilla Firefox and Internet Explorer. I have uploaded the page on ripway. Here is the URL http://h1.ripway.com/gurusmith/My%20site/Index/index.html
Please watch the page in both Internet Explorer and Mozilla Firefox and after watching you will find that the page is appearing fine in Internet Explorer but not in Mozilla Firefox. Can anyone tell where i have made the problems. If anyone can edit the source code and post the correct source code here which works fine in both the browsers then i will be really thankful to you.
Sorry, i can't post the source code and the outputs due to restrictions but i have given the link above for the page. So please do visit it and help me.
Your page is not even remotely valid HTML. For one thing, you have two body elements.
Check out W3C Validation of your page for more problems.
If a browser gets invalid HTML it makes its best guess at what the DOM should be (as opposed to a deterministic interpretation). Since browsers are designed by independent teams, these interpretations will differ. Then, when it comes to applying CSS, variations are bond to occur.
Get your HTML in order and then see what happens.
Older versions of IE are known to display pages slightly differently than most "modern" browsers. A quick Google search turned up the following lists of common differences:
http://www.wipeout44.com/brain_food/css_ie_bug_fixes.asp
http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/
i am making a menu for my school assignment and it needs to work in both IE and firefox.
I am done the menu and it works perfectly in firefox, but i am having trouble getting it to display properly in IE
A part can be found over here: http://tutudragon3.info/ie-trying.php
When i click the home image in firefox, a dropdown sort of thing pops-up with 2 images with text "d" and "d". In firefox, there is no space between those dropdown images, but when i try it in IE, I see a small blank space between them.
how could i fix this (delete that space) please. I tried many different things but it didn't work.
Using IE8 by the way.
Before worrying about any specific bugs:
Use a Doctype that triggers standards mode, as quirks mode inconsistencies are a nightmare to deal with. If in doubt, use HTML 4.01 Strict: http://www.w3.org/QA/2002/04/valid-dtd-list.html
Deal with machine detectable errors
If you have done the things David mentions, and still see some differences, you might want to take a look at ie7.js, it is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser.
I don't find any problem in IE7. But if you are having the problem, try giving display:block; to the <A> and <IMG> tags. The problem should vanish.