CSS Absolute positioning.../Netscape & Mozilla

[Brightbelt]

Hi -
I'm on FP 2003, Win XP Pro. I've got an external style sheet I'm using for
a background image, and I'm trying to do absolute positioning for it, but it
won't respond to the numbers I put it (eg, for left, I enter 0px; for top
163px etc). I've found that I can insert the picture onto the page regularly
and do the 'format'/position menu item and place it absolutely that way, but
it does not show up on Netscape or Mozilla. Is there some procedure I'm
missing on this ? Any help is greatly appreciated. I'm fairly familiar with
doing CSS background images but I always used only the general placement
parameters (top/center/bottom etc/no-repeat) in the 'borders' interface
area. Thanks,...Frank Bright
www.brightbeltmusic.com (re: feathered piano)

 

[Murray]

Your syntax is correct, and it seems to be working. What's the problem?

 

[Brightbelt]

Hi Murray -
Thanks for responding...The problem is that you'll notice on some pages
there is no background piano image in the usual area like there is on the
home page and contact page. The reason is that I couldn't place it right
with the longer content on those other pages (Catalogue and Profile pages)
because although the piano would still get placed in the "center" of the
page, the "center" would shift because of this content, so it looks weird
compared to the other pages. That's why I'm trying to change to absolute
positioning (it's not there that way now...I just wanted you to see the
image/setup I'm working with).
So I tried doing the CSS so it would 'float' left and set the absolute
position numbers to "left: 0px" and "top: 163px" and it works only on IE.
The photo does not even show in Mozilla or Netscape. Thanks for any help you
may offer,...Frank
www.brightbeltmusic.com

 

[Murray]

Direct me to a specific page where it's not working, please.

 

[Brightbelt]

Ok, (I didn't want to publish an error, but...) Look now at the Home page at
www.brightbeltmusic.com and you'll see that I tried "Left 0px' 'Top 163px"
and the piano seems to just default into the upper left corner. I'm doing
something wrong, though I don't know what. Thanks for your help,...Frank

 

[Murray]

Indeed -

Change this -

BODY {
BACKGROUND-ATTACHMENT: scroll;
LEFT: 0px;
FLOAT: left;
BACKGROUND-IMAGE: url(piano600bbm.jpg);
BACKGROUND-REPEAT: no-repeat;
POSITION: absolute;
TOP: 163px
}

to this -

BODY {
BACKGROUND-ATTACHMENT: scroll;
BACKGROUND-IMAGE: url(piano600bbm.jpg);
BACKGROUND-REPEAT: no-repeat;
BACKGROUND-POSITION: 0 163px;
}

and see what happens.

 

[Brightbelt]

Yes it works ! I see how you did the positioning all together in one line. I
was using Frontpage's CSS position window/interface because I'm not good at
coding. Can you tell me at least the principle of what I was doing wrong ?
I'd appreciate it, and I do thank you for your help,...Frank

 

[Murray]

You cannot float or use positioning on a background image, other than by
using the background-position style. The position:absolute | relative |
static | fixed styles will not apply to background images.

You can do amazing things with background positioning. Take a look here -

http://www.murraytestsite.com/menus5b.html

There is a single image on this page (you can see it to the right of the
vertical menu) used as the background for each menu button. The background
is simply repositioned for each button so that you only see the relevant
graphic. The rollovers are pure CSS rollovers - there is no javascript used
there.

 

[Brightbelt]

Thanks for explaining all that - it's usually best if I can learn what I've
done wrong, so I can come away knowing a little more about CSS. The buttons
you made on your test site are very nice looking. I experimented last week
and was able to make buttons thru CSS using Frontpage's "CSS/Borders"
formatting, but they only worked in IE and not in Netscape or Mozilla. If
you have any tips there, I'm interested, or if I should do a separate post,
tell me so. I haven't used any box/border buttons in my site so I have
nothing to show for how I've experimented with them. Again, Thanks for your
help,...Frank