3 replies [Last post]
fireboy63's picture
Last seen: 5 years 32 weeks ago
Timezone: GMT-8
Joined: 2005-07-19
Posts: 4
Points: 0

I obviously need help. Thanks ahead of time for whatever you can shed light on.

I have built my past few CCS pages rather quickly, and found that I liked being able to absolutely position a text box over top of an image. The only way that I could find to make a scrolling text box work over top of an image is to give the underlying image a Z-index of "-1" in the stylesheet coding.

This works great in IE, but doesn't work in Firefox. Also, custom scrollbar colorations seem to work fine in IE, but not in Firefox.

Any ideas on what to do? (I'd give you the URL, but it's a private site for a client right now, and I'd rather not give that information away for confidentiality purposes.)

Thanks for the help!

(P.S. - I searched the forums, but had little luck in finding an answer to my question. If there is a thread already that addresses this, please post the link here. Thank you!)

Tyssen's picture
Last seen: 3 years 1 week ago
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Text box layered over images

I think both elements have to have position set to something for your z-index to work. The coloured scrollbar thing is IE only - won't work in any other browsers.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

thepineapplehead's picture
Last seen: 8 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Text box layered over images

You should just be using the image as a background image Laughing out loud

Anyway, you could use a div with the image in it (in the html code), and the text also.

To position absolutely, the container element needs to be position:relative;

Verschwindende wrote:
  • CSS doesn't make pies

fireboy63's picture
Last seen: 5 years 32 weeks ago
Timezone: GMT-8
Joined: 2005-07-19
Posts: 4
Points: 0

Allow me to explain further...

First off, thanks for responding! The first time I tried to post on this forum, all I heard was crickets - NO responses hardly.

Okay, so here's what I've been doing. An example of code is below.

Let's say I've styled an image - the image is a box with some light diagonal lines, and it will reside behind a scrollable text box with - what else - text in it. Here is what I have been doing. (The code below is a direct copy and paste, with the filenames being changed to protect the innocent.) Wink

In the stylesheet.css file:

	position : absolute;
	top : 180px;
	left : 134px;
	z-index : -1;

	position : absolute;
	top : 210px;
	left : 144px;
	height : 159px;
	width : 424px;
	border: none;
	background-color: transparent;
	z-index : 1;
	overflow: auto;
	font-family: "Arial", Helvetica, sans-serif;
	font-size: 9pt;

In the HTML file itself:

For the samplebox image, the code is:

<div id="samplebox"><img name="samplebox" src="images/samplebox.gif" /></div>

For the text goes over it, I have:

<div id="sampleboxtext"> 
  <p>Sample text goes here and whatnot.</p>

So, I give the image and the text their own DIVs, and the only thing to make a difference is the fact that I set the background image's Z-index to negative one (-1). This works fine in IE, but not Firefox.

The reason that I didn't just include the background boxes needed onto the background image is that I use a tiled background image instead of a giant static background image. Is this approach better than what I've been doing, then? I could see advantages and disadvantages to it, but if it's the standard, I'll start working that way.

This may be a rookie question, but I've never had to deal with it: Is there HTML (or other) code that can determine what kind of browser the person is viewing with, then direct to a page built specifically for the browser? (i.e. could I make a Firefox friendly homepage, and have the browser go to that page based on the type of browser it is?) It'd be a little extra work, I know, but I'm willing to do it.

Thanks for your brains and your time, guys. I appreciate it! Laughing out loud

~ Derek