I have a website build on the Wordpress Platform whith an horizontal menu.
When viewed in ie 9+ and firefox it seems okay, but on ie8- the menu css classes seems not right.
I am struggling to find the problem in the css using firebug.
Could someone please give me a hand and help me with this problem...
my website is: www.markett.nl
asfasf
You're using HTML5 tags like header, nav, footer, which are not supported in IE8 and below. If you want this to work in IE8 and below, just add this script in your head :
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
if you look at your IE8 interpreted source - you'll see - IE8 doesnt render nav-Tag proberly. This is because nav-Tag is HTML5 standard - and <IE9 is not able to deal with that. That's why you need to implement html5.js - to solve that issue. You did - but the file doesn't exist.
Its seems like you have used css3 properties in your code. Ie8 dosent support css3.
A work around for this is u can add PIE.htc in your project, here is a link check it out
PIE.HTC
Well the main problem that arises is that IE8 and older dont implement the tag correctly. I would make another wrapper or change it to a div. Also you should left your elements float some more for IE. Hope it helps u one step further.
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
I'm trying to finish this site http://jolaga.laohost.net/topsleva/. Almost all looks good in all normal browsers. But IE8 looks like in mobile mode - all containers are 100% width.
Respond.js and html5shiv.js are included. Meta is in head section. I don't know what else should I do ? For sure IE ignores media queries - but I didn't figure out why.
shot in the dark, because i don't have ie7/8 installed at the moment, but here goes:
offhand, it looks like you are targeting less than ie9, so here ie7/8, with ie7.css.
i never use bootstrap, but i'm assuming you are using the regular repo, and not one you've tweaked on your own.
if thats the case, i'm positive that style sheet is only for ie7, and that is why ie8 is all busted up.
you have two options here:
1) get rid of existing conditional comments. create a style sheet for ie8 and place it inside its own conditional comments targeting ie8 and only ie8/
keep the existing ie7.css style sheet and wrap it up in its own set of conditional comments targeting itself.
<!--[if lt IE 9]>
<script type='text/javascript' src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script type='text/javascript' src="js/respond.js"></script>
<![endif]-->
<!--[if IE 8]>
<link href="/css/bootstrap-ie8.css" rel="stylesheet">
<![endif]-->
<!--[if IE 7]>
<link href="/css/bootstrap-ie7.css" rel="stylesheet">
<![endif]-->
2). keep ie7.css, create new styles for ie8 within ie7.css file, but you have to target one of the ie versions with a hack, specific to that version. you can read all about it, and view examples here:
http://www.impressivewebs.com/ie7-ie8-css-hacks/
Solved. The problem was that bootstrap css was before custom styles. I swapped them and everything works like charm
We're implementing CSS scrollbars on our website, and they're working fine with all browsers apart the older versions of IE (like IE8).
We cannot get IE to process the same CSS/JS rules in order to obtain the same output.
As we've noticed that some websites have managed to make explorer display the custom bars instead of the standards, I would like to know if someone has a pice of code to share that make the CSS bars appear exactly the same way independently from the browser that the client is using.
Thanks in advance!
There's no such magical piece of code to make website look the same on all browsers. Each problem is css/js is to be treated specially, especially on IE.
If you want to apply css rules to only internet explorer, you could make use of IE Conditional Comments
I used this one for custom scroll bars and it supports all major browsers, might be you have used these one..!! anyways here is link
http://www.hesido.com/web.php?page=customscrollbar
Write custom css for IE8 using conditioanal comments
<!--[if IE 8 ]><html class="ie8"> <![endif]-->
.ie8 .bar {
your code...
}
curved css corners for some reason dont seem to work in IE9. I know it supports it however i have looked all over the web for a solution and cant find one that works for me. I tried putting <meta http-equiv="X-UA-Compatible" content="IE=9" /> but that did'nt work. I used the .htc file and behavior: url(border-radius.htc); however that only works sometimes when switching to compatibility mode. I even tried declairing all 4 values, and didnt make a diffrence. Work beautifuly in firefox, chrome, and safari but not in IE. Any help? Check it out: my web page If you have some debugging tool might help you help me.
I found if your using the CSS style filter for IE8 and below browsers it will interfere with IE9 styles causing border-radius to not work and possible other ill effects.
To fix it add this to your html head:
<!--[if gte IE 9]>
<style type="text/css">.elementClass { filter: none !important; }</style>
<![endif]-->'
Looks like the page is firing Quirks Mode, try moving those script & css includes down inside the tag... nothing should ever come between a doctype and it's html tag.
Detail explanation here Investigating Document Mode Issues
Use the vendor extensions, -moz-border-radius:15px; -ms-border-radius:15px; -o-border-radius:15px; -webkit-border-radius:15px; border-radius:15px;
You really only need the -ms version for what you want, but if you include them all you provide a broader spectrum of coverage.
I found that my border radius in ie9 is working on localhost but not on a server. Im using css3PIE to acomidate ie8 and below, would this be interfering with ie9?
IE9 don't need any prefix for border-radius (for sure you don't need -ms- prefix at least for this property!). Your browser probably have a problem. Maybe you're running beta or something like that.
Please test this demo in another IE9 running computer or have your IE restarted and try it to see IE9 renders border-radius just fine.
Quirks mode is where IE9 switches back to IE5 functionality
(added following link to #seanmetzgar post also)
Detail explanation here Investigating Document Mode Issues
With a site I look after, which had ASP code right at the top of page, I added
<!DOCTYPE html>
just in front of the tag, below the code, and IE9 stopped going into Quirks Mode.
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).