Greetings good people -

I need some help. I have until now buildt web-pages with floats, but now I need z-index, and therefore I need to use position

 

The test page is here http://www.it-stud.hiof.no/~benteh/3aar/hovedp/combine/

 

The problem being the timelines (vertical multicoloured lines on the right), and this looks and works fine in FireFox and Opera for Mac and Pc, IE8, but scary things happens in Chrome and Safari.

 

 

I have position inherit on some of the elements, but I have problems finding a solution.

Any help would be greatly appreciated, as I am out to sea on this one.

All the best -

Hi there, I haven't had a good look at your page but you can still use float and z-index together.

z-index can apply to an element with position:relative and this won't affect the floating elements behaviour.

I'll go and have a better look at your page

That would be fab - and I will be happy to have misunderstood :-D

If I can use float & z-index, I'll be a happy camper.

I have since posted, discovered that I certainly cannot use inherit, as IE would not recognise it.

I'll keep working on it, and will appreciate help & hints on the way.

So what happens if you change your #timeline css to :

#timeline{
position: relative;
float:left;
margin: 0px 10px 0px 0;
padding: 0px 5px 15px 5px;
width: 285px;
height: 1000px;
background-color: #FFFFFF;
 background-image:url(../images/bottom_fade.png);
background-repeat: repeat-x;
background-position: bottom right;
z-index: 0;
}

Hi ElanMan -

In the meantime I think I fixed it (online version updated).

I tried your code, and it did no harm :-D That probably means we were on the same track.

It should now work cross-browser (at least the ones I have here), but any input on that would be appreciated.

Cheers!

..oh, yes, and any pointers as to how I can use position and float much appreciated too. The tutorials and explanations I find are all a tad short.