469,360 Members | 1,799 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,360 developers. It's quick & easy.

Positioning trouble

On the page at

http://gavelcade.com/tests/trivia.html

I'm expecting the headings and the text that follows them to be positioned
without regard to image or the DIV that contains it, which is positioned
absolutely. In other words, I'm expecting each heading to start even with
the top of the related image, though with a left margin that clears the
image, and then a small leftward jog so that it does start inside the right
edge of the image. The individual items below the headings should have the
same left margin and fall immediately under the headings.

Instead, the images and the DIVs containing them seem to be remaining in the
flow.

Could anyone tell me what I'm missing?

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ter le premier point de mon adresse de courriel.

Jul 20 '05 #1
12 1882
Els
Harlan Messinger wrote:
On the page at

http://gavelcade.com/tests/trivia.html

I'm expecting the headings and the text that follows them
to be positioned without regard to image or the DIV that
contains it, which is positioned absolutely. In other
words, I'm expecting each heading to start even with the
top of the related image, though with a left margin that
clears the image, and then a small leftward jog so that it
does start inside the right edge of the image. The
individual items below the headings should have the same
left margin and fall immediately under the headings.

Instead, the images and the DIVs containing them seem to be
remaining in the flow.

Could anyone tell me what I'm missing?


This I think:

img.subjectimage
is not the same as
div.subjectimage img :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: S a a r - 8
Jul 20 '05 #2

"Els" <el*********@tiscali.nl> wrote in message
news:Xn*****************@130.133.1.4...
Harlan Messinger wrote:
On the page at

http://gavelcade.com/tests/trivia.html

I'm expecting the headings and the text that follows them
to be positioned without regard to image or the DIV that
contains it, which is positioned absolutely. In other
words, I'm expecting each heading to start even with the
top of the related image, though with a left margin that
clears the image, and then a small leftward jog so that it
does start inside the right edge of the image. The
individual items below the headings should have the same
left margin and fall immediately under the headings.

Instead, the images and the DIVs containing them seem to be
remaining in the flow.

Could anyone tell me what I'm missing?


This I think:

img.subjectimage
is not the same as
div.subjectimage img :-)


Ah, that's what I was overlooking. Thanks. Though

div.subjectimage img

is also not what I wanted, because I want the whole div to be positioned,
not just the image (which has to be inside a block anyway--or else, AIUI,
the browser will put it in an anonymous block). So I changed it to

div.subjectimage

and now I have a different problem in IE6, which has moved the images to the
right so that they are left-aligned with the text. Opera and Firefox are
fine. Can I just not do something this complicated with IE in the picture?

Jul 20 '05 #3

"Harlan Messinger" <h.*********@comcast.net> wrote in message
news:2l************@uni-berlin.de...
Ah, that's what I was overlooking. Thanks. Though

div.subjectimage img

is also not what I wanted, because I want the whole div to be positioned,
not just the image (which has to be inside a block anyway--or else, AIUI,
the browser will put it in an anonymous block). So I changed it to

div.subjectimage

and now I have a different problem in IE6, which has moved the images to the right so that they are left-aligned with the text. Opera and Firefox are
fine. Can I just not do something this complicated with IE in the picture?


This kills me: it even works in Netscape 4.7. Just not IE.

Jul 20 '05 #4
Els
Harlan Messinger wrote:
"Els" <el*********@tiscali.nl> wrote in message
news:Xn*****************@130.133.1.4...
Harlan Messinger wrote:
> On the page at
>
> http://gavelcade.com/tests/trivia.html
>
> I'm expecting the headings and the text that follows
> them to be positioned without regard to image or the DIV
> that contains it, which is positioned absolutely. In
> other words, I'm expecting each heading to start even
> with the top of the related image, though with a left
> margin that clears the image, and then a small leftward
> jog so that it does start inside the right edge of the
> image. The individual items below the headings should
> have the same left margin and fall immediately under the
> headings.
>
> Instead, the images and the DIVs containing them seem to
> be remaining in the flow.
>
> Could anyone tell me what I'm missing?


This I think:

img.subjectimage
is not the same as
div.subjectimage img :-)


Ah, that's what I was overlooking. Thanks. Though

div.subjectimage img

