Simple positioning problem

[TheCruelPanda]

Hey there.

My name is Rowan, and it's been three weeks since I last used tables
for an HTML design.

Okay, I'm rather new to CSS and I have a big positioning problem here.
It might not be a really huge problem, but I've been fighting it for
days, and have received no help so far. Have a look at this (try it
out in IE and Firefox please) http://www.discoverourmusic.com/rowan/css/home.html
- The problem's with the fairy at the top. On firefox (at least, my
firefox 1.5.0.11) the fairy is blocking horizontal space and the text
(which in the page provided is actually "test") is shifted slightly to
the right and isn't centered. Which I don't want. If you try it out on
IE, it's even worse. I have IE 6.0 and there's a vertical space
between my fairy and the beginning of the page.

Why?

Now if you manage to figure out why it's all happening and you have
some magic css command (e.g. -ie-piss-off: none;), please let me know
about it. I just want the fairy picture to exist without taking any
physical space. Is that even possible? Does that have something to do
with the display: block; thing? I tired that, and it didn't work
either.

Also, here's how the top part of my template should look like:
http://www.discoverourmusic.com/rowan/css/whatineed.jpg - You'll
notice a sunflower (http://www.discoverourmusic.com/rowan/css/
sunflower.png) behind the right side of the header. How can I place
the sunflower behind the header? Using z-index? That didn't work
either...

Can anyone help?
Rowy
(a member of Table Anonymous)

[Ben C]

On 2007-04-29, TheCruelPanda <Ro*********@gmail.comwrote:

Hey there.

My name is Rowan, and it's been three weeks since I last used tables
for an HTML design.

Okay, I'm rather new to CSS and I have a big positioning problem here.
It might not be a really huge problem, but I've been fighting it for
days, and have received no help so far. Have a look at this (try it
out in IE and Firefox please) http://www.discoverourmusic.com/rowan/css/home.html
- The problem's with the fairy at the top. On firefox (at least, my
firefox 1.5.0.11) the fairy is blocking horizontal space and the text
(which in the page provided is actually "test") is shifted slightly to
the right and isn't centered. Which I don't want. If you try it out on
IE, it's even worse. I have IE 6.0 and there's a vertical space
between my fairy and the beginning of the page.

Why?

It's because "test" is centered in the horizontal space available, which
is the space between the right edge of the fairy and the right hand edge
of the container.

The problem with the fairy is that she's relatively positioned.

The way relative positioning works is that everything is first formatted
as if there were no relative positioning. Then at the last minute things
are translated by their relative offsets. So the fairy leaves a "gap"
behind, 175px below where she actually appears, which the text flows
around, or in this case, is centered to the right of.

Instead of using float, give #Fairy { position: absolute; top: 25px;
left: 0; } and make #Container position: relative to make it the
containing block for #Fairy.

By the way don't use a huge string of adjacent <brelements like that.

Now if you manage to figure out why it's all happening and you have
some magic css command (e.g. -ie-piss-off: none;), please let me know
about it. I just want the fairy picture to exist without taking any
physical space. Is that even possible?

Not literally! But position: absolute does mean that the fairy doesn't
affect the positioning of anything else in your page, but just sits on
top of it, which is what you want.

Does that have something to do with the display: block; thing? I tired
that, and it didn't work either.

No never mind that. Both float: left and position: absolute imply
display: block anyway.

Also, here's how the top part of my template should look like:
http://www.discoverourmusic.com/rowan/css/whatineed.jpg - You'll
notice a sunflower (http://www.discoverourmusic.com/rowan/css/
sunflower.png) behind the right side of the header. How can I place
the sunflower behind the header? Using z-index? That didn't work
either...

Probably using background-image. So long as you set the background image
on an earlier in the source than whatever the element is that you want
on top of it, you should be OK without needing to use z-index.

z-index only applies to positioned boxes (relative, absolute or fixed)
which may be why it wasn't working.

[Andy Dingley]

On 29 Apr, 19:58, TheCruelPanda <[e-mail]:

Have a look at this (try it out in IE and Firefox please)
http://www.discoverourmusic.com/rowan/css/home.html

Your HTML is broken and you don't have a doctype declaration. Don't
even think about IE/FF differences until you've sorted this and forced
IE to render in "Strict mode". Then run a HTMl validator over it,
probably by installing Marc Gueury's FF extension. (Most of these
terms should return useful web or usenet searches).

Apart from that, it looks promising.