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!
Related
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
As soon as i place the into my script my page shows perfectly in IE but in firefox and chrome it doesn't load my css file at all.
But when i remove the doctype tag both firefox and chrome show the page perfectly!
And the weird thing is when i load the file locally it works fine with the doctype tag..
Is my host out of date or something?
"Solved"it with:
<!--[if IE]>
<!DOCTYPE html>
<![endif]-->
The solution you found yourself doesn't solve problems, it just puts a bandaid on it by not including a doctype for different browsers which isn't good practice.
You seem to have a lot of CSS errors and warnings, take a look at this link and work your way through them and maybe it will start working...
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.chatboxlive.com%2Fchat%2Findex2.php&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en
As for your HTML, you have duplicated some id names which is bad markup, take a look here and try either renaming them or changing it to a class as you can have many classes with the same name...
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.chatboxlive.com%2Fchat%2Findex2.php&charset=%28detect+automatically%29&doctype=Inline&group=0
A doctype is required in today's modern web pages. Without one, you are in quirks mode and, IE in particular, will struggle to present your page properly. You never want to be in quirks mode.
Remove your conditional comments and present that doctype to all browsers all the time on all web pages to remain in standards mode. Do NOT use IE as a reference for how things should work.
Write your markup as you think it should be done, validate it, then look to see if it works as you wish in all the browsers. You will have more problems with IE than the others but IE is most likely wrong.
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.
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.
I am having problems with my webpage. On all browsers the div aligns perfectly. However, on all versions of Internet Explorer the Div shows out of line. Here is an image of the difference:
Here is the page so that you can view the source:
Contact Page
I would really love the help, IE has done this to me several times. I would love to learn what to do in these types of situations. I read somewhere about an IE specific CSS file that would fix this but I did not fully understand what needed to be changed in this new CSS file. All help appreciated.
-Noah
Try fixing the issues presented by the W3 validator. http://validator.w3.org/check?uri=http%3A%2F%2Fkynikosdesign.com%2Fcontact.php&charset=%28detect+automatically%29&doctype=Inline&group=0&verbose=1
You can add this and it should work (at least it did just through in-browser modifications)
after your normal css
<!--[if IE]>
<style type="text/css">
#mainbox{padding-left:0;}
#servicesright{float:left;}
</style>
<![endif]-->
That aside, you're also missing some closing tags it would seem and probably the reason for the weirdness.
Issues I detected on your page structure so far (which are causing the display issue):
#main-container should not have width
you are using table for your form layout which is a big mistake (it's pushing the whole content together down)
as a workaround removing width in (1) and width=100% in (2) will fix your problem butI highly recommend to follow good practices for your page layout. (i.e. using div instead of table).