is also not what I wanted, because I want the whole div to
be positioned, not just the image (which has to be inside a
block anyway--or else, AIUI, the browser will put it in an
anonymous block). So I changed it to

div.subjectimage

and now I have a different problem in IE6, which has moved
the images to the right so that they are left-aligned with
the text. Opera and Firefox are fine. Can I just not do
something this complicated with IE in the picture?


Eh.. I don't see the images anymore with Firebird...

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: S a a r - 11
Jul 20 '05 #5
Els
Harlan Messinger wrote:
"Harlan Messinger" <h.*********@comcast.net> wrote in
message news:2l************@uni-berlin.de...
Ah, that's what I was overlooking. Thanks. Though

div.subjectimage img

is also not what I wanted, because I want the whole div to
be positioned, not just the image (which has to be inside
a block anyway--or else, AIUI, the browser will put it in
an anonymous block). So I changed it to

div.subjectimage

and now I have a different problem in IE6, which has moved
the images to

the
right so that they are left-aligned with the text. Opera
and Firefox are fine. Can I just not do something this
complicated with IE in the picture?


This kills me: it even works in Netscape 4.7. Just not IE.


I haven't figured why (yet), but if you give the relative
positioned div a border (white, to match the background) the
pictures jumps into place, and if you then delete the z-index
from the absolute positioned div, Firebird shows the pics too.
I suppose z-index:-2 puts them behind the screen or something
;-)

Bugs me that I don't know why the border helps though :-(

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Meir Banai - The Shafshaf Song
Jul 20 '05 #6

"Els" <el*********@tiscali.nl> wrote in message
news:Xn*****************@130.133.1.4...
Harlan Messinger wrote:
"Harlan Messinger" <h.*********@comcast.net> wrote in
message news:2l************@uni-berlin.de...
Ah, that's what I was overlooking. Thanks. Though

div.subjectimage img

is also not what I wanted, because I want the whole div to
be positioned, not just the image (which has to be inside
a block anyway--or else, AIUI, the browser will put it in
an anonymous block). So I changed it to

div.subjectimage

and now I have a different problem in IE6, which has moved
the images to the
right so that they are left-aligned with the text. Opera
and Firefox are fine. Can I just not do something this
complicated with IE in the picture?


This kills me: it even works in Netscape 4.7. Just not IE.


I haven't figured why (yet), but if you give the relative
positioned div a border (white, to match the background) the
pictures jumps into place, and if you then delete the z-index
from the absolute positioned div, Firebird shows the pics too.
I suppose z-index:-2 puts them behind the screen or something
;-)


Oh, I hadn't noticed that the z-index caused trouble in Firebird (and
Firefox) because I looked at them before Opera. I added the z-index because
in Opera the photo was lying over the overlapping portion of the heading.

Now I've just switched things so that the image has no z-index, and the h2
has z-index: 2. That makes Firebird, Firefox, and Opera happy. I suppose
this means Firebird and Firefox don't handle negative z-index properly, at
least not for images or their containing boxes. I know z-index *can* be
negative, so it seems to be a browser bug.

Bugs me that I don't know why the border helps though :-(


Yup, me too. Thanks for your help.

Jul 20 '05 #7

"Harlan Messinger" <h.*********@comcast.net> wrote in message
news:2l************@uni-berlin.de...

"Els" <el*********@tiscali.nl> wrote in message
news:Xn*****************@130.133.1.4...
Harlan Messinger wrote:
"Harlan Messinger" <h.*********@comcast.net> wrote in
message news:2l************@uni-berlin.de...
> Ah, that's what I was overlooking. Thanks. Though
>
> div.subjectimage img
>
> is also not what I wanted, because I want the whole div to
> be positioned, not just the image (which has to be inside
> a block anyway--or else, AIUI, the browser will put it in
> an anonymous block). So I changed it to
>
> div.subjectimage
>
> and now I have a different problem in IE6, which has moved
> the images to
the
> right so that they are left-aligned with the text. Opera
> and Firefox are fine. Can I just not do something this
> complicated with IE in the picture?

This kills me: it even works in Netscape 4.7. Just not IE.
I haven't figured why (yet), but if you give the relative
positioned div a border (white, to match the background) the
pictures jumps into place, and if you then delete the z-index
from the absolute positioned div, Firebird shows the pics too.
I suppose z-index:-2 puts them behind the screen or something
;-)


