My CSS text won't go under my CSS positioned image!

[technica]

I have a breadcrumb that I would like to go under my header graphic. I was able to do this before, but then I edited my image classes, and now the text won't go back under the graphic.
The text is supposed to look like this:
http://wethegeeks.com/wtgcenterbgheader.html
However, it looks like this:
http://wethegeeks.com/wtgcenterbgheaderimage.html
Thank you very much for your help.

[le_gber]

Hi there,

have a look at your site in FireFox you will see that the text has the same position in both cases - I therefore think that the text going under the image was a IE display particularity.

Try to make it work as you intended in FF and it should work fine in IE as well

Leo

[technica]

I know the text goes above... the point is that I need to do something to get it down below.
Any thoughts?
Thanks.

[le_gber]

you can add a absolute positioning to the

or <div> that sould solve this.

Cheers

Leo

[technica]

Thanks. I did add absolute positoning, and now it pretty much works in ie yet in safari/firefox/navigator its not correct. However, I don't really care, for me it's ie or bust.
So I guess you've solved my problem :)
Thank you

[drummin]

Put the breadcrumb text after the images.

<p align="left">[img]title.jpg[/img][img]head.jpg[/img]<span class="breadcrumb">The text here is supposed to go under the robot image... </span></p>

[technica]

Noble effort. I tried what you said, and the text is still positioned the same exact way... under the image in IE yet above it in every other browser.
Thanks for trying...
Any other thoughts please let me know.

[drummin]

Because you're using absolute positioning, I wouldn't "contain" the items in question.
I'd just position them where I wanted them.
Just my two cents. But that's what I'd do.

div.top {
position: absolute;
top: 0px;
left: 0px;
width: 747px;
height: 290px;
background-color: #333333;
padding: 2px;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
z-index:1;
}
.robotimg {
position: absolute;
top:72px;
left:8px;
background: url("../images/head.jpg") no-repeat 0% 0%;
width:737px;
height:200px;
z-index:2;
}
.logoimg {
position: absolute;
top: 8px;
left: 8px;
background: url("../images/title.jpg") no-repeat 0% 0%;
width:250px;
height:56px;
z-index:2;
}
.breadcrumb {
position: absolute;
top:275px;
left:90px;
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
z-index:2;
}
---
<div class="top style1"></div>
<div class="logoimg"></div>
<div class="robotimg"></div>
<div class="breadcrumb">The text here is supposed to go under the robot image... </div>

[technica]

You have saved my life.
I implemented your code, and it works beautifully. The only thing I changed was making the first image not a bg image, and just inserted it in the div so that way it could be a link.
The larger image does not have a link so I didn't do this... I would like to add alt text to it, but would I have to make it not a bg image again in order to do this?
But really, you have saved me so much time, I really appreciate it.
Thank you so much.

btw... this is a new link of what i'm working with:
http://wethegeeks.com/diglife/quickcam01.html

[drummin]

Glad I was able to help.
There are so many "Pro's" in this forum, it's rare for me to be able to help someone.
Most of what I know, I learned here. So keep asking for help and reading posts.
Warm Regards,
Robert
AKA
Drummin