Fixed layers in IE ?

[Marie ALHOMME]

Hi everybody !

I'm new here, and I'm French, so pardon me for any and all grammar and
typo mistakes !
I hope you'll understand everything anyway :)

I'm working on my portfolio site, which I am completely rewriting in
HTML 4. strict + CSS.
In the Gallery part of the site, people can see thumbnails of my work
and when they click on any work, it opens a popup (btw : I'm not here to
decide of the wiseness of this choice).
I have made a version of the pop-up that looks the way I want it to...
but only in netscape and associates (Gecko-based, to make a long story
short), IE refusing to display thing the way I intended.
As the other browsers don't seem to have problems, I'm thinking it's IE
working the way it wants to instead of the way it should... I had
forgotten I should be prepared for disapointment when dealing with CSS
implementation in IE !

The problem is this :
In the page in the popup, there is a div "titre" (title) that contains a
couple of lines of text, presenting the work. It is "fixed". (that's
where the problem lies)
Below this div is a list that is styled to be displayed "inline" and
with a margin-top on the ul to avoid running under the fixed div.

The "fixed" property is, from what I've heard, not supported by IE...
which renders the page in a quite ugly fashion !
Someone offered to use frames, but I think he was kidding :)
If I take the margin-top out of my ul, it looks "better" in IE, but then
it sucks in netscape or mozilla...
The only "stable" solution (the one that seems to work everywhere, and
with very little changes in display) is using tables... which Opera
(from what I gathered) doesn't understand ?!

And, frankly, if I'm trying so hard (and managing, up to now) to code in
HTML 4 *strict* the main pages of my site, it's not to use tables and
frames in my popups...

So, I'm fishing for any solution here...
I just have no clue what to do.

So, anyway, here is the adress of the page calling a demo popup :
http://www.pouipouidesign.net/lbtc.htm
When you click on the "lbtc" link at the top left of the page, a popup
should open, that's were the problem is (check the source).

The CSS used is the following :
-----------------
body {
margin: 0px;
padding: 10px;
text-align: left;
font: 0.7em black verdana;
}

#titre {
position: fixed;
font-size: 1.2em;
font-weight: 800;
font-variant: small-caps;
color: #FF9900;
font-stretch: expanded;
}

#titre span {
color: black;
font-size: 0.7em;
font-weight: lighter;
font-stretch: extra-expanded;
}

#titre span.soustitre {
font-size: 1em;
line-height: 2.5em;
font-style: italic;
}
-----------------

I appreciate any help, clue or hint to how I can solve this issue,
especially since I'm in a sort of rush : not being able to solve this
thing is stopping me from advancing on the rest of the site, and I need
the site in my job search !
Thanks again for your attention, and for the help you'll (hopefully)
bring me !!

Marie

[Marie ALHOMME]

Just to add that if anyone has an alternative to the ul/li that he/she
thinks would semantically be more correct, or would pose less trouble
(divs ?), I'm all ears :)
Marie

[Marie ALHOMME]

Ok, I'm being a bit dense today, my apologies to everyone...
Here is the missing css code, the part about the ul and li... the
essential part :)

Sorry !!!

Missing part of the previously pasted css code
----------------------
ul {
margin-top: 6em;
margin-left: -4em;
width: 2360px;
height: 430px;
}

li {
width: 770px;
height: 430px;
padding-left: 10px;
float:left;
list-style-type: none;
border-right: 1px solid black;
}
----------------------
Thanks again !

Marie

[Brian]

Marie ALHOMME@ Will Up wrote:

I'm new here, and I'm French, so pardon me for any and all grammar and
typo mistakes !
Vous écrivez bien en anglais. Ne vous inquietez pas. Mon français, par
contre... eh bien, vous verrez.
I hope you'll understand everything anyway :)
Ben oui !
I'm working on my portfolio site, which I am completely rewriting in
HTML 4. strict + CSS.
In the Gallery part of the site, people can see thumbnails of my work
and when they click on any work, it opens a popup (btw : I'm not here to
decide of the wiseness of this choice).
Well, this is not a helpdesk. What is discussed here is up to each
participant. If people want to talk about why popups are a bad idea,
or why they're a good idea, they'll do so, in spite of what anyone
else wants. As long as it's on-topic, it's fair to discuss it. I
suppose pop-ups belong in ciwa-sitedesign or -html more than in
stylesheets, but it will still create discussion here.

And, on that note, let me tell you not to use popups. :-p I'll leave
it other to discuss how popups are hated, and how you should leave it
to the user. Better still, just read the scores of threads about it.
Let me just add this: I redesigned an artist's website. It had
thumbnails, and used javascript to create small popups with her photos
framed on the. But when javascript was disabled, the links failed to
do anything. I fixed that so that the photo displayed in the same
window when javascript was disabled.

Now, several months later, the photographer emailed me to say she was
unhappy with popups altogether, and wishes she had never used them.
It seems she watched some friends try to navigate through her
galleries, and the popups made it painfully slow for them. They
didn't know any shortcuts to close windows or change focus, and they
were slow with the mouse.

Thus, for an artist's website, popups may not be the way to go for
usability. The site in question:

http://www.julietremblay.com/

And a site which does not use popups, for comparison:

http://www.tedbeardsley.com/
The problem is this :
In the page in the popup, there is a div "titre" (title) that contains a
couple of lines of text, presenting the work. It is "fixed". (that's
where the problem lies)

