By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,767 Members | 1,255 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,767 IT Pros & Developers. It's quick & easy.

IE workaround for position:fixed

P: n/a
Guys at comp.infosystems.www.authoring.stylesheets,

I have designed a page [1] in (x)HTML transitional that I am happy with
in (close to) standard compliant browsers (i.e. Firebird/Opera), but IE
is causing problems as can be expected since I have used
position:fixed.

I don't want to use too many hacks and I don't care that the page looks
a bit different in IE (their loss) but I want it to be usable.

May aim is to get the page to work in IE as in the browsers above with
the change that in IE, everything scrolls. The page should be
resizeable in width but still have a maximum width. Content in the menu
should wrap as it does in O/FB.

I have the following problems which I hope some of you may help me
with:

* I have made an invisible DIV (visible for IE - <DIV id="ie">) to
indent the top menu - <DIV class="menu"> (which is
position:fixed) as much as the <DIV class="trans"> below it
holding the body text (which is position:absolute).

* I have also duplicated the background image onto a DIV to get the
positioning of the <DIV menu> correct from the top of the page.
The structure of the DIVs is then thus:
<DIV nowrap>
<DIV transparent except IE></DIV transparent>
<DIV menu></DIV menu>
</DIV nowrap>
<DIV trans [i.e. body]></DIV trans>

Q 1: I cannot seem to prevent the 2 DIVs (not their content but the
2 DIV blocks themselves) in the DIV nowrap from wrapping which
I do not want them to.

Any suggestions?

* The logo I have put on top of the page duplicating the backgound
image seems to have some transparent pixels around it (you'll
notice them when scrolling).

Q 2: Is this avoidable?

* The content in the <DIV menu> itself does not wrap.

Q 3: Why?

* I also have a problem with the partial transparency of the <DIV
class="trans"> using the "filter:
progid:DXImageTransform.Microsoft.Alpha(opacity = 95);" hack
which seems to make the transparent area blue-ish grey.

Q4: Is this normal for partial transparency in IE?

Thank you all for help, hints and suggestions.

-----

[1] <http://www.dir-dk.org/udstyr/regulatorer.html>
FYI: The language is Danish and the page is about diving.

--
<author> Peter Fjelsten </author>
<e-mail valid> yes </e-mail valid>

Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Peter Fjelsten <no****@adr.dk> wrote:
[1] <http://www.dir-dk.org/udstyr/regulatorer.html> I have designed a page [1] in (x)HTML transitional that I am happy with
in (close to) standard compliant browsers (i.e. Firebird/Opera), but IE
is causing problems as can be expected since I have used
position:fixed.

I don't want to use too many hacks and I don't care that the page looks
a bit different in IE (their loss) but I want it to be usable.

May aim is to get the page to work in IE as in the browsers above with
the change that in IE, everything scrolls. The page should be
resizeable in width but still have a maximum width. Content in the menu
should wrap as it does in O/FB.

I have the following problems which I hope some of you may help me
with:

* I have made an invisible DIV (visible for IE - <DIV id="ie">) to
indent the top menu - <DIV class="menu"> (which is
position:fixed) as much as the <DIV class="trans"> below it
holding the body text (which is position:absolute).


I don't understand what the problem is, there should be no need to hide
divs, simply use a css hack to feed IE position:absolute, and feed other
UAs position:fixed.

Theoretically you could use:
div.class{position:absolute;position:fixed}

A standard compliant UA that doesn't support position:fixed should
ignore it and use position:absolute, alas IE apparently thinks it
supports position:fixed, thus you have to use a css hack.

You've created something strange though, is this the way it is supposed
to look in IE: http://www.spartanicus.utvinternet.ie/test/peter_ie.png
or Opera: http://www.spartanicus.utvinternet.i...eter_opera.png
?

--
Spartanicus
Jul 20 '05 #2

P: n/a
Spartanicus wrote in Message-ID:
<q3********************************@news.spartanic us.utvinternet.ie>:
I don't understand what the problem is, there should be no need to
hide divs, simply use a css hack to feed IE position:absolute, and
feed other UAs position:fixed. Theoretically you could use:
div.class{position:absolute;position:fixed} A standard compliant UA that doesn't support position:fixed should
ignore it and use position:absolute, alas IE apparently thinks it
supports position:fixed, thus you have to use a css hack.
What hack would that be? I want no browser sniffer scripts.
You've created something strange though, is this the way it is supposed
to look in IE: http://www.spartanicus.utvinternet.ie/test/peter_ie.png
or Opera: http://www.spartanicus.utvinternet.i...eter_opera.png
?


Good browsers: The menu and the logo is supposed to be fixed at the top
and the main text area should scroll semi-transparently on top of it.
This works here in Opera (checked in (7.5b1) and Firebird (0.8). In
these browsers, the page looks exactly like I want it to be. I just want
to make it usable in IE.

Bad browsers: The whole page should scroll with the main text area
overlapping the logo, semi-transparently. This is giving me problems in
IE.

If I remove the hidden IE-only DIV, the menu is placed further to the
left than the main area DIV. This looks a bit silly but it's OK. So the
hidden DIV (for other browsers than IE does nothing more than setting
the DIV.menu correctly, now that IE does not understand position:fixed.

I still have an issue that the content cannot be resized small than the
_maximum_ width I have set using an IE hack:

width:expression(document.body.clientWidth > (500/12) *
parseInt(document.body.currentStyle.fontSize)?
"40em":
"auto");

Any idea why?

Thank you for you help...

--
<author> Peter Fjelsten </author>
<e-mail valid> yes </e-mail valid>

Jul 20 '05 #3

P: n/a
Peter Fjelsten <no****@adr.dk> wrote:
A standard compliant UA that doesn't support position:fixed should
ignore it and use position:absolute, alas IE apparently thinks it
supports position:fixed, thus you have to use a css hack.


What hack would that be? I want no browser sniffer scripts.


The css child selector hack for example:

div.class{position:absolute} /* understood by IE */
body>div.class{position:fixed} /* understood by proper UAs, not by IE */

--
Spartanicus
Jul 20 '05 #4

P: n/a
Spartanicus wrote in Message-ID:
<rq********************************@news.spartanic us.utvinternet.ie>:
What hack would that be? I want no browser sniffer scripts.
The css child selector hack for example:


I used the "asterisk" hack and not the page looks almost as I want it
to.

If only I could make the semi-transparent area "white transparent"
instead of the "bluish-grey transparent" it is now, I'd be happy.

,----- [ What I have now (the relevant bit of the transparent area) ]
| background-color:#FFFFFF;
| filter: progid:DXImageTransform.Microsoft.Alpha(opacity = 93);
`-----

,----- [ ]
| BODY {
| MARGIN: 0em;
| padding: 0em;
| background-color: #FFFFFF;
| background-repeat: no-repeat;
| background-position: auto, 0px;
| background-attachment: fixed;
| background-image: url(images/bannerbg.png);
| }
`-----

--
<author> Peter Fjelsten </author>
<e-mail valid> yes </e-mail valid>

Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.