[WSG] z-index problem with dropdown menu
http://www.tyssendesign.com.au/sites/evolved/sax/ I can't figure out why the dropdowns fall behind the content below them. Can anybody see what I'm obviously missing? :? Cheers John -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] z-index problem with dropdown menu
John Faulds wrote: http://www.tyssendesign.com.au/sites/evolved/sax/ I can't figure out why the dropdowns fall behind the content below them. seems to me like the dropdowns need a firm hand - try: http://www.saxleather.com.au/index.php?page=homesubrange=crops Can anybody see what I'm obviously missing? :? I can see this but I'm not sure if you're obviously missing it or not: http://www.saxleather.com.au/index.php?page=homesubrange=nipple%20clamps but I can also see that it's a site that not everyone on the list may appreciate ;) -- Chris Knowles *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] z-index problem with dropdown menu
John Faulds wrote: http://www.tyssendesign.com.au/sites/evolved/sax/ I can't figure out why the dropdowns fall behind the content below them. Can anybody see what I'm obviously missing? :? Hi John, I'd have a look at setting a z-index on #sidebar2 (I don't think you have one). Because it comes after the dropdown in the source some browsers may assume it should have a higher z-index than the dropdown so it may help to set it lower. -- Chris Knowles *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] z-index problem with dropdown menu
I've z-indexed just about everything on the page to no avail so far. On Mon, 05 Nov 2007 14:35:31 +1000, Chris Knowles [EMAIL PROTECTED] wrote: John Faulds wrote: http://www.tyssendesign.com.au/sites/evolved/sax/ I can't figure out why the dropdowns fall behind the content below them. Can anybody see what I'm obviously missing? :? Hi John, I'd have a look at setting a z-index on #sidebar2 (I don't think you have one). Because it comes after the dropdown in the source some browsers may assume it should have a higher z-index than the dropdown so it may help to set it lower. -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] z-index problem with dropdown menu
From: John Faulds [EMAIL PROTECTED]
I've z-indexed just about everything on the page to no avail so far.
#header {
position: relative;
z-index: 999;
}
--
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: 42nd Street: Mastering the Art of CSS Design
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] z-index problem with dropdown menu
John Faulds wrote:
http://www.tyssendesign.com.au/sites/evolved/sax/
I can't figure out why the dropdowns fall behind the content below them.
Can anybody see what I'm obviously missing? :?
Hi John,
It's a stacking context issue [1], so increasing the z-index value of the
dropdown won't change anything.
Add this to your #header{} rule:
z-index:1
[1]
http://www.tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.
asp
--
Regards,
Thierry | http://www.TJKDesign.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] z-index problem with dropdown menu
#header {
position: relative;
z-index: 999;
}
I've z-indexed just about everything on the page to no avail so far.
Right, well obviously I hadn't. I could've sworn I'd done that for #header
as well. Oh well, thanks for the extra sets of eyes guys! :)
--
Tyssen Design
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Z-index Problem
You are using the same z-indez number in both classes. You should use
different z-index numbuer for each absolute div.
att,
Genau L. Jr
www.meucarronovo.com.br
James Oppenheim wrote:
Hi all,
I am having trouble with css z-index. Here is a portion of it:
img.y {
position: absolute;
top: 147px;
z-index: 1;
}
img.x {
position: absolute;
top: 201px;
z-index: 1;
}
.main_content {
position: relative;
left: 0px;
top: 0px;
z-index: 2;
text-align: left;
padding: 50px 20px 15px 34px;
color: #494949;
font-size: 12px;
height: 350px; /* Start of IE min-height hack */
min-height: 290px;
}
htmlbody .main_content {
height: auto;
min-height: 290px; /* End of IE min-height hack */
}
At the moment it all works well, except for IE. IE does not like the
fact that there is not a left position allocated. So it puts the
images in the centre of the screen, but under the text, so the Z-index
works. If I make the position: relative; the images will not be
placed underneath the text.
Any ideas??
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] z-index problem
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Gallagher, Robin
Sent: Thursday, February 24, 2005 12:49 AM
To: 'wsg@webstandardsgroup.org'
Subject: [WSG] z-index problem
Hi
I've got a 3-column page with footer:
#leftcol {
clear: both;
float: left;
width: 30%;
margin-left: 0px;
margin-top: 0px;
margin-right: 10px;
...
}
#rightcol {
position: absolute;
left: 68%;
top: 130px;
width: 30%;
padding-left: 10px;
padding-right: -10px;
margin-top: -2px;
margin-left: 10px;
}
**
Floats and absolute positioned elements are out of the normal flow. As such
they need to be cleared. For a basic understanding of positioning see the
specs:
http://www.w3.org/TR/CSS21/visuren.html
http://www.w3.org/TR/CSS21/visudet.html
And also (a little easier to wade through until the specs become familiar):
http://www.positioniseverything.net/articles/float-theory.html
http://www.brainjar.com/css/positioning/default.asp
drew
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] z-index problem
Hi
I've got a 3-column page with footer:
#header {
position: relative;
background-color: #33ccff;
background-image: url(crest_banner1.jpg);
background-repeat: no-repeat;
height: 100px;
border-bottom: 1px solid #fff;
z-index: 190;
}
#header_text {
font-size: 400%;
margin-left: 80px;
}
#more {
font-size: 90%;
}
#leftcol {
clear: both;
float: left;
width: 30%;
margin-left: 0px;
margin-top: 0px;
margin-right: 10px;
background-color: #fff;
background-image: url(background.jpg);
background-repeat: no-repeat;
padding: 2em 10px 20px 10px;
border-right: 1px solid #0a57a4;
}
#rightcol {
position: absolute;
left: 68%;
top: 130px;
width: 30%;
padding-left: 10px;
padding-right: -10px;
margin-top: -2px;
margin-left: 10px;
z-index: 3;
padding: 2em 10px 10px 10px;
background-color: #fff;
background-image: url(background.jpg);
background-repeat: no-repeat;
border-left: 1px solid #0a57a4;
}
#leftmenu {
font-size: 80%;
}
#content {
margin: 0px 32% 0px 32%;
padding: 10px 10px 10px 10px;
color: #000;
background-color: #fff;
z-index: 100;
}
#hnav {
position: relative;
background-color: #ffa615;
background-image: url(bluebox.gif);
background-repeat: repeat-y;
color: #fff;
height:1.6em;
border-bottom: 1px solid #fff;
z-index: 200;
}
#footer {
z-index: 4;
clear: both;
width: 100%;
margin: -1px 0 0 0;
text-align: center;
font-family: Verdana;
font-size: 11px;
padding: 3px;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
color: #fff;
background-color: #0a57a4;
background-image: url(bar.jpg);
background-repeat: no-repeat;
}
which works ok, excepting that the rightcol sometimes goes over the top of the
footer (ie when text is resized larger), despite having a lower z-index. Any
thoughts why this is happening and how to fix it?
TIA
Robin Gallagher
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
