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.
Related
Since IE8 doesn't handle PNG 24 transparencies very well, I decided to nix the background image of my PNG's container div so that the background matches the background of my PNG.
Basically, I want to get rid of the background image for #myDiv in IE8 or earlier browsers.
In the header of my page I use:
<!--[if lte IE 8 ]> <style>
#myDiv{margin-top:20px;}
#myDiv{background-image: none;}
</style> <![endif]-->
Changing the margin-top works fine (along with all other adjustments that I made for IE8). Yet the background image still appears, no matter what I try! Short of getting rid of it in my external style sheet, I can't seem to make it not appear.
In fact, when the page loads, it looks like the code initially gets rid of it, but it comes back. I thought that inline styles always trump the external style sheet. Am I wrong?
I checked my css #media stuff, and there's nothing in there that might bring it back. I cleared my browser cache and refreshed. Still there.
Anyone have any clue why #myDiv's background image keeps coming back?
EDIT: I'm working in the header.php template of a wordpress site. (That's where I inserted the code above.) So maybe the external style sheet does indeed trump inline styles in this case?? I don't see why it should, but could that be the answer?
I know it's not a perfect solution, but would adding the background image as a media query work (as IE8 does not support media queries)?
#media (min-width: 1px) {#myDiv{background-image:url(/etc/etc/etc.png);}}
Try using this code:
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Also make sure your background image is at least 4px x 4px
Here is a related post:
PNG background image not showing in IE 8< using html5?
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 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 have a simple CSS dropdown menu with an iframe inside it. When I hover my mouse over the dropdown menu, the menu drops down. But when my mouse hovers the iframe inside the menu, the menu goes back. Here's a simplified version of my code:
<div id="comments">
View comments
<div id="comment-wrap">
<iframe src="http://www.facebook.com/plugins/comments.php?..."></iframe>
</div>
</div>
<style type="text/css">
#comment-wrap{display:none;z-index:5;position:absolute;padding:10px;background-color:#fff;}
#comments:hover #comment-wrap{display:block;}
</style>
This works in the latest versions of FF, Chrome, and Opera.
P.S. The dropdown menu remain dropped down when my mouse is hovering the padding of #comment-wrap.
I have faced similar problems while working with the :hover psuedo class. It started working fine when I changed the Document mode of the browser to IE 9 and the Browser mode also set to IE9. IE 9 has the document mode set to IE8 by default.
Additionally, you can add the following meta info in the head tag:
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
Hope this helps.
I found to have the same problem and i know this is already an old post but i felt like i had to publish my solution. Basicly IE does not accept the :hover event for any tags other than <a> with specified href (wont work on early ie versions), unless you add <!DOCTYPE HTML> at the top. And that was it! Problem solved :).
Unfortunately, this seems to be a browser bug, going back many IE versions. You can use a JS solution as a backup to IE. I've created a jsFiddle example, adapting code from another solution addressing this issue.
Hope that helps!
Edit: further testing in IE9 shows that though the iframe is displayed, hovering over the scrollbars hides it immediately. There is likely a more involved JS fix for this, but it's up to you if you'd like to implement it.
I recently had a hover issue in IE10 (not sure about lower versions) that was driving me crazy. I had my css hover set properly and it was for a div that contained an iframe. The issue was that when you hovered the div it would show the iframe but as soon as you tried to move the mouse into the iframe it would disappear again. I searched everywhere and found nothing for an acceptable answer for me except to use javascript or jquery. After days of trying to sort it out I found a very simple solution that worked for me. I simply removed the iframe from the div and used the object such as
<div class='showme'>links<div style='float:left;' class='showme_1'>
<object type='text/html' data='http://www.google.com' style='width:100%; height:100%' border='0'>
</object>
</div>
I hope this helps folks save a lot of research time.
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]-->