views:

99

answers:

2

It appears that IE8 is not rendering properly a local file:

Consider this simple webpage: http://sayang.free.fr/ie8render.html (html code below) extracted from a w3c tutorial on opacity.

Save it locally and display it again: the local file has no opacity!

That's very annoying, especially when one wants to design complex pages on prototypes placed in local files.

Do you have a solution to that ?

<html>
  <head>
    <title>IE8 Local File</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="-1" />

    <style type="text/css">
    div.background
      {
      width: 500px;
      height: 250px;
      background: url(http://www.w3schools.com/css/klematis.jpg) repeat;
      border: 2px solid black;
      }
    div.transbox
      {
      width: 400px;
      height: 180px;
      margin: 30px 50px;
      background-color: #ffffff;
      border: 1px solid black;
      /* for IE */
      filter:alpha(opacity=60);
      /* CSS3 standard */
      opacity:0.6;
      }
    div.transbox p
      {
      margin: 30px 40px;
      font-weight: bold;
      color: #000000;
      }
    </style>
  </head>
  <body>
    <h2>Save this file locally and open it to see the difference</h2>
    <div class="background">
      <div class="transbox">
        <p>This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box.</p>
      </div>
    </div>
  </body>
</html>
A: 

If you know that your code works in IE7 you can force IE8 browsers to use IE7 standards by including the following tag inside <head>

 <meta http-equiv="X-UA-Compatible" content="IE=7"> 
Kasturi
I gave everything for you to try before posting.Your answer is useless (but will increase your points), sorry for being harsh but it deserves it.
Eric
how is my points gonna increase?
Kasturi
+1  A: 

Hi,

I hope this below URL will help you to solve your issue..

http://css.flepstudio.org/en/css3/opacity-transparency.html

VAC-Prabhu
Thank you but it's not a matter of how to implement transparency, but rather how to make it work on a local file.
Eric