Topic: z-index issue (Page 1 of 1)

i'm using the css layout template on Glish.com and am having problems with the rightcontent overlapping the centrecontent. The only way i have managed to get the rightcontent to slip behind the centrecontent is to set the rightcontent to z-index: -1; - which works ok in IE (apart from you can't select text) but does not show in NN.

Has anyone come accross this issue before?

BR

FR

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

Hi Ini

Thanks for the reply but i have tried setting a positive z-index on the <div>'s with rightcontent having the lowest z-index, yet it still overlaps the centrecontent.

as a basic example i have just added z-index to the basic glish template:

here is a link http://www.prestedrealtennis.co.uk/temp/7.html

and here is the code:

#leftcontent {

		position: absolute;

		left:10px;

		top:50px;

		width:200px;

		background:#fff;

		border:1px solid #000;

		}



	#centercontent {

		background:#fff;

   		margin-left: 199px;

   		margin-right:199px;

		border:1px solid #000;	

		voice-family: "\"}\"";

		voice-family: inherit;

   		margin-left: 201px;

   		margin-right:201px;

		z-index:2;

		}

	html>body #centercontent {

   		margin-left: 201px;

   		margin-right:201px;

		}



	#rightcontent {

		position: absolute;

		right:10px;

		top:50px;

		width:200px;

		background:#fff;

		border:1px solid #000;

		z-index:1;

		}

[This message has been edited by FatRod (edited 10-14-2003).]

If I understand this coreectly, you are going about this the wrong way.

Rather than trying to get the right content to go beneath the center content, you need to focus on making the layout work as it is supposed to.

What version of IE and NN are you looking at this in?

I am running Mozilla 1.3.1 and the layout works fine, both in your version and in the version on Glish.

i am using IE6.0.26 & NN7 - and both demonstrate the same. Adding the z-index does not seem make any difference, unless, as i mentioned, i set z-index:-1 on rightcontent - then it stacks lower than centrecontent in IE and is not visable in NN7

this does not make sense to me.

DL - all i have done in my version is add z-index to the div's



[This message has been edited by FatRod (edited 10-14-2003).]

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

Ini, thanks.

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

Fatrod - I need to reiterate again though, that the z-index isue should be pretty much irrelevant in this case (unless I've totally misunderstood...).

The issue at hand should be making the divs not overlap, rather than trying to set which one overlaps which. I haven't looked in IE, but like I said - Mozilla had no issues with the layout at all...

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

You'll find that bugs like this happen regular when trying to push css - position:relative is often the key in my experience (same as InI said). I look at it like this - when you have elements that should do something logical using css-p but they don't on one appears over the top of another you then need to emphasise the downtrodden element to the browser - a good way to do this is to set it's position to relative (or absolute depending on the circumstances). This has the effect of boosting the importance of that element to the browsers bugger renderer. It's not a hack, but it's not right either - browsers do suck, the latest moz builds are currently behaving best, but there is still some bugs - IE has some nasty rendering bugs where content will flicker on and off or dissappear all depending on how css is used - moz has some of these too, but opera is most stable, albeit in a rather crap way which irritates me. The worst browser for weird glitchy erratic css is mac ie which actually boasts high levels of css support but wrong crap buggy support - if it works perfect in every pc browser, it'll look shite in mac ie FACT!, well, not always, just avoid anything too flashy unless you don't mind employing some excess code based workarounds.

That is the smonkey rant for the day.

Thanks chaps.

DL-44: your are :absolute right; i should have made this a little clearer in the original post: as ini said ^ if you resize the browser and squish it up (especially in 800x600 res for example) the centre content will only shrink as small as the longest word or link, then the rightcontent overlaps for example I am using a long email address inside the centre content, as I am told for accessibility reasons you should not use "email us" I am using the full email address.

I think I am going to add another div under the centre content rather than inside although it is a crude way of ensuring that the centrecontent only gets so wide, and has more than one or two words per line!

This problem will not affect 99.628% of the hits the site will get but one should cater for all - isn?t this what css is about?

Cheers

FR




[This message has been edited by FatRod (edited 10-15-2003).]