I've isolated a strange issue with IE8 regarding the CSS :before and :after pseudo elements. The issue occurs when you set one pseudo elements position to absolute and the other's to relative; see the following example:
<style type="text/css">
div:before { content: ""; position: relative; }
div:after { content: ""; position: absolute; }
</style>
<div>stuff</div>
IE8 crashes. Literally. No error, nothing helpful - just the dreaded "Internet Explorer has stopped working" and the Windows 7 attempt to relaunch it. To be clear, the error occurs when switching to the IE8 Browser and Rendering Mode of IE9. When i loaded the example in IETester's IE8 page, no error occurred.
I will test this in an actual IE8 asap, but my question is: why does this happen? Is it an IE8 bug? Maybe a side effect of some sort of position bug? Isn't IE8 supposed to render pseudo elements?
Yeah, that's weird. I was able to get it to work if you make it float:left; on the div:before
I know this question is old.. but I had the same problem and fixed it with "div::after" instead of "div:after"
Related
I am making myself a little portfolio. On chrome, firefox and opera there is no problem with the footer and making it sticky to the bottom using
footer {
position: absolute;
left: 0;
bottom: 0;
}
However, IE is special and it doesn't work. The easiest fix I could think of was implying position: relative only to IE.
So I tried using:
<!--[if IE]>
<style type="text/css">
footer { position: relative; }
</style>
<![endif]-->
But my IE doesn't recognize it (also tried to link to iefooter.css, no result). However, if I remove the <!--[if IE]> all the browsers get the relative position so that must be a problem of IE? My version is the latest I believe - 11.0.9600.16521
The website is here: www.hrusov.eu.
The bugged footer on IE happens on "big" pages such as About me or Projects
From IE 10 and up IE conditional comments were dropped by Microsoft.
I suggest you rework your CSS that it will work with IE 10 and up.
Position absolute works fine in IE 11. I just tried it. Your code is position:relative, which causes it to display above the bottom. I changed it to position:absolute in the F12 tools, just right click on the target element and select Inspect Element. You can adjust the CSS from there.
I use position:absolute all the time to create fluid, responsive designs and it works great.
So this morning I got an automatic update to IE 11, after checking my eyes it appears that some of my background images are blurry.
I had to check that it was not my image causing the problem, so after firing up Chrome, they were nice and crisp again...
I am completely baffled.
I've now uninstalled the IE11 update and they are once again nice and crisp in IE10... Has anyone else encountered this?
I've included a screen shot showing the images in the different browsers.
Here is a link to a jsfiddle, I don't have IE11 any longer to test but its the same markup and CSS that I am using: http://jsfiddle.net/3g52E/
Well i can see what is causing this problem. It's the border-radius of your ._ui.
Now i can't tell you why this happens. However if you want to fix this you can or don't use border-radius or, which is a better solution i my opinion, use the <img> tag to generate the background.
Use image element
<img src="http://i.imgur.com/DauuVHW.png" />
Now to cut-off your image you can just use position: relative;, position: absolute; and a overflow: hidden;:
.block1 > div
{
position: relative;
overflow: hidden;
}
This will add the properties on ._ui _bre and ._ui _com.
Where the basic image properties are:
img
{
position: absolute;
left: 2px;
}
Now you can just use the top and bottom offset for the the image positioning. Where as you used background-position before:
._bre._ui img
{
top: -68px;
}
._com._ui img
{
top: -24px;
}
This way your image is not a part of the element which has border-radius anymore, which caused this problem. They have a more clear seperation now; 2 different elements.
jsFiddle
There is probably more elegant way to fix blurry images in IE 11.
In our app we have icons on buttons with round corners. Removing round corners or using <img> for icons were not options.
However, what worked for us was "classic" images optimization for retina displays, i.e. saving button background images with twice larger resolution and then specifying original size in background-size.
Looks great in IE 11 and on retina displays.
According to this:How to write a CSS hack for IE 11?
I added this code to my CSS:
#media all and (-ms-high-contrast:none){
*::-ms-backdrop, .my_elements_with_border_radius { border-radius: 0 }
}
With this browser hack the borders are not round anymore in IE11 but at least the background images are not blurry anymore. In any other browsers they are still round.
I created an image with some links on top of it here. It works as it should in Google Chrome and Firefox but not in Internet Explorer 8. Does anybody know how/whether I could fix that?
For some obscure reason, IE sometimes "doesn't like" completely transparent areas of absolutely positioned links. Setting any explicit background to them other than default transparent none (background: url(about:blank) "hack" usually does the trick) seems to make IE treat them correctly. In IE9+, background:rgba(0,0,0,0) also seems to do the trick (although it should be just the same as transparent per CSS spec).
You might need to specify the z-index of the image to ensure it appears behind the links in IE8.
i dont have your code but i think this may help you. try this class:
.dict {
position: relative;
margin-top: -138px;
float: left;
display: block;
height: 116px;
On the links there should be a z-index value for start, in IE(6-7-8), z-index is only working when the parent element also has a z-index value:
.dict {
display: block;
height: 116px;
position: absolute;
top: 79px;
z-index: 2;
}
<div style="position:relative;width:860px;height:200px;z-index:1;">
I still don't know why it's not working. But the problem is solved (even for ie8) by removing the img from the html and using it as a background with CSS.
I currently have a search "button" that I made sit on the side of a textbox, as shown in the picture below, this renders fine in chrome and firefox.
In IE9 it renders like this.
Has anyone ran into a similar problem? How can I get around this?
The CSS for the search button is:
.txtSearchBtn
{
display: inline-block;
width: 16px;
height: 16px;
position: relative;
left: -20px;
top: 5px;
cursor: hand;
cursor: pointer;
background-image: url(../Images/magnifier.png);
}
EDIT: The error seems to have something to do with my page being rendered inside of a fancybox. IE9 is not treating inline-block the same way outside of the fancybox.
EDIT 2: Figured out the problem. My max-width setting doesn't have enough room for the textbox and the image, even though I'm moving the image -20px to the left, so IE renders it on the line above.
IE support for inline-block got a lot better in IE8+. This sounds like you are rendering in compatiblity mode, which basically means render this page like you are IE7 (or worse - Quirks mode).
Are you declaring DOCTYPE? try adding this to the top of your html file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
This should force it to use IE9 rendering which can do inline-block correctly.
This is a problem due to IE being unable to recognize the attribute
display: inline-block;
IE explorer will display it inline, and to achieve the desired effect you need to give the content 'Layout' using
zoom: 1;
display: inline;
or similar.
This article was helpful to me, check it out to fully understand what I'm trying to say!
http://flipc.blogspot.co.uk/2009/02/damn-ie7-and-inline-block.html
EDIT: If you are ONLY trying to cover your back as far as IE9 and no less, then #Porco has that covered with the correct DOCTYPE declaration.
If someone can please help I am having an issue with my site in IE7. Go to this link
Testing page link
When you load the page then hover over one of the top nav links the Footer shoots up half the distance on the page and can only be reset by rolling over another tab on the right.
What the heck is going on? Is this a DOCTYPE or CSS problem? Here's what I've already checked
Doctype
CSS styles for image height and width to see if its releasing some kind of height (I dont know)
Duplicate css styles
Any help would be awesome THANKS
Just add:
overflow:hidden
to #nav a
Btw there are some better, pure css rollover techniques, just in case you didn't know
this has a strange smell to it (from your CSS file):
.rollover { display: block; cursor: pointer; }
/* Allow setting widths and heights */
.rollover img { width: 100%; height: 100%; border: 0; }
/* only set width and height once */
.rollover:hover { visibility: visible; /*for IE */ }
/* sets any property for the :hover state */
.rollover:hover img { visibility: hidden; }
i would fool around with this here, maybe getting rid of the visibility hack...
if you want to make something not show, use display: none; instead of visibility: hidden;
EDIT: While this may or may not be a solution, I used to put endless comments in my source code so that I "knew where I was" when I was developing. One day I came across a strange error in IE that was generated by the use of a strange combination of comments. After I got rid of all my comments, the error was gone... I'm not saying, I'm just saying... maybe worth a shot...
I wanted to add comment. But, I dont have any points to add comment. Thats why adding it as answer.
I am using IE8. I have opened the link you have given in IE8 and I haven't noticed what ever you mentioned. It is working fine... If possible, you can try using IE8.
Thanks,
Srikrishna.
Really strange issue...
I was just curious about your float: left; property on #footer, and after i deleted that it seemed to work. Give it a try...
hope it helps.
Sinan.