The "fixed" property is, from what I've heard, not supported by IE...
C'est correct. La solution: position: absolute

div.titre {
position: absolute ;
top: 0 ;
left: 0 ;
}

If you want position fixed in Gecko browsers, just use a trick to hide
css from IE.

http://w3development.de/css/hide_css_from_browsers/

In particular:
http://w3development.de/css/hide_css...rowsers/child/
div.titre {
position: absolute ;
top: 0 ;
left: 0 ;
}

body>div.titre {
position: fixed ;
}

Ça vous va ?
The only "stable" solution (the one that seems to work everywhere, and
with very little changes in display) is using tables... which Opera
(from what I gathered) doesn't understand ?!

Du tout. Opera understands tables fine. Opera users can turn table
support off, perhaps that is what you heard?

De toute façon, ca vaut mieux de ne pas utiliser "tables" pour la
présentation. Mais vous le saviez déjà.

--
Brian
follow the directions in my address to email me

[Marie ALHOMME]

Brian wrote:

Marie ALHOMME@ Will Up wrote: Vous écrivez bien en anglais. Ne vous inquietez pas. Mon français, par
contre... eh bien, vous verrez.
Thank you !
Votre français est excellent, pas d'inquiétude ! :)

Well, this is not a helpdesk.
Funny, I saw that one coming ;)
What is discussed here is up to each
participant. If people want to talk about why popups are a bad idea,
or why they're a good idea, they'll do so, in spite of what anyone
else wants. As long as it's on-topic, it's fair to discuss it. I
suppose pop-ups belong in ciwa-sitedesign or -html more than in
stylesheets, but it will still create discussion here.
Of course, I never meant to imply that those answers would be
inappropriate or even regarded by me as insulting or anything like that.
I just meant to say that I've been through this discussion on pop-ups
many many times and I know the cons and pros, and why people say not to
use them, or to use them...
I have listened and participated in all those discussions, and the
end-result is that for this site, I have already made my decision as to
using pop-ups, and *no one* will make me budge :)
And, on that note, let me tell you not to use popups. :-p I'll leave
it other to discuss how popups are hated, and how you should leave it
to the user. Better still, just read the scores of threads about it.
Let me just add this: I redesigned an artist's website. It had
thumbnails, and used javascript to create small popups with her photos
framed on the. But when javascript was disabled, the links failed to
do anything. I fixed that so that the photo displayed in the same
window when javascript was disabled. [SNIP]

:) Thank you for giving me your opinion... which I will kindly disregard
;)
I know of all the limitations and reasons, but I still have decided to
use pop-ups :)
I am already aware of the "double link" precaution so that people
without javascript can still use links... I have actually implemented it
everywhere as a rule !

C'est correct. La solution: position: absolute

div.titre {
position: absolute ;
top: 0 ;
left: 0 ;
}

If you want position fixed in Gecko browsers, just use a trick to hide
css from IE. [SNIP] Ça vous va ?
Impeccable :)
It's actually the solution I had finally decided on implementing, even
though I lose the effect in IE.
Someone on another newsgroup has custom-made for me a version that
"acts" like "fixed" in IE *and* the others... I'll try it out tonight or
tomorrow, and will let you know how that goes.
I'm guessing a few people could be interested !! :)

Du tout. Opera understands tables fine. Opera users can turn table
support off, perhaps that is what you heard?
I don't know ?
On another newsgroup, when I mentionned tables, one of the participants
pointed out : "My opera doesn't understand tables"... was he leading me
along ? :)

De toute façon, ca vaut mieux de ne pas utiliser "tables" pour la
présentation. Mais vous le saviez déjà.

Yup... "tables are for tabular data and not for layout"... get that
thrown at you enough times and you'll assimilate it :)

Thank you very much for your help !

I will certainly come back in a few days to ask for your opinion on the
new version of my site...

In the meantime, have a great day !! :)
Marie

[Brian]

Marie ALHOMME@ Will Up wrote:

Brian wrote:

Marie ALHOMME@ Will Up wrote:

Votre français est excellent, pas d'inquiétude ! :)
Vous êtes trop gentille, vous.
C'est correct. La solution: position: absolute
Ça vous va ?

Impeccable :)

:)
Someone on another newsgroup has custom-made for me a version that
"acts" like "fixed" in IE *and* the others... I'll try it out tonight or
tomorrow, and will let you know how that goes.
I'm guessing a few people could be interested !! :)
On a déjà discuté cette solution. It requires setting height on the
html element to 100%, I think, then setting overflow on body. Tout
simplement, il me faudrait trop. Les sites que je fais, s'ils
fonctionnent du façon différent, selon le browser utilisé, ça ne
m'embête pas.
I don't know ?
On another newsgroup, when I mentionned tables, one of the participants
pointed out : "My opera doesn't understand tables"...
Ah. The important word is "My." He had likely disabled tables, so
Opera did not render them.
was he leading me along ? :)
Il ne vous a pas dit tout. Le browser Opera -- ou bien Opéra? :) --
peut parfaitement faire un <table>, à moins que l'on ne les supprime.
I will certainly come back in a few days to ask for your opinion on the
new version of my site...

In the meantime, have a great day !! :)

vous même !

--
Brian
follow the directions in my address to email me

[Anne van Kesteren]

I'm not that good in French, but are you looking for this:
<http://limpid.nl/lab/css/fixed/>?

--
Anne van Kesteren
<http://www.annevankest eren.nl/>