Ray wrote:
> Working on the initial stages of a layout, which floats an image across
> a portion of the page masthead, in the upper right corner of the page.
> In Firefox 1.5, at resolutions around 1024 wide, the image disappears.
> At lower resolutions the page works properly.
> http://re.ality.org/acts/wp-content/themes/acts/layout.html
The graphic disappears in other browsers, too. Remove the negative
margin top of -200px in #butterfly and html > body #butterfly. The float
is vertically moving up as high as possible, and next to the floating
#header once there is enough room to the left of it.
I'd use absolute positioning. Move the butterfly into the header
<div id="header">
<h1>acts</h1>
...
<div id="butterfly"> </div>
</div>
Containing block for the butterfly:
#header {
position:relative;
...
/* z-index:5 */ /* not needed */
}
Replace the rules with
#butterfly {
position: absolute;
top: -75px;
right: -50px;
width: 152px;
height: 161px;
background-image: url(path/butterfly.gif);
}
IE6+7 has problems with your sidebar, as
#content { clear: both; float: right; ...
does not clear #header [1], and sidebar flows up once the screen is wide
enough. Even clear:both in sidebar wouldn't stop it. The
margin-left:150px in header cannot prevent this, and looks ugly when the
window is sized.
My standalone IE6 side-by-side IE7 seems to be way too slow to handle
the transparency on your page. IE6 needs seconds to react on window
resize. If this is happening on your side too, I'd drop the effects for IE6.
Ingo
[1] description and workaround in http://www.brunildo.org/test/IEWfc.html
--
http://www.satzansatz.de/css.html
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
