Div stacking problem on Internet Explorer
Posted: 10 February 2010 12:27 AM   [ Ignore ]
Newbie
Rank
Total Posts:  5
Joined  2009-11-04

I’m completely stumped on this problem. I need part of this html page to have transparency, but then have completely opaque text on top of that. Since anything within a div with transparency automatically inherits that transparency, I decided to fix that by layering an opaque div over the div with transparency.
This works wonderfully in FF3 and Safari. However, IE7 is giving me fits (no surprise here). The divs simply will not layer. I believe that the problem is because z-index is overloaded by IE7, but I can’t find a workaround that works for it. Can anyone else? I really appreciate the help!

The complete html is:


<head>
  <title>Example</title>
  <style type=“text/css”>
body
{
  margin:0px 0px 0px 0px;
  background-color:white;
}

.wrapper
{
  height:425px;
  width:520px;
  background-color:cyan;
  margin-left:auto;
  margin-right:auto;
  top:0px;
}

.midbox
{
  height:280px;
  width:520px;
}

.shaded
{
  position:relative;
  z-index:0;
  height:95px;
  width:520px;
  background-color:yellow;
  filter:alpha(opacity=50); /* for IE */
  -moz-opacity:0.5; /* for older browsers */
  -khtml-opacity:0.5; /* for older browsers */
  opacity:0.5;
}

.unshaded
{
  float:left;
  position:relative;
  z-index:1;
  filter:alpha(opacity=100); /* for IE */
  -moz-opacity:1.0; /* for older browsers */
  -khtml-opacity:1.0; /* for older browsers */
  opacity:1.0;
  height:95px;
  width:520px;
}

.bigName
{
  position:relative;
  border-style:none;
  font-family:Arial Unicode MS;
  font-size:50px;
  width:250px;
  height:55px;
}

.bigUsername
{
  position:relative;
  border-style:none;
  font-family:Arial Unicode MS;
  font-size:15px;
  width:250px;
}
  </style>

</head>

<body>
<form id=“form1”>                   

  <div class=“wrapper” >
  <div id=“divTop” class=“unshaded”>
  <table width=“320px”><tr><td align=“center”>
      <input type=“text” name=“theirName” value=“Foo”  size=“15” class=“bigName” readonly=“readonly” />
     

      <input type=“text” name=“theirUsername” value=“bar”  size=“15” class=“bigUsername” readonly=“readonly” />
  </td></tr></table>
  </div>
  <div id=“divTopS” class=“shaded”></div>
 
  <div id=“divMid” class=“midbox”>
        <!—some stuff here—>
  </div>
 
  <div id=“divBot"class=“unshaded”>
      <input type=“submit” value=“a button” />
  </div>
  <div id=“divBotS” class=“shaded”>
  </div>
  </div>
 
</form>
</body>
</html>

Profile
 
 
Posted: 12 February 2010 08:52 PM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  5
Joined  2009-11-04

For anyone interested, the fix has been found! All that was needed to do was:
1. position:relative in .shaded and .unshaded was changed to position:absolute
2. The height in .midbox was changed to 330px

Profile
 
 
Posted: 26 April 2010 01:04 AM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  14
Joined  2010-04-22

rewolfgirl, thanks for the tips. This is a huge help for anyone struggling with IE7.

Profile
 
 
Posted: 27 April 2010 01:09 PM   [ Ignore ]   [ # 3 ]
Newbie
Rank
Total Posts:  3
Joined  2010-04-27

I’m completely stumped on this problem. I need part of this html page to have transparency, but then have completely opaque text on top of that. Since anything within a div with transparency automatically inherits that transparency, I decided to fix that by layering an opaque div over the div with transparency.
This works wonderfully in FF3 and Safari. However, IE7 is giving me fits (no surprise here). The divs simply will not layer. I believe that the problem is because z-index is overloaded by IE7, but I can’t find a workaround that works for it. Can anyone else? I really appreciate the help!

<title>Example</title>
  <style type=“text/css”>
body
{
  margin:0px 0px 0px 0px;
  background-color:white;
}

.wrapper
{
  height:425px;
  width:520px;
  background-color:cyan;
  margin-left:auto;
  margin-right:auto;
  top:0px;
}

.midbox
{
  height:280px;
  width:520px;
}

.shaded
{
  position:relative;
  z-index:0;
  height:95px;
  width:520px;
  background-color:yellow;
  filter:alpha(opacity=50); /* for IE */
  -moz-opacity:0.5; /* for older browsers */
  -khtml-opacity:0.5; /* for older browsers */
  opacity:0.5;
}

.unshaded
{
  float:left;
  position:relative;
  z-index:1;
  filter:alpha(opacity=100); /* for IE */
  -moz-opacity:1.0; /* for older browsers */
  -khtml-opacity:1.0; /* for older browsers */
  opacity:1.0;
  height:95px;
  width:520px;
}

.bigName
{
  position:relative;
  border-style:none;
  font-family:Arial Unicode MS;
  font-size:50px;
  width:250px;
  height:55px;
}

.bigUsername
{
  position:relative;
  border-style:none;
  font-family:Arial Unicode MS;
  font-size:15px;
  width:250px;
}
  </style>

</head>

<body>
<form id=“form1”>                   

  <div class=“wrapper” >
  <div id=“divTop” class=“unshaded”>
  <table width=“320px”><tr><td align=“center”>
      <input type=“text” name=“theirName” value=“Foo”  size=“15” class=“bigName” readonly=“readonly” />
     

      <input type=“text” name=“theirUsername” value=“bar”  size=“15” class=“bigUsername” readonly=“readonly” />
  </td></tr></table>
  </div>
  <div id=“divTopS” class=“shaded”></div>
 
  <div id=“divMid” class=“midbox”>
        <!—some stuff here—>
  </div>
 
  <div id=“divBot"class=“unshaded”>
      <input type=“submit” value=“a button” />
  </div>
  <div id=“divBotS” class=“shaded”>
  </div>
  </div>
 
</form>
</body>
</html>

______________________________


Real Estate Nashville
Houses for sale

Profile
 
 
Posted: 03 October 2010 06:35 PM   [ Ignore ]   [ # 4 ]
Newbie
Rank
Total Posts:  5
Joined  2010-10-03

I don’t understand what are you?

Profile
 
 
Posted: 14 October 2010 02:55 PM   [ Ignore ]   [ # 5 ]
Newbie
Rank
Total Posts:  2
Joined  2010-10-14
rewolfgirl - 12 February 2010 08:52 PM

For anyone interested, the fix has been found! All that was needed to do was:
1. position:relative in .shaded and .unshaded was changed to position:absolute
2. The height in .midbox was changed to 330px

Good thank you !
________________
paris hilton sex tape - Kim Kardashian - dating

Profile
 
 
   
 
 
‹‹ IE6 problem      Problem solved. ››