CSS Position Fixed and IE

[Eric in Tennessee]

I have been learning CSS and I have to say that I am lov'en it. I purchused Eric Meyer on CSS and started going through the projects. I am in awe of what you can do with CSS. Now for my question:

Is anyone is familiar with complexspiral? located @ [meyerweb.com...]
(I hope that it is okay to post the URL, if not, I apologize)

This is the project that I am working on, basically it teaches you to place an image in a position then have a content area that overlaps but you can see the image through the content (at least that is the illusion).

It has been said that ie has a problem with the

FIXED position attribute

(do I have my terminology right?). And a fellow named Andrew at doxdesk has written a javascript fix for the problem but it doesn't seem to work right. I am fairly certain that this fellow is quite reputable as he is referenced in the book.

Has anyone done this before and overcome this problem with the non-complying microsoft product?

Did I make myself clear with my question? Please ask/give advice as to how I can pose my future questions better.

Thanks to all that have time to respond.

Eric

[SuzyUK]

Eric, Your question is fine and there is partial answer.

AFAIK, the complexspiral cannot be recreated with whole images, without the use of the script. Although I thought that doxdesks script did work but it's downside was that the scroll wasn't "smooth", but I haven't actually used it so that may not be correct.

There are some IE CSS hacks for achieving position: fixed; I tested some and they work quite well (note I tested in IE6 quirks mode) and although I could probably work out a way to achieve the complex spiral with these it would require slicing the images and changing the HTML code structure especially for the links section of the demo page.

If you're just trying to overlay a background without getting into the complexity of the four different images that are involved in the links section, the IE positioned fixed hacks might suffice.

I can't post the URLs for the hacks but if you search for - position fixed ie hack - or something like that you will find some CSS workarounds

Suzy

[DrDoc]

There's actually a very easy way of getting the sprial demo to work in IE5+, even if IE6 is in strict mode.

Create a second style sheet where you don't give the main content area or links a background image. Instead, give them a background color, and use the alpha filter.

For example, the CSS for a:hover could look something like:

a:hover {
background-image: none;
background-color: #fff;
filter: Alpha(Opacity="35");
}

Adjust background color and opacity as you want for applicable elements...

Then just include the style sheet using IE's conditional comments:

<!--[if IE]>
<link ...>
<[!endif]-->

[Eric in Tennessee]

Suzy and DrDoc,

Thank you for taking the time to help me. Maybe if ya'all fall down and hurt yourselves I might be able to return the favor someday. :)

I will give it a try and see what happens.

Eric

[MonkeeSage]

-moz-opacity: 0.35;

^ the Mozilla version

Jordan

[Eric in Tennessee]

Hey DrDoc:

<!--[if gte IE 5]>
<style type="text/css">
body {margin: 0; padding: 0;}
div#content {margin: 60px 25px 25px 202px;
color: black; font: 14px Verdana, sans-serif; padding: 10px;
border: 3px solid #D64617; }
h1 {background: black; color: rgb(92%,172%,238%);
margin: -9px -9px 0.7em; padding: 15px 0 5px;
font: italic bold 30px/25px "Palentino Linotype" Verdana, Arial, sans-serif;
letter-spacing: 0.5em; text-align: right; text-transform: lowercase;}
p {margin: 0 1em 1em; font-size: 2em;}
div#links {position: absolute; top: 280px; left: 0; width: 205px;}
div#links a {display: block;
padding: 5px 10px; margin: 0 0 2px; border-width: 0;
border: 1px solid #D64617;
border-right: 3px solid #D64617;
text-align: center; font: bold 17px/17px sans-serif;
text-decoration: none; color: rgb(25%,25%,40%);}
div#links a:hover {color: #D64617; border-right-color: #6D629D;}
body {background-image: none; background-color: #9B9693; filter: Alpha(Opacity="40");}
div#content {background-image: none; background-color: #A9BBBF; filter: Alpha(Opacity="35");}
div#links a {background-image: none; background-color: #A9BBBF; filter: Alpha(Opacity="100");}
</style>
<[!endif]-->

What did I do wrong? The effect is working, but there is now a second image (same image) in the wrong place. AND <[!endif]--> is showing up at the top of the page.

This with ie6

I also tried to replace body {...} with
body {background: #9B9693 url(images/charliebearface.jpg) 10px 110px no-repeat fixed;}
but then I lose the effect and my h1 is messed up?

Am I being an ignoramus? Speak freely, you won't hurt my thick hide :)

Eric

[DrDoc]

Change <!--[if gte IE 5]> to just <!--[if IE]>

[Eric in Tennessee]

DrDoc:

Thank you for your help, I got it working -ALMOST...

I still get "<[!endif]-->" at the top of the page.

Any ideas?

Eric

[MonkeeSage]

Try...

<![endif]-->

...with ! outside of the brackets.

Jordan

[Eric in Tennessee]

Hey Thanks for the input Jordan,

That seemed to do the trick, I am still having minor problems with the image that is in the #content.

If I have two(2) external Style Sheets one that is exclusively for IE and one(1) that is for everyone else, what do I do?

As we speak I have ESS for IE but styles at the top for everyone. I am sure that the in Doc Style Sheet is confusing the External and I believe that the inDoc takes presidence when there is conflict.

I think that I will make the inDoc an External SS and see what happens. Do you know if there is a code similar to the one used to render IE specific Styles for other Browsers that are not micro$oft products?

Eric