I am working on a web application using asp.net. if i runs my web pages in IE7
then design changes little bit compare to IE8.
Can u guide me why this difference comes and what is the solution of this problem.
IE7 and IE8 render pages a bit differently. Simple as that. Just like IE8 renders just a little differently from Firefox, or FF3 from FF2. The bigest cause of differences is wacky CSS, but even with totally standard styles there is a bit of difference. Between IE7 and IE8 there was a big push toward more standards-compliant rendering, including slight changes to the box model and such.
First and foremost, be sure your page is rendering in standards mode. Quirks mode basically means "render this however you feel like", which in IE means "render pretty much like IE5 did". Adding a <!DOCTYPE html> line as the first line in the file should trigger standards mode, if it isn't already there. After that, address the layout differences.
Ideal solution: have a layout that doesn't look like crap if everything isn't pixel perfect. It's not really that hard, particularly since layout tables are effectively deprecated.
Suboptimal but functional solution:
<!--[if IE 7]>
<link href="ie7.css" rel="stylesheet">
<![endif]-->
In ie7.css, put the little tweaks that would nudge stuff into the right positions in IE7. Other browsers tend not to need such tweaks if your CSS is done right.
Related
I've been struggling for days to get my site to look right on IE8 (because stupid banks haven't updated their browsers), and I've narrowed it down a bit.
I'm using HTML5 tags (not supported by IE8) because I just can't stand unnecessary div soup. I'm using the famous HTML5shiv to get HTML elements like section and article to work in IE8. It seems that IE8 is still not reliable when it comes to these tagnames though.
Here is an example:
<html>
<head>
<title>ie8</title>
<script id="html5shiv_script">/*blah blah*/</script>
<style>
section{display:block;}
article{display:block;background:green;}
article.first + article{font-size:72px;}
article.first{color:yellow;}
article:first-child{background:blue;}
</style>
</head>
<body>
<section>
<article class="first">One</article>
<article>Two</article>
<article>Three</article>
<article>Four</article>
<article>Five</article>
</section>
</body>
</html>
Link: http://www.webnotes.xyz/ie8.html
I couldn't find anything about why these two styles are not being applied in IE8:
article.first + article{font-size:72px;}
article:first-child{background:blue;}
I can't deduce anything from this because IE8 is supposed to support these selectors, and in my personal website, I'm switched these selectors with classes and it still would not work.
I couldn't find anything about this by googling. Can anyone explain why these styles are being ignored in IE8?
IMPORTANT EDIT: I just realized this doesn't work in IE9 either.
I had a problem similar to this working on an intranet site of an insurance company. By default, IE will force intranet site into compatibility mode, thus breaking your selectors.
IE makes assumption about displaying intranet sites
(http://someInternalSite/ vs. http://someInternalSite.myCompany.org).
That assumption is that intranet sites work best in compatibility
mode.
Reference
If this is the case then maybe this Stack Overflow answer can help.
Also, I believe network admins can create a group policy to force IE into compatibility mode. Reference
I figured out why the example I posted wasn't working. It's because I forgot to include a doctype. <!DOCTYPE html> at the top makes everything work. I still don't know why the actual site I'm working on doesn't work though because that has <!DOCTYPE html>...back to the drawing board!
I have researched a lot regarding why my JSTree is renderering really badly in IE8, while working perfectly in Chrome. At least one of the problems is IE8's lack of support for the css-property background-size. I am using custom icons to represent folders and files. Each line in the tree structure has a height of 24px in IE8 , when it is 40 in chrome. The latter browser calculates the line height, by automatically wrapping around the icon size, using background-size: auto;. IE8 does not.
I've tried to implement lots of different solutions to make up for IE8's lacking functionality, like:
How do I make background-size work in IE?
IE 8: background-size fix
and the linked-to https://github.com/louisremi/background-size-polyfill
However, due to the complexity of the jstree, and it's default css-files, I am having a really hard time implementing any of these solutions into the existing code, as I am lacking the experience to fully understand the structure of the default.css.
What would be the correct course of action to make this work? I've also searched for compatible .css files for IE8, but found nothing.
An answer which confirms my fears of having to create my own .css from scratch, and understanding it completely, would also be very welcome. However, I would love a second opinion, before I invest the time to do that.
EDIT:
These are screenshots from my current situation:
Chrome has nice spacing, and visible chevron/arrows/expanding icons. Also, the font works.
IE8 has no auto-size, which makes the height 24px instead of 40px. Ive tried manually setting them to 40, but no luck. The lack of visual finesse does not bother me too much, but the lack of the arrow expanding icons are vital to my application's usability.
Working edits of the current theme, will be accepted as an answer. So will link to alternative themes that are compliant with IE8. Or anything that helps me understand how to fix the problem myself.
The best way is create a separate style sheet for IE8
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css">
<![endif]-->
there are many other things like in page like you need to add meta tag
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
and one more thing please post some of your code in a fiddle so that we can better trace the actual cause of problem.
Update:
also check after adding this fix..
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
I hope this will add something positive.
Update:
After checking jsTree Demo I can conclude one more problem the jQuery Version.
If you are using jQuery v1.10.1 or later. that jQuery does not have support from older browsers like IE8 for that one must use v.1.9.1 which is the last version which supports IE8.
Try respond.js which made your ie8 browser to compatible for css3 pseudo elements and other stuff.
https://github.com/scottjehl/Respond/tree/master/src
I am working on a WebKit based browser, but things don't render properly on a IE - only site. Does anyone know of a stylesheet I can inject into these pages to make WebKit render like IE6? Kind of like an anti ie7-js.
I know the proper solution is to make the site standards compliant, but it's not under my control.
Thanks
A good start would be to implement IE's Quirks Mode if no !DOCTYPE is specified. Aside from that you can also support the X-UA-Compatible header to see if the site is designed for a particular version of IE.
Aside from that, there isn't much you can do. It's up to the website owners to decide "hey, we actually want users to be able to use our site" and actually make it standards-compliant.
There are three main things that make IE6 render so differently:
Bugs
Missing features
Quirks mode
You will never be able to (nor should you want to) try to replicate IE6's bugs in newer browsers. IE6's bugs are legendary. You probably have hacks and work-arounds to deal with them anyway, but be glad that you're moving on and away from them.
IE's missing features shouldn't be a problem for you, because your code just won't be using them. Nothing to worry about. Obviously, it would be a problem the other way if you'd written a site for a newer browser, but not for you.
The main point of those three you want to worry about is the third one: Quirks mode is the one that really mangles page rendering in older versions of IE compared with other browsers.
The correct solution to this is to use a valid <!DOCTYPE> at the top of your page. IE will go into standards mode, and will render the same as all other browsers. If your page is designed for quirks mode, then you may have to fix it, but this is probably the right thing to do anyway, and at least the rendering mode will then be consistent between all browsers.
A good doctype to use is !<DOCTYPE html>.
If you don't specify a doctype, then you will have a lot of compatibility problems going forward.
There is one quick way out: There's a CSS feature called box-sizing: border-box. If you set this CSS property in your site, then Webkit and other browsers will switch to rendering the boxes the same as IE's quirks mode.
This sounds like an ideal solution and a direct answer to your question, so what's the catch? As always, the catch is IE. Trying to use box-sizing CSS without fixing the <!DOCTYPE> issue will still leave you with areas of incompatibility, and if you do fix the <!DOCTYPE>, then IE6 won't render in quirks mode at all. It ought to be the solution, but in fact, box-sizing will still leave you with problems to fix.
So I'll say again that the correct solution is to add a <!DOCTYPE>, fix your site and move forward, not try to pull other browsers backward.
I have a problem with css rendered differently in browsers, in IE to be specific, thought I could ask here for help, hopefully you can help me out with this : ))
my website is www.artisticworksllc.com if you go to the link, on homepage, below the slideshow there are five images linking to different categories of website.
I tested in Firefox & safari and they look ok, in Internet Explorer they are not aligned, fifth image comes down in IE. When I tested it with IE with compatibility view turned on, the images are aligned but other parts of website are messed up (image galleries for example)
Can anyone help me with this please? what to do? I dont know if this is padding or what is causing it. I know I have to implement some kind of IE hack but I dont know what and how : (
help is much appreciated : ))
Thank you
Before going down the crazy path of writing custom CSS per browser (and potentially version): get rid of the XHTML 1.0 Transitional doctype and move to one of the strict types. Preferably html 4.01 strict.
This alone will fix the vast majority of your boxing issues.
Some more info on Doctypes:
Read both pages of the following site. Great links on page 2.
http://www.communitymx.com/content/article.cfm?cid=85fee
http://www.alistapart.com/articles/doctype/
And, for "light" reading: http://hsivonen.iki.fi/doctype/
Basically, all browsers have various degrees of "standards" compliance. Anything that kicks off "quirks" mode or is "transitional" should be viewed with suspicion. However, once you understand what a doctype is and your choices around them, then you'll completely understand what's going on for any display differences you do run across.
For me, one of the best ways to learn was to create a simple floating div layout controlled by CSS. Some div's held images, others had extra long text, all of them had a border so I could see where things were breaking. I then tried various doctypes and viewed the page in the major browsers. Sometimes the differences were minor like slighly different default padding or margins; sometimes they were outrageous such as one browser allowing styles to be inherited that another didn't.
We have a decent sized web app (200+ pages) with fairly complicated layout requirements and the ONLY "hack" I've had to implement was to force the image tag (img) to be display:block; it looks pixel perfect identical in every browser and we are not using conditional style sheets or performing any type of browser sniffing.
After your link to pull in the CSS, put this:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
Make a second style sheet called ie.css and just change the parts that need to for IE.
You also have the ability to add versions:
<!--[if IE 7]>
for example.
you need to target versions of ie with conditional comments; using them you can set specific styles for any and all versions of ie to make them look how they should.
Check you padding and margin attributes for the list elements. Perhaps your size arrangements are right, but since every browser renders styles differently, IE is responding differently.
My ASP.Net application only comes out properly if i am previewing it in Internet Explorer but its the ugliest thing ever if i view in Firefox,Chrome or Safari.
How can this be, and how can this be resolved.Helppppppppp
What DocType are you using? If you're using transitional then IE will be rendering in quirks mode. Force a DocType of strict.
Check out this link here for a good explaination of DocTypes and this link for an explaination of one major way the Doc Type affects layout: box models.
Have you compared the source of the pages in the different browsers? Are they the same, or are there major differences? If not, then you'll need to work on your CSS - and for that there are few better tools than Firefox and Firebug.
If the source of the pages is different, then you're falling foul of an ASP.NET feature that checks your user agent against a list of Browser Capabilities or the Browser Definition files - and in earlier versions of the framework, these were woefully out of date - what rendered as a <div> in IE would come out as a single cell <table> in Firefox.
Since ASP.NET 2.0, you've also been able to change the behaviour of controls with Control Adaptors - for example the CSS Control Adapters will output styled divs for most of the tabular controls (login, registration, repeaters, etc) - which again can be targeted to specific browsers.
I'd advise using FireFox as your development browser, while testing in IE and Chrome as well.
Besides being more standards based it has superior web tools within, like Firebug, yslow and
Web Developer.
Cross browser compatibility is, unfortunately, not trivial. It is a large topic with a lot of material devoted to it. As dove suggests, it's best to use a (relatively) standards compliant browser to do your development work, e.g. FF, Opera, Chrome or Safari and then tweak to make it work in IE 6/7/8 afterwards.
I would recommend against using any of Microsoft's built in theming etc. and stick to pure CSS based styling as much as possible. The ease of making your site cross browser compatible will, to a large extent, depend on your knowledge of HTML and CSS, but I recommend starting with a good CSS framework or at least a good CSS reset (which removes browser specific default styling and allows you start with a common base). Try having a look at Tripoli, which gives you a common cross browser CSS standard (a reset plus rebuild of default styles).
The usual way to tweak the CSS for IE is to use IE specific conditional comments to include an extra CSS file only for IE, e.g.:-
<link rel="stylesheet" href="http://tempuri.org/styles.css">
<!--[if IE]>
<link rel="stylesheet" href="http://tempuri.org/styles.ie.css">
<![endif]-->
You can also include different stylesheets for different versions of IE, see here.