I am using HTML5 and CSS3 in my project. To Work in IE8, I am importing famous html5.js downloaded from code.google.com.
But what I am facing is, my main header is repeating twice down side while it is looking perfect in Chrome and Firefox.
What is going on wrong here?
CSS:
header#US_header {
background-image:url('/images//US_header.png');
width:910px;
height:82px;
margin:0px 0px 0px 0px;
padding:0;
}
JSP:
<header id="US_header">
use background-repeat:no-repeat;
Related
I am making an iframe, and i want it to look like it is part of the page.
I cannot find a way that works in all major browsers.
Here is my code
<iframe src="page.html" width="100%" seamless>Your browser does not support iframes.</iframe>
But it isn't working
Can you help?
Although theseamless attribute is not supported by any of the modern browsers, you might want to emulate it with css to get you started:
iframe[seamless]{
background-color: transparent;
border: 0px none transparent;
padding: 0px;
overflow: hidden;
}
Note: with IE you might need to include additional attributes to get seamless outlook to work:
<iframe frameborder="0" allowtransparency="true" scrolling="no" src="...">
I feel so stupid, like I'm missing something really obvious but I have checked everything a bunch and can't figure out what's wrong. I'm trying to use CSS3pie to make rounded corners in ie8, but it just won't take.
I have the path set up relative to the html document, not the css. It's in a folder called pie, so this is what i'm using in the CSS:
#recommended-acc {
float: left;
width: 472px;
background: url(../img/cont_bg.png) repeat;
margin: 10px;
padding: 0 10px 6px 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
behavior: url(pie/PIE.htc);
border-radius: 5px;
border: 1px #d8d8d8 solid;
}
Does anyone know more about css3 pie who could maybe advise me on what I'm missing? I've tried it on a ton of different elements and it hasn't worked once.
A few things to try:
Use a leading forward slash in your path:
behavior: url(/pie/PIE.htc);
This will make sure the path is correct in case you are on a page with more than one URI segment, like http://example.com/pages/archives/mypage.html. WIthout the leading forward slash, it would be relative from mypage.html and not the root directory (which it should be).
Try to force hasLayout (obscure IE thing) by adding position:relative; or zoom:1 to the element. This is often the issue, the HTC file is referenced correctly but the styles won't apply without it.
Read the known issues page carefully and make sure you aren't experiencing any of the other multitude of common problems.
I too had these problem in my earlier days.
You've to keep the pie.htc file generally in the root of the project folder.
I know the following solution is a little weird but you could try it
Try adding an alert or console in the pie.htc file and place the file in each folder until it gets rendered.
HOW to make sure your HTC file loads..
put below <script type="text/javascript"> alert("test");
this alerts test when the file loads
put in the complete url in your css file behavior: url("http://www.yourwebsite.com/test/PIE.htc");
WHen you load the page an alert shows up :)
this means you are sure the file loads :)
now shorten the behavior: url("relative to the CSS-FILE/PIE.htc"); and make sure you still get the alert
remove the alert =)
You are now 100% sure it is using the HTC file
I struggled with this, All I can suggest is try this.
Use the Javascript version with jQuery
<!--[if lt IE 9]>
<script type="text/javascript" src="js/PIE_IE678.js"></script>
<![endif]-->
<!--[if IE 9]>
<script type="text/javascript" src="js/PIE_IE9.js"></script>
<![endif]-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css"/>
<script>
$(function() {
if (window.PIE) {
$('.Circle').each(function() {
PIE.attach(this);
// alert("Attached");
});
}
});
</script>
<![endif]-->
Now in your CSS, with the .Circle class or any class which is using the CSS 3, give them:
zoom: 1;
position: relative;
One other note I have found when using jQuery & the migrate plugin - some are "finicky" these work.
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
With luck, that will do the trick.
Guys i found the problem you where looking for.
First of all I used 2 different web host. 1 of my own and 1 of the company.
I made my full css3 responsive webdesign hand coded on my own website.. which I needed the PIE.htc file to get the rounded corners working for all IE versions and I succeeded!.
However when I uploaded the same files to the web host of my company it didn't work anymore.
And it turns out that they doesn't support .htc files.
So I scratched my head and didn't get it right either, but then I discovered that this provider will work with the PIE.php file.
So if for you this doesn't work;
.bg {
border-radius:60px;
width: 80%;
height: 85%;
position: fixed;
top: 10.2%;
left: 18%;
z-index: 1;
border:3px solid #fff;
background:#fff;
behavior: url(pie/PIE.htc);
Than this does;
.bg {
border-radius:60px;
width: 80%;
height: 85%;
position: fixed;
top: 10.2%;
left: 18%;
z-index: 1;
border:3px solid #fff;
background:#fff;
behavior: url(pie/PIE.php);
Just change the PIE.htc to PIE.php and it will work.
RGBA -- workaround for IE is “DXImageTransform.Microsoft.gradient".Found a handy tool provided by www.css3please.com for cross browser transparency,but applying this gradient on IE(IE8) -- works,but the text loses its clearness/legibility.
applying georgia to make the font look uniform on all the browsers,but the text does not appear properly after i apply gradient . Here's the JSFiddle http://jsfiddle.net/mvivekc/GJaDy
the code is--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<html>
<style type="text/css">
.georgiaWithTransform{
font-family: Georgia;
height: 80px;
width: 800px;
font-family: "Georgia", Geneva ;
word-wrap:break-word;
background-color: rgba(150, 150, 150, 0.3); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C969696,endColorstr=#4C969696); /* IE6–IE9 */
zoom: 1;
}
.georgiaWithoutTransform{
font-family: Georgia;
margin-top: 30px;
height: 80px;
width: 800px;
font-family: "Georgia", Geneva ;
word-wrap:break-word;
background-color: rgba(150, 150, 150, 0.3); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
}
</style>
<body>
<div class="georgiaWithTransform">Georgia does not appear properly with transformation in IE 8,and i do not understand why this is happening</div>
<div class="georgiaWithoutTransform">Georgia properly without transformation in IE 8,You can notice the difference in the appearance of the text here as compared to the top part( Noticeable only in IE)</div>
</body>
</html>
Cant understand why this is happening and badly need a workaround for this problem.
Here's a screen shot of the problem on IE8 --
Same happens on the fiddle as well.. problem is seen only on IE,not sure why..
Please help,
Thanks in advance
I had a similar problem once with opacity filters in IE, the alternative that was suggested to me was using 2x2 image and background-repeat. In your case, you could try the same with a 1px width and the content height as height for your image with the desired gradient applied. This may not help you much but, here is the link to aforementioned question.
P.S : using an image as a workaround did work like a charm for me.
IE Filter Antialiasing problem
Alright, that's what I thought was happening. The filter's turning off the anti-aliasing in the font. You can see a solution offered here. Biziclop created a small jQuery script you can use and has a sample of it working here. This will force the browser to fake the anti-aliasing.
For some odd reason any background styles I set on my (being loaded within a modal if that makes any difference) are not rendering in IE7 or IE8. It all looks completely fine in all other (real) browsers (including IE9). My code is as follows:
<hgroup>
<h6>Request Information Form</h6>
<img src="/images/x-close.png" alt="Close" class="close" />
</hgroup>
I know you aren't supposed to put anything besides <h1>-<h6> within an <hgroup>, but I need this little close img in there, and even when I've tried pulling it out, I ran into the same problem (plus it all "seems" to validate).
The CSS is:
hgroup {
position: relative;
width: 668px;
height: 32px;
margin: 0 0 16px;
padding: 14px 14px 0 14px;
background: #B66115 url(/images/modal_header_bckgrnd.png) repeat-x 0 0;
font: normal 20px/20px 'crimson Text',Georgia,serif;
color: #F6F5EE;
}
Also, I have declared <hgroup> as display:block, and I am using the IE shim. All I keep getting is a white background (which really doesn't work when I have white text in the block!).
Thanks in advance for any and all help.
IE7 and IE8 do not load html5 tag names into the document. Any unrecognized tags are ignored. Try adding a bit of javascript to manually add them (or use something like modernizr.js).
<script>
document.createElement('header');
document.createElement('hgroup');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
being loaded within a modal if that
makes any difference
Does your modal window use an iframe?
If so, you also need to run your HTML5 element shim script inside the iframe.
Use the HTML5 Shiv.
On a slightly unrelated note, you're using <hgroup> incorrectly. It's only supposed to contain one or more hN elements, and nothing more.
Using your code above, you should be using <header> instead.
Has anyone been able to succesfully use the IE CSS hack #IEroot? I stumbled upon it from this article but it doesn't seem to work for me.
I'm trying to fix/hack the inline styling bug to produce li inline blocks
#featured li {
margin:0px;
padding:0px;
width:317px;
height:310px;
display:inline-block;
border-left:1px #bdbdbd solid;
}
#IEroot #featured li {
display:inline;
}
Any help would be greatly apperciated, thanks.
IT DOES WORK, exactly as described, EVEN in IE8, and is actually a pretty smart CSS hack to get around IE specific bugs.
You MUST swap out the DOCTYPE line for a REAL DOCTYPE though first.
Here is the code from the link, tweaked to be a working sample.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
/* all browsers make border red */
#IE { border : 2px solid red; }
/* all browsers see this, but only IE thinks #IEroot exists as an element and makes border blue */
#IEroot #IE { border-color : blue; }
</style>
</head>
<body>
<!--[if IE]>
<div id="IEroot">
<![endif]-->
<p id="IE">This browser is IE. (red in all, blue in IE)</p>
<p id="notIE">This browser is not IE.</p>
<!--[if IE]>
</div>
<![endif]-->
</body>
</html>
I'm using a beta of IE8, and the example on the page that you are referring to does not work. The live demo also doesn't seem to take IE8 in count.
These kinds of hacks are clever, but I'd advice you to stay away from it.
Whenever you encounter differences between browsers, there are always alternative ways to do the same thing in such a way that it works for all browsers.
I've made more websites full of CSS than I can count, and I never ever resort to browser-specific code, especially not the kind that exploits bugs in specific versions of browsers. They solve a tiny problem today, but give you twice the headaches tomorrow, and are a bitch to maintain.
If you insist on using such a hack, make sure to add a comment like this:
/* >>>>>>> BUTT-UGLY BROWSER HACK! FIX ME!!!!! <<<<<<<< */
#IEroot #featured li {
display:inline;
}
:-)