Oh, I hadn't noticed that the z-index caused trouble in Firebird (and
Firefox) because I looked at them before Opera. I added the z-index

because in Opera the photo was lying over the overlapping portion of the heading.

Now I've just switched things so that the image has no z-index, and the h2
has z-index: 2. That makes Firebird, Firefox, and Opera happy. I suppose
this means Firebird and Firefox don't handle negative z-index properly, at
least not for images or their containing boxes. I know z-index *can* be
negative, so it seems to be a browser bug.

Bugs me that I don't know why the border helps though :-(


Yup, me too. Thanks for your help.


Ugh, now it's still bad in IE. The second trivia item and everything
underneath it is shifted to the left.

Jul 20 '05 #8

"Harlan Messinger" <h.*********@comcast.net> wrote in message
news:2l************@uni-berlin.de...

"Harlan Messinger" <h.*********@comcast.net> wrote in message
news:2l************@uni-berlin.de...

"Els" <el*********@tiscali.nl> wrote in message
news:Xn*****************@130.133.1.4...
negative, so it seems to be a browser bug.

Bugs me that I don't know why the border helps though :-(


Yup, me too. Thanks for your help.


Ugh, now it's still bad in IE. The second trivia item and everything
underneath it is shifted to the left.


Er...now it's fixed itself.

Jul 20 '05 #9
Els
Harlan Messinger wrote:
Ugh, now it's still bad in IE. The second trivia item and
everything underneath it is shifted to the left.


Er...now it's fixed itself.


Right. <g>

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Michael Shaviv - War Sane - Tango
Jul 20 '05 #10
On Wed, 14 Jul 2004, Els wrote:
Bugs me that I don't know why the border helps though :-(


Disclaimer: I haven't looked at this specific case in detail...

I've certainly met situations in the past with buggy browser versions
where defining a border would tidy-up the presentation, whereas
strange things would happen without it. Defining an invisible border
isn't my favourite way of doing business, but if the results are OK, I
suppose at least it beats the nasty habit of scattering transparent
gifs throughout the HTML. :-}

Jul 20 '05 #11
Els
Els wrote:
Harlan Messinger wrote:

I haven't figured why (yet), but if you give the relative
positioned div a border (white, to match the background) the
pictures jumps into place, and if you then delete the z-index
from the absolute positioned div, Firebird shows the pics too.
I suppose z-index:-2 puts them behind the screen or something
;-)

Bugs me that I don't know why the border helps though :-(


I fiddled a bit more with it, and I got a version that doesn't
need the border.
http://locusmeus.com/temp/harlan.html
I used the body as container for the page, as the padding of 10%
caused an extra padding on the div.subjectblock too.

To get the page off the sides in Win-IE5 you'd need to put the
whole page in a container though, as apparently Win-IE5 doesn't
allow the body to be 80% wide.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Eurythmics & Aretha Franklin - Sisters Are Doing It
For Themselves
Jul 20 '05 #12

"Els" <el*********@tiscali.nl> wrote in message
news:Xn*****************@130.133.1.4...
Els wrote:
Harlan Messinger wrote:

I haven't figured why (yet), but if you give the relative
positioned div a border (white, to match the background) the
pictures jumps into place, and if you then delete the z-index
from the absolute positioned div, Firebird shows the pics too.
I suppose z-index:-2 puts them behind the screen or something
;-)

Bugs me that I don't know why the border helps though :-(


I fiddled a bit more with it, and I got a version that doesn't
need the border.
http://locusmeus.com/temp/harlan.html
I used the body as container for the page, as the padding of 10%
caused an extra padding on the div.subjectblock too.

To get the page off the sides in Win-IE5 you'd need to put the
whole page in a container though, as apparently Win-IE5 doesn't
allow the body to be 80% wide.


All very interest! Thanks for the research, Els.

Jul 20 '05 #13

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Dennis M. Marks | last post: by
reply views Thread by crjr | last post: by
1 post views Thread by Mr.Clean | last post: by
17 posts views Thread by George Hester | last post: by
2 posts views Thread by Johnson Smith | last post: by
9 posts views Thread by Bill Norton | last post: by
5 posts views Thread by aljamala | last post: by
1 post views Thread by alice | last post: by
14 posts views Thread by Fistro | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.