My site looks good in both Firefox, IE 8, and chrome. However in IE 7 the middle content get pushed down.
I don't understand why, can anyone advise me how to fix this? I tried to float both left and right but it didn't work.
Any help appreciated. Thank you in advance!
Hi all, I have solved the issue by adding in some tables. Thanks for all your help!
Perhaps it has something to do with doctype declarations? Here's a tutorial on them:
Right here
You might want to read it and give it a try. Perhaps that could solve your problem.
It could also be a CSS compatibility problem. Take a look at this web page:
Here
It shows which CSS elements are compatible with IE 7 and other versions. If you used an element which is incompatible with IE 7, it might be what is causing you trouble.
Hope it helps.
It looks as though the margin-left:210px on a few of your DIVs is pushing the content down. Try assigning the following class in your stylesheet:
.head-nav,
.banner,
.sponsorslogo,
.wp_bannerize_sponsors,
#main{
float:left;
}
If that fixes it, it might be worth to rethink the layout of your design slightly where you place the above mentioned elements in a DIV that has a margin-left:210px and then float:left the #header to the left and place it above the new DIV.
Alternatively, if you want a quick fix that only targets the IE7 glitch you can always include the above style in an IE7 only stylesheet:
<!--[if IE 7]>
<link href="css/ie7.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
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 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.
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).
I have run into a problem with absolute positioning on elements in IE8 when printing.
I have my print stylesheet, and in this I'm trying to position an element in the top right corner of the first printed page.
The problem is that when the element is placed on page two, IE8 thinks that the top of the page in on page two, instead of page one.
This is in my print.css:
.myElem{
position:absolute;
top:0;
right:0;
width:230px;
}
In all other browsers (Opera 11, Firefox 3.6, Safari 5, Chrome 11, IE9, IE9 compatibility mode, IE8 compatibility mode) the .myElem-div will be printed on the first page in the top right corner. But in IE8 the div is printed in the top right corner of the second page. As said before the div is located "on the second print page" in the DOM. I can't move the element up earlier in my DOM, so this is not a solution.
Actually it's the same problem as descibed in the comments by other users here: http://msdn.microsoft.com/en-us/library/ms533005%28v=vs.85%29.aspx#CommunityContent
Anyone have a solution to this?
Thank you very muvh in advance!
Regards,
Kim
Two possible workarounds... not really fixes.
Create printer-friendly versions of the pages that do not require a doctype, which is probably causing IE8 to choke. Of course, this is a lot of work... unless you do not have too many pages or you can generate those pages dynamically using server side tech.
Create an IE8-only stylesheet using conditional comments, example <!-- [if IE 8]> <link rel="stylesheet" type="text/css" href="ie-8.0.css" /> <![endif]--> and use this sheet to remove that div altogether with a display:none;, assuming that you could do without it.
I'm familiar with the html conditional tags
<!--[if IE]><![endif]-->
Because of various issues I need to use a single stylesheet. So I cannot use the above solution. I can't find hacks that work to target only ie9 browsers so I need an alternative.
I remember seeing once a condition used in a stylesheet that only IE understood. Something with an # sign and 'MS'. It was awhile ago.
Does anyone know about this? Can it be used for browser specific (ie only) styling?
OK this is about the BETA and PREVIEW's of IE9, but maybe these will work for the full release also?
http://archivist.incutio.com/viewlist/css-discuss/112904
<body>
<!--[if IE 9]><div id="ie9"><![endif]-->
... your page here ...
<!--[if IE 9]></div><![endif]-->
</body>
with a css like
#ie9 #wrapper { background-color: blue; }
will make a blue background only in IE9, all other browsers won't find <div id=ie9> since its hidden in the comments. that should do the trick :)
See also Wikipedia on Conditional comments for an in-detail explanation.