i'm looking for a replacement for the below code in IE8
background-color: rgba(0, 143, 213, 0.9);
So after searching in internet i found this
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#E5008FD5,endColorstr=#E5008FD5)";
now the problem is if i use the above filter the transparency in IE9 is getting lost
Can anyone guide me to get the transparency in IE8 without effecting other browsers.
Here is my code
<!Doctype HTML>
<html>
<head>
<style>
.parent{
color:white;
//filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFF0000,endColorstr=#FFFF0000);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFFF0000,endColorstr=#FFFF0000)";
background-color: rgba(255, 0, 0, 1);
width:300px;
height:300px;
}
.child{
width:300px;
height:300px;
position:absolute;
top:0px;
//filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5008FD5,endColorstr=#E5008FD5);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#E5008FD5,endColorstr=#E5008FD5)";
background-color: rgba(0, 143, 213, 0.9);
}
</style>
</head>
<body>
<div class="parent">
<h3>how are you</h3>
<div class="child">
</div>
</div>
</body>
</html>
edit:
I observed
IE10
background-color: rgba(255, 0, 0, 1);
IE9
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFFF0000,endColorstr=#FFFF0000)";
background-color: rgba(255, 0, 0, 1);
IE8
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFFF0000,endColorstr=#FFFF0000)";
in IE9 both are getting applied. that's why it is looking as solid color in IE9. If i can remove anyone it is working fine. But don't how to make it in specific browser
Related
I'm working on my company site, mainly on impoving CSS. I would like to eliminate a lot of little images that create rounded corners, shadows and so on. CSS3 is a perfect choice, but still lot of our users use IE7 and IE8 so I need to prepare this site for them too.
I found a lot of good opinions about CSS3PIE, do I downloaded it and tried to use, but my IE8 doesn't want to cooperate :). It says: Access is denied to: PIE.htc Line: 0 Char: 0 Code: 0. I tried to put files to one folder and to differents folders, check this on the server and local... I have always the same information.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:og="http://opengraphprotocol.org/schema/">
<head>
<title>title</title>
<link rel="stylesheet" rev="template" type="text/css" href="styles.css">
</head>
<body id="home" class="cols_One">
<div id="wrapper" class="fauxBlock">
<div id="header">
<div id="cap">
<div id="welcome"></div>
<div id="quicklinks">abc</div>
</div>
</div>
</div>
</body>
</html>
CSS:
#cap {
padding: 0 6px;
font-size: 12px;
border-left: 1px solid #EEE;
border-right: 1px solid #EEE;
margin-bottom: 2px;
text-align: right;
line-height: 25px;
background: #fcfcfc; /*non-CSS3 browsers will use this*/
background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4) to(#fcfcfc)); /*old webkit*/
background: -webkit-linear-gradient(left top, left bottom, #f4f4f4, #fcfcfc); /*new webkit*/
background: -moz-linear-gradient(#f4f4f4, #fcfcfc); /*gecko*/
background: -ms-linear-gradient(#f4f4f4, #fcfcfc); /*IE10 preview*/
background: -o-linear-gradient(#f4f4f4, #fcfcfc); /*opera 11.10+*/
background: linear-gradient(#f4f4f4, #fcfcfc); /*future CSS3 browsers*/
-pie-background: ulinear-gradient(#f4f4f4, #fcfcfc); /*PIE*/
-moz-box-shadow: 0 2px 2px #d8d8d8;
-webkit-box-shadow: 0 2px 2px #d8d8d8;
box-shadow: 0 2px 2px #d8d8d8;
behavior:url(PIE.htc);
}
Edit: I've added code samples
I've solved this issue changing line endings of PIE.htc to Unix (not Windows).
Tested on Windows7 + IE7 and IE8.
Hope this help you!
If css3pie is running as a local file rather than on a web server, you need to give the full path in the behavior: property, such as:
behavior:url(C:/foo/PIE.htc);
I tried placing PIE.htc file at the root file or next to (ex: html file). And in css file used exactly same attribute like this .yourClass{behavior: url(PIE.htc);}.
Actually relate your htc file to html page rather than css file. And it worked for me. :)
I'm trying to make some sliding captions, something like Mosaic, but lighter. Everything looks good in all major browsers (even if it looks slow in ie8), but nothing happens in ie7.
I'm testing with ieTester, and I have no idea if the bug comes from the software or from my code.
I'm sure you'll have some tips to help me improve it!
Thanks anyway.
HTML:
<div class="imgbox">
<img src="#" />
<a href="#" class="caption">
<div class="details">
<h6>Lorem ipsum</h6>
<p>Lorem ipsum dolor sit amet,…</p>
</div>
</a>
</div>
CSS:
.imgbox{
width: 204px;
height: 154px;
position: relative;
overflow: hidden;
float: left;
margin: 10px;
border:1px solid #999;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.8);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);}
.imgbox img{
width: 200px;
height: 150px;
padding: 2px;
overflow: hidden;}
.caption{
display:block;
position:absolute;
top:104px;
height:100%;
width:100%;
background: rgb(0,0,0);
background: rgba(0,0,0,0.6);
background: transparent\9;
zoom: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);}
JS:
$(".imgbox").hover(
function()
{$(this).children('.caption').animate({top:0},"fast");},
function()
{$(this).children('.caption').animate({top:104},"fast");}
);
Your HTML code is invalid. The a element is an inline element, and it can't contain block elements like div. Browsers have different ways of dealing with incorrect markup, and might rearrange or ignore certain tags to create elements that are valid.
Put inline elements inside the link so that they are parsed correctly, then you can use CSS to turn them into block elements:
<div class="imgbox">
<img src="#" />
<a href="#" class="caption">
<spap class="details">
<span class="h6">Lorem ipsum</span>
<span class="p">Lorem ipsum dolor sit amet,…</span>
</span>
</a>
</div>
CSS:
.imgbox a, .imgbox .details, .imgbox .h6, .imgbox .p { display: block; }
There are also some hacks in the CSS code that might not all go down well with IE7. You can comment out some of them to test if they cause problems.
I found that it came from the position of the caption. I set a top position but didn't define any left or right position.
With that piece of code it now appears on ie7:
.caption{
display:block;
position:absolute;
top:104px;
left:0;
height:100%;
width:100%;
But it's still very slow on ie8 and ie7.
Anyway, problem solved!
My page has a resolution of 800x480. It has been designed as such. Now in Firefox (I have control over the viewers machine), I want to zoom the whole screen to 800x600. I know that there is a zoom option, but that does it proportionally (e.g. 150%). Is it possible to somehow to only stretch the 480 to 600 (a sort of a zoom).
I have a valid reason to do this and am aware of the aspect ratio issues that could arise.
Thank you for your time.
You can do this in Firefox 3.5 (Gecko 1.9.1) using CSS3 2d transforms.
Here's an example with two DIVs where the second is stretched from 800x480 to 800x600.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body
{
background-color: #000;
color: #fff;
}
.viewport
{
width: 800px;
height: 480px;
background-color: gold;
color: #000;
position: absolute;
left: 0px;
top: 0px;
}
.stretched
{
background-color: rgba(255, 0, 0, 0.5);
-moz-transform: scaleY(1.25);
-moz-transform-origin: 0 0;
}
</style>
</head>
<body>
<div class="viewport"><button>Normal</button></div>
<div class="viewport stretched"><br><br><button>Stretched</button></div>
</body>
</html>
See also:
Using CSS transforms
You can use:
self.resizeTo(width, height);
Although I think Firefox has a default setting in the preferences which prevents this from working.
This code works in every other browser I've tried, except IE8.
IE8 appears to ignore the z-index - and the pop-up becomes a pop-under.
It's in the right place, just renders underneath the thumbnail.
Anyone?
Thanks!
HTML:
<a class="thumbnail" href="#thumb">
<img src="comic_a3_thumb.jpg" height="300" width="212" border="0"
style="float:right; margin-top:10px;margin-bottom:10px;"
alt="description" />
<span>
<img src="/images/comic_a3_popup.jpg" />
</span>
</a>
CSS:
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: 0px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -140px; /*position where enlarged image should offset horizontally */
left: -500px;
}
The simple answer is to add a z-index value that is greater than the .thumbnail:hover value to the hover state of the span.
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -140px; /*position where enlarged image should offset horizontally */
left: -500px;
z-index: 51;
}
Put these lines in your page head
<!--[if IE]>
<style>
#your_faulty_div{
background-color:#000; /*any color it doesn't matter*/
filter: alpha(opacity=0);
}
</style>
<![endif]-->
your_faulty_div is the div which is misbehaving due to IE z-index bug.
Works smooth , i use it in all of my projects where i have positioned elements overlaping.
If I understand you correctly, you want the span to show above the element marked as the thumbnail. You have not specified the z-index for the span element. Here is a working example:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Pop-up Test</title>
<style type="text/css">
#vbox {
border: 1px solid black;
height: 200px;
position: relative;
width: 200px;
z-index: 0;
}
#vbox:hover #hbox {
display: block;
}
#hbox {
border: 1px solid blue;
display: none;
height: 200px;
left: 50px;
position: relative;
top: 50px;
width: 200px;
z-index: 1;
}
</style>
</head>
<body>
<div id="vbox">
<p>Hover over this box to show a hidden "pop-up".</p>
<p id="hbox">This box is a pop-up.</p>
</div>
</body>
</html>
The way to fix this issue is by adding a class to the thumbnail image like this:
.thumbnail:hover img.thumb {z-index:-50; position:relative;}
This works fine in Webkit, but when I go to Firefox (Or IE8) it totally messed up. I've been staring at this for so long that I can't find any errors at all with it, so maybe one of you guys can point out where I'm going wrong.
CSS:
body {
font-family: Georgia, serif;
margin: 0px;
padding: 0px;
background: #222;
}
header {
background: #fff url('images/header-border.gif') bottom repeat-x;
width: 980px;
margin: 0px auto;
height: 100px;
padding: 0px 0px 0px 20px;
-moz-border-radius-topright: 4px; -moz-border-radius-topleft: 4px;
-webkit-border-top-right-radius: 4px; -webkit-border-top-left-radius: 4px;
border-top-right-radius: 4px; border-top-left-radius: 4px;
}
section {
}
article {
}
footer {
clear: left;
}
nav {
width: 980px;
margin: 0px auto;
height: 70px;
padding: 10px 0px 10px 0px;
font-size: 21px;
font-weight: bold;
font-family: Arial, serif;
}
nav a {
color: #fff;
text-decoration: none;
padding: 10px;
}
nav a:hover {
background: #060606;
}
#content {
width: 980px;
background: #fff;
padding: 0px 0px 0px 20px;
margin: 0px auto;
}
nav ul li {
float: left;
list-style: none;
width: 155px;
}
#left-column, #logo {
width: 560px;
margin: 0px auto;
float: left;
}
#right-column, #share {
width: 380px;
margin: 0px auto;
float: left;
height: 100%;
padding: 0px 0px 0px 20px;
border-left: 1px solid #d9d9d9;
}
address {
display: inline;
}
a img {
border: 0px;
}
.clear-left {
clear: left;
}
And the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="text/html; charset=UTF-8" />
<title>Webtint </title>
<link rel="stylesheet" href="http://localhost/wp-content/themes/clean/style.css" type="text/css" />
<link rel="pingback" href="http://localhost/xmlrpc.php" />
</head>
<body>
<nav>
<ul>
<li>home</li>
<li>tutorials <img src="http://localhost/wp-content/themes/clean/images/arrow.gif" alt="Arrow" /></li>
<li>resources <img src="http://localhost/wp-content/themes/clean/images/arrow.gif" alt="Arrow" /></li>
<li>articles <img src="http://localhost/wp-content/themes/clean/images/arrow.gif" alt="Arrow" /></li>
<li>contact</li>
<li>follow us</li>
</ul>
</nav>
<header>
<section id="logo">
</section>
<section id="share">
</section>
</header>
<div id="content">
<section id="left-column">
<article>
<h2>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h2>
<time><?php the_time('F jS, Y') ?></time> by <address><?php the_author(); ?></address>
<?php the_excerpt(); ?>
<br /><br />
Read More
<?php comments_popup_link(
'<span class="boxed">No Responses »</span>',
'<span class="boxed"> 1 Response »</span>',
'<span class="boxed">% Responses »</span>'); ?>
</article>
<hr />
</section>
<section id="right-column">
<h2>Popular Posts</h2>
</section>
</div>
<footer>
</footer>
</body>
</html>
Screenshot in Firefox:
http://imgur.com/wvhI0.gif
Screenshot in Chrome: (How it's supposed to look)
http://imgur.com/sQK8S.gif
Screenshot in IE8:
http://imgur.com/7OnEJ.gif
Thanks for any help in advance :)
Basically, you're using mostly HTML5 specific elements, and they're not supported everywhere properly yet, especially IE8 out of those you listed.
For a quick look, Here's the list of elements added in HTML5.
Try using a debug tool like Firebug or the IE developer toolbar to figure out which elements are being placed wrongly and why.
Both let you hover your mouse over blocks and will highlight the corresponding HTML. You will be able to see exactly which element it is that is being placed incorrectly, and view the CSS to try and figure out why.
Johnny, does your solution also fix the incorrect rendering in Firefox 2 and Camino 1? Interesting, as I only know of the Javascript solution. Just to give you some more feedback on this: to learn more about getting HTML5 rendered properly in all major browsers, read this article by Nico Hagenburger. You can also use this script to render HTML5 in IE.
A more general article about HTML5 and CSS3 support in IE (e.g., your corners aren't rounded) in this article. For rounded corners in all major browsers (also in Opera) please read this one. There also exist general tables about support in all major browsers of HTML5 and CSS3.
EDIT: I just read an article about HTML5 pages not rendered properly when printing from within IE, because this JavaScript solution isn't loaded when printing a page. More info on doctype.com.