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/
Related
I am fairly new to HTML5 so please bear with me. I have designed a site for someone and when I view it in Firefox or Chrome, all is well, but when I view it in Internet Explorer 10, the nav menu and the picture in the header are moved downward. I have checked the site at http://validator.w3.org/ and it gave me some errors like alt is missing and some other minor things which I believe are irrelevant to what is causing this problem. Is there a way for me to override this with some type of Javascript code or is there some way of just making an IE 10 friendly version of the page in which someone who puts in the url of the page will be redirected to the IE version of the page?
Here is the url of the site: daxxomatic.com
Welcome to web programming and comparability issues. Internet explorer is the largest used web browser and the most horrific browser for web programmers.
You have to live with it and do one of the hacks for dealing with the problem. I would suggest that you follow web standards and check out www.caniuse.com to see if what you are doing can work on IE or Firefox or whatever.
Lastly, test your code in different browsers as you develop a project. That way you deal with small chunks of problems than a big one at the end.
I am trying to make a website for my family's B&B and I don't have much experience with web coding.
This is a website template I bought from the internet, and I didn't have that many difficulties with it until now where I find myself completely stuck to a point where the contents of a specific webpage of the website are not displayed correctly across Chrome Firefox and Internet Explorer, mostly the problem is with IE since the viewing issues between Firefox and Chrome are close to none.
I was told on IRC that this is caused by the CSS not being read correctly from the browsers and that every browsers tend to view pages differently, and therefore I should create a specific css style for IE in order to address this compatibility issue.
Unfortunately though I haven't been able to find out what is causing the issue.
The "container" where those contents (just pictures and texts) are located in the page is called grid_11 and belongs to the grid.css file located in the css folder.
I tried to play with margin, something like
.container_24 .grid_11 {
width:430px;
margin-left: 40px
}
but the result is that the box containing all the contents moves throughout the page along with them.
Here I am at attaching the screenshots of how the page is displayed across the three browsers.
http://imgur.com/mgDYbD3,bZC3wHI,yd6BX8t
And here's the html code alongside with the css http://jsfiddle.net/r5QHW/
This is really getting above my pay grade now. I'd truly appreciate if someone could help me out with it.
Thanks,
Pietro
The question you want answered is one of the below... good luck!
Where is there a list of css property support by browser?
W3schools has lots of ads but is a good resource.
The CSS property support table: http://www.w3schools.com/cssref/css3_browsersupport.asp
The list of all references on their site: http://www.w3schools.com/sitemap/sitemap_references.asp
How do I debug code in a specific browser?
What you want is the Developer Tools. You actually open the page in the browser you're evaluating and then follow the instructions for each browser's developer tools to figure out what broke.
Chrome: https://developer.chrome.com/devtools/index
Firefox: https://developer.mozilla.org/en-US/docs/Tools
IE: http://msdn.microsoft.com/en-us/library/dd565628%28VS.85%29.aspx
I've been trying to figure this issue out for about an hour now. I've asked some friends but they didn't have much luck either.
The problem is with this site: http://tomdwyerdesign.com/
Load it in Chrome and it's fine. Load it in IE10 and it's fine... load it in IE9 and it's not.
It loses a good portion of its css. I've used the html5shiv trick and still it refuses to work.
Another website: http://tomdwyerdesign.com/new
this loads fine and shares almost an identical header.
Anyone know why IE9 won't render this correctly?
IE is going into quirks mode on your new site. Checking with W3 Validator shows a warning that is likely your problem: IE will go into quirks mode if you have comments before your doctype.
Try moving your doctype before the comments, and see if that helps.
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.
Using CSS Style Sheet, HTML, XML
When i run my website, my page was properly displaying in the firefox, but the page was not properly displaying in the internet explorer.
Most of the people using only the internet explorer, but why my web page is not properly loading in the internet explorer.
I have to change the setting of internet explorer?
How to solve this problem.
As others have said, without a link to your site it's hard to tell exactly what the problem is, but if it's a CSS problem in IE6 you could try using the IE7-js library, which will make IE6 fairly standards compliant. Also, you may want to look at this resource for general help with CSS hacking in IE.