473,326 Members | 2,175 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

IE workaround for position:fixed

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
4 5854
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: Grayle | last post by:
I've heard that "position:fixed", which I use to scroll a navigation menu, does not work in IE. I have limited access to IE and would prefer to keep it that way. I am using <div class="nav">...
9
by: Paul Trautwein | last post by:
I'm trying to get an image to float in a window despite scrolling. I've gotten it to work on my Mac using IE 5.2, Netscape, and Safari, but it goes wonky when I test it on a PC. (testing with IE...
5
by: Ted Mayett | last post by:
I've read a lot through the google archives, but I cannot seem to find an example... Has someone successfully made css code that allows for position: fixed to work in IE 6.0.2800? What is the...
7
by: Erik Sandblom | last post by:
Hello I'm trying to make some tooltips which are position:fixed. It works fine in Opera and Safari/Konqueror, but in Firefox and Camino (ie Mozilla), it takes a few seconds for each tooltip to...
2
by: Eric Lindsay | last post by:
What problems are there in using position: fixed; with left: %; and right: %; to do pages that look like a typical boring framed site. A full width header and a footer and the rest of the content...
11
by: Mathias Wrede | last post by:
Hi, is there anybody who can give me a hint?. I would like to create a fixed positioned navigation area. There are no probs with correct working browsers (FF, Opera, Konqueror etc.). The...
2
by: Eric Lindsay | last post by:
Googling suggests that IE7 may support position: fixed; I think this might be handy for some pages I want to do. Does anyone have any comments about whether fixed should be considered for use on...
1
by: Tom Cole | last post by:
I've written a small javascript library to help automate Ajax requests and the like. One of the things I want the library to do is display a "Please wait" indicator in the upper right hand corner...
5
by: pbd22 | last post by:
hi. i am messing around with CSS2.1 and position:fixed. I can't seem to get a "loading" span to move a little further left onto the page. It seems stuck on the upper right and kind of half way...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.