I've searched through the existing threads about PIE.htc not working in IE8 but couldn't find a good resolution -
I've tried applying it to every single element on my page that uses an IE8-incompatible CSS3 attribute and I can't get anything to happen. IE8 doesn't tell me that the path is wrong and PIE.htc sits in the same folder as the page which calls it. Here is a random css example from an element which pops up when the user hovers over a graphic:
CSS:
.info_bubble {
-webkit-border-radius: 5px;
padding: 8px 8px 16px 8px;
background-color: white;
-moz-border-radius: 5px;
behavior: url(PIE.htc);
border-radius: 5px;
position: absolute;
margin-top: 1em;
display: none;
bottom: 2.5em;
left: 3.5%;
width: 80%;
height: 0;
}
It is meant to have rounded edges but it still refuses to work in IE8.
According to this link, you should try to set z-index and position:relative to make the border-radius work IE8:
z-index: 0;
position: relative;
Hope this helps!
So I figured it out - Sort of.
It works if I use another version of PIE.htc. I have no idea why, but I guess for anyone else stuck in this situation, try a different version.
Edit: I was trying to use PIE 2.0 beta 1. I resolved the issue by downgrading to PIE 1.0.0.
The usual problem is that the path in the behavior rule is not correct.
As pointed out in the documentation http://css3pie.com/documentation/getting-started/ the path is relative to the HTML file not the CSS.
Related
EDIT: Link to reproduction on codepen
https://codepen.io/bedelman851/pen/oyWpGq
I have a ul to which I am applying columns: 3 to. Each li has an input/custom label. The custom label has the following relevant css.
input[type="checkbox"] + label:before {
content: '';
display: block !important; //ie fix
width: 16px;
height: 16px;
border: 1px solid $dark-button;
border-radius: 2px;
position: absolute;
background-color: $white;
left: 0;
top: 5px;
}
The height 16px is still being applied to the element, but is actually getting rendered as over 18px when I inspect the element. All others are exactly 16px. This only seems to happen at the top of the last column.
It doesn't always happen as you'll see in this picture.
But I have noticed that the last column in the second picture sometimes does appear this way. If I go in to the inspector and click on the height to disable it and then reenable it, it renders perfectly. Have tried adding !important (god help us) to the height, and adding a min-height. Thoughts?
This was an actual firefox bug that has now been resolved a year later. https://bugzilla.mozilla.org/show_bug.cgi?id=1468654
Here is how the site looks on Internet Explorer:
http://www.browserstack.com/screenshots/0c3c039e85f44bb70fddfc34b887b5bbc3357899
I've only seen it on the latest version of IE on Windows 8.1, but it's possible that it happens on older versions as well. Unfortunately, I'm on a Mac and can't find any emulators to run IE.. So I am coming to the greatest community of tech-savvy people I know of for help.
The site (built with Wordpress) is commercialpaintersinc.com. It looks great on Google Chrome and Safari.. so this issue seems to be just in IE (although I haven't tested in Firefox either..).
This is how it is supposed to look:
Anyone got any idea as to what CSS I entered that caused the issue and/or how I can fix it to make it look how it is supposed to on ALL browsers?
Any feedback is majorly appreciated. Thanks!
You are presently using negative margins to adjust layout, which is giving wildly different results in all three major rendering engines (Trident, Blink, and Gecko). I would advise against this, as it's likely these vendors will need to discuss whose approach is correct, or if all three need to adjust to be in better conformance with a fourth alternative.
The primary issue is is the over-hang of your logo beyond your negative margin. If you were to position the image absolutely, you could get more consistent results. However, upon doing so you will need to restore the layout of your header since a crucial element will no longer contribute to its dimensions.
#logo {
position: absolute;
}
#main-header {
min-height: 160px;
}
The above two rules appear to restore the layout for me in IE, and Firefox. That being said, I still think Chrome may be in the wrong here - you should always test your layout regularly in all three major browsers to ensure you aren't building on top of a browser bug.
I work on the Internet Explorer team, and have filed an issue internally for us to investigate this particular layout anomaly further. I've created a reduced demo of the issue as a public fiddle as well.
If you need to test Internet Explorer from a Mac in the future, please visit http://modern.ie.
Thank you all for the help. I was having a mental blockage and once again this community helped me to move forward.
Jonathan Sampson was correct that the root cause was that the CSS was not originally done correctly. I did the CSS edits myself and I am self-taught, so this was no surprise to me, haha. However, I had already come up with a solution.
My Solution:
I used the famous CSS Browser Selector script which can be found here: http://rafael.adm.br/css_browser_selector
I added it to my JS folder (mysite.com/wp-includes/js/css_browser_selector.js) and then added:
<script src="css_browser_selector.js" type="text/javascript"></script>
right before the </head> tag in the header.php file.
At that point I was able to just create browser-specific CSS. It's dumb that FF and IE are so picky when it originally worked fine how I had it in both Chrome and Safari... But oh well.
Here is the code for Chrome/Safari vs. the code for Firefox/IE:
Chrome/Safari (Webkit):
.webkit #logo {
margin-bottom: 10px;
max-height: 110px;
position: relative;
z-index: 99999;
background: #fff;
border-radius: 150px;
border: 20px solid #fff;
}
.webkit #main-header {
padding: 10px 0 0 0;
margin-bottom: -65px;
margin-top: -20px;
}
Firefox (and same used for IE as well):
.gecko .et_pb_slider {
top: -60px;
margin-bottom: -63px;
}
.gecko #logo {
margin-bottom: 10px;
max-height: 110px;
position: relative;
z-index: 99999 !important;
background: none repeat scroll 0% 0% #FFF;
border: 20px solid #FFF !important;
border-radius: 150px;
}
.gecko #main-header {
margin-top: -20px;
}
So yeah I didn't see Jon's answer until after I had "fixed" the issue. So, I will leave it as is.. although I'm sure my CSS is very sloppy! :P
Screenshot of IE browser now that it is fixed:
http://www.browserstack.com/screenshots/0d669a15d18040086fede2df90f134e526aef8f3
Thanks,
Chris
I need to have a container "DIV" with rounded corners. The following code works perfectly on all browsers except my IE10. I have no clue how to do in order to make it work.
#about-kader {
width: 200px;
height: 180px;
float: left;
margin: 0px auto;
background-color: #9bafc4;
padding: 3px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-ms-border-radius: 5px;
behavior: url(border-radius.htc);
}
And here's the HTML part, please:
<div id="about-kader">
...
...
...
</div>
There is no way to make any round corner visible on IE10. The version I have is: 10.0.9200.16576, Update versions: 10.0.5 (KB289530).
Thanks to Flipbed's answer I found the answer. On IE10, the "border-radius" to me doesn't work. In order to get it working, it's necessary to specify each corner:
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
Indeed the site you sent, does exactly that (look the page source). It gives as output the instruction:
border-radius: 5px;
but internally it declares the 4 corners separately as above.
This was extracted from the question and posted on the OP's behalf.
Try only using border-radius: 5px, does it work then? If it does, then add the extra border-radius properties one by one until you find where the problem arises. I suspect that it is one of the extra border-radius properties that is causing a problem. I suspect that the behavior might be the source of the problem.
The behaviour of border radius is affected by compatibility mode in IE10.
If you press F12 you can view the developer console and change the compatability settings.
If the Document mode is set to IE7 or IE8 Standards then the border-radius 5px doesn't work, however if the standards mode is set to IE9 Standards or Standards then it behaves as expected.
I have ended up turning off compatibility mode as it also breaks the behaviour of other websites I use.
Ravenstar68
I'm working on a project to upgrade a system to use the button tag rather than regular submit buttons. For the formatting of the buttons, I have the following CSS classes:
button::-moz-focus-inner {
border: none; /* overrides extra padding in Firefox */
}
button {
background: transparent url('images/greenrightbutton.png') no-repeat scroll top right;
color: #FFFFFF;
display: block;
font: normal 12px arial, sans-serif;
height: 25px;
padding-right: 8px; /* sliding doors padding */
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin: 0px;
text-decoration: none;
border: 0px;
overflow: visible;
}
#loginbox button {
float: right;
}
button span {
background: transparent url('images/greenleftbutton.png') no-repeat top left;
display: block;
line-height: 18px;
padding: 4px 5px 5px 12px;
margin: 0px;
border: 0px;
}
They work absolutely perfectly in every browser except IE8.
In IE8, the buttons work in most places, but then I find a page where the two background images don't quite line up and no amount of tweaking padding, line spacing etc fixes it.
Does anyone know why this might be the case?
Demo page: http://test6.placement.co.uk/demo/test.asp
---Update---
After some fairly extensive testing and trying things, I've now got a pretty fair idea of what's causing the problem in page 1, but no idea how to fix it, while another page with the same issue has a completely different cause (which I haven't found) but where I HAVE stumbled on a fix...
The problem on the first page appears to relate to a ul entered further up the page. Take that out and everything behaves - unfortunately, that's not an option as the ul is part of user-entered content, so I'm scratching my head about that. Particularly given...
Page 2 has no uls to cause an issue, but randomly sticking two break tags in just before my button code resolves the problem.
Naturally, THAT fix doesn't work on page 1.
I'm just about ready to give in and find some alternative way of rendering these buttons, because whatever the actual problem is, it's clearly so deep in either my CSS or my basic HTML that I'm probably never going to find it.
I don't see any difference between IE8 and other browser. Could you pleas mention bit more clear what you want to do?
I'm attempting to do the following...
Here's what I've got right now.. but it's not rendering correctly. Does anyone have any idea as to how I'd fix this?
CSS
/* Curved Corners */
.bl {
background: url(bl.gif) 0 100% no-repeat;
/*background-color:#EFFBEF;*/
width: 700px;
margin-left: auto ;
margin-right: auto ;}
.br {
background: url(br.gif) 100% 100% no-repeat;
}
.tl {
background: url(tl.gif) 0 0 no-repeat;
}
.tr {
background: url(tr.gif) 100% 0 no-repeat;
}
.clear {font-size: 1px; height: 1px}
HTML
<div class="bl"><div class="br"><div class="tl"><div class="tr">
<div id="header">
</div>
<div id="footer">
</div>
</div></div></div></div>
Instead I suggest you use CSS3, which unlike other methods, does not require extraneous HTML or Javascript markup that notoriously causes any rounded element to 'flash' upon page load.
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
This generator is also helpful: http://borderradius.com/ and there is another one at http://css3generator.com
In the newest versions of most (if not all) browsers border-radius: 10px; works just fine, and within due time, the browser specific declarations will be obsolete.
To make border radius work in IE6, 7 and 8, try ms-border-radius js library, though I have not tested it (and somebody has responded that it does not work.) My personal opinion is that if anybody is still using these browsers, the internet must look like a strange and scary place to them on the daily, and thus, they will not miss their rounded corners.
Aside: The method you are trying to use was more applicable when CSS3 was not as widely supported. It was created during a strange period of the Internet when the popularity of IE6 drove countless web developers to find highly non-semantic creative solutions to otherwise simple problems. So thank you Internet Explorer for taking a few years off all of our lives and slowing the progression of web design and development.
There's always curvycorners as well, it uses native css for speed if the browser supports it or falls back to javascript if the browser doesn't.
Can be done easily with jQuery rounded corners rounded_corner
$(document).ready(function(){
$("#b1").corner();
});
You don't need to worry about cross browser issues with jQuery approach.
A fantastic summary for all major browsers, telling you how to round each corner or all corners:
http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/
Instead just put this code in the class where you want to have rounded corners .it will definitely work.
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;