Re: [css-d] z-index on menu
A number of CSS declarations had to be overridden, see the inline styles. IE 8 seems to get confused with the relative positioning. http://roughtech.com/t/prestige.html Regards, Chetan Crasta __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index on menu
Re: http://www.signwithprestige.com/classes/ On 9/6/11 9:58 AM, Chetan Crasta wrote: A number of CSS declarations had to be overridden, see the inline styles. IE 8 seems to get confused with the relative positioning. http://roughtech.com/t/prestige.html Regards, Chetan Crasta Yes. It seems that IE 8 acts as though you have overflow: hidden; on the UL, as it is those links that are shifted outside the UL (positioned 50% from the left) that vanish. Oddly, if I increase text-size to largest, the menu items reappear. The rest of the layout is borked, though. :( Another solution other than Chetan's would be to take out all the menu's relative positioning and simply float the UL right and float the links left. Either way you get rid of the horizontal scroll bar. -- Cordially, David __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index on menu
Thank you - perfect. I appreciate the help. -- Debbie Campbell On 9/6/2011 10:58 AM, Chetan Crasta wrote: A number of CSS declarations had to be overridden, see the inline styles. IE 8 seems to get confused with the relative positioning. http://roughtech.com/t/prestige.html Regards, Chetan Crasta __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index on menu
On 6/09/2011 11:03 AM, Debbie Campbell wrote: Can someone point out what's covering the left side of the top menu in IE8 in this site? http://www.signwithprestige.com/test/classes/ It's the image below and it only is seen once this image is hovered. I can not track it down in the CSS so this may be an error in the JavaScript. BTW, when JavaScript is disabled, there is overlap due to 'https' link being shown as a URI and not as a text link. -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] z-index on menu
Can someone point out what's covering the left side of the top menu in IE8 in this site? http://www.signwithprestige.com/test/classes/ -- Debbie Campbell __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index? content menu hiding behind header
as to being able to move my content area and menu up on the pages that
have that sub menu (which is my biggest concern and most baffling
question), it seems that this is impossible with css.
Hi,
I think I've got him!
Testpage.http://home.tiscali.nl/developerscorner/css-discuss/z-index-problem-solved.html
It is not a z-index trouble, but the the .master-form .content-inside {
overflow:hidden }.
The difference between FF and IE is the IE-hack, giving overflow for IE
while hiding for the rest.
Omitting the overflow:hidden shows up the tabs in FF too.
As far as I can see (but perhaps there is more behind the screens), the
only reason for hiding is to avoid a horizontal scrollbar in FF. If
that's the case, than a container-width of 99.9% can do this instead of
the overflow:hidden.
francky you're a genius! so far this is working perfectly, so i'll
give it to my support person to see if he can break it. :D he likes
doing that!
thanks again *so much*.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index? content menu hiding behind header
cj wrote:
[...]what you can do is to hang the bg-img in the footer,
and then push him upwards
[...] if i put this background in the footer then all my other
css themes would get it. for my purposes it has to be on the body.
If impossible to give the body bg-img a good class-ID-combination with
the heigth of the globe in it, then I'm afraid it can't be solved with
pure css.
[...]
as to being able to move my content area and menu up on the pages that
have that sub menu (which is my biggest concern and most baffling
question), it seems that this is impossible with css.
Hi,
I think I've got him!
Testpage.http://home.tiscali.nl/developerscorner/css-discuss/z-index-problem-solved.html
It is not a z-index trouble, but the the .master-form .content-inside {
overflow:hidden }.
The difference between FF and IE is the IE-hack, giving overflow for IE
while hiding for the rest.
Omitting the overflow:hidden shows up the tabs in FF too.
As far as I can see (but perhaps there is more behind the screens), the
only reason for hiding is to avoid a horizontal scrollbar in FF. If
that's the case, than a container-width of 99.9% can do this instead of
the overflow:hidden.
Hope this doesn't raise new issues, ;-)
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index? content menu hiding behind header
Oops, the % was in the direction, but I was too much in a hurry. - A (bottom-2em) is indeed impossible AFAIK, but what you can do is to hang the bg-img in the footer, and then push him upwards: it can't be in the footer. the only place i have to put it is in the body because of other css files that inherit parts of what i pasted together. if i put this background in the footer then all my other css themes would get it. for my purposes it has to be on the body. Remaining remarks: - Enlarging fontsize more as 3 steps in FF (quite a lot, though - and probably enough) breaks the general layout; in IE the max fontsize is o.k. i like to code for variations, but i also have deadlines. if it takes 3 bumps to break it, i'm ok with that. i'm glad it works that far, which is my minimum goal. :) - Parts of the footer can go under the bottom of the screenheight - but that is not due to the globe thingy. I think it is more general: the relationship between the height of the footer and the min-height of the master-form (and the way how filling the footer). the padding or margins on some of the main content area things are pushing it down when it looks like the footer should all be showing on one page. after i get everything looking decent, making sure the footer shows entirely on the main pages is on my list of things to check for. as to being able to move my content area and menu up on the pages that have that sub menu (which is my biggest concern and most baffling question), it seems that this is impossible with css. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index? content menu hiding behind header
cj wrote: [...] On 2/7/06, francky [EMAIL PROTECTED] wrote: Oops, the % was in the direction, but I was too much in a hurry. - A (bottom-2em) is indeed impossible AFAIK, but what you can do is to hang the bg-img in the footer, and then push him upwards: unfortunately other themes use a background image for the footer. :( the only place i can put this image is the body. i thought about adding extra pixels to the bottom of the globe, but if a user resizes the text, the footer with expand vertically and cover it up again. this method seems like what i'm going to have to do though, since css doesn't cover this. dang it. [...] Hi cj, Aha! - But I wonder we are defeated now: are you really sure? I placed different images in the footer (can be done dynamically too, I think) / tried clientside different font-sizes. The footer is expanding, but not covering up the globe, because of the principle that the globe is always anchored [negative margin-top: his height + some distance] above the footer-position, and doesn't influence the height of the footer itself. With background-images in the footer that will be the same (someway assigning a height to the footer to get the bg-img in / or just cutting off). Or do I see it too simple? See test pages: example a http://home.tiscali.nl/developerscorner/css-discuss/z-index-problem-nw-a.html, example b http://home.tiscali.nl/developerscorner/css-discuss/z-index-problem-nw-b.html and example c http://home.tiscali.nl/developerscorner/css-discuss/z-index-problem-nw-c.html. (with bg-img in footer) Remaining remarks: - Enlarging fontsize more as 3 steps in FF (quite a lot, though - and probably enough) breaks the general layout; in IE the max fontsize is o.k. - Parts of the footer can go under the bottom of the screenheight - but that is not due to the globe thingy. I think it is more general: the relationship between the height of the footer and the min-height of the master-form (and the way how filling the footer). francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index? content menu hiding behind header
thanks so much for sticking with me francky; i really appreciate it.
the reason the css is hopelessly complex is that different parts of it
get pulled into different pages depending on what theme and what
layout is chosen. it's as simple as i know how to make it given what
i need it to do.
On 2/7/06, francky [EMAIL PROTECTED] wrote:
Oops, the % was in the direction, but I was too much in a hurry. - A
(bottom-2em) is indeed impossible AFAIK, but what you can do is to hang
the bg-img in the footer, and then push him upwards:
unfortunately other themes use a background image for the footer. :(
the only place i can put this image is the body. i thought about
adding extra pixels to the bottom of the globe, but if a user resizes
the text, the footer with expand vertically and cover it up again.
this method seems like what i'm going to have to do though, since css
doesn't cover this. dang it.
Then the disappeared tabs in FFox. That seems to be caused by the
{margin-top: -1.5em} of the .service-menu. Adding a bg-color to the
.menu-inside, and giving some less negative margin-top shows that the
service-menu box with the tabs is falling under the menu-inside container.
I guess that is because of the float / clear operations. Giving a
z-index to the tabs doesn't work.
yes, the margin-top moves the content area up so that the content's
sub menu is closer to the main navigation and the page doesn't get a
wide white space between the logo and content. i know the sub menu is
hiding behind the main menu, but i can't figure out why. the main
menu has no background coloring and should be transparent. i even did
a html * {background: transparent none !important;} and it didn't
help. afaik there is no reason why my sub menu is hiding.
i tried putting position: relative on various and all menu areas
along with a z-index but i had no luck with that either. what really
baffles me is why ie is showing the sub menu, though i'm not
complaining as that's the target browser anyway. :-/
Giving absolute position to the content-box can help (assuming
everything above has a certain known height, at least in em).
it doesn't. the site is basically a template that people will put
content into. you can see how bad i am at pulling marketing slogans
out of my hat... lol.
ps1:
Remaining problem: in FF the red bottom line of the content does only
show after hovering over the tabs (!). I don't know why, I didn't see a
relationship in the css (but the css is rather complicated for me).
i haven't encountered this problem. does it have something to do with
font-size maybe? have you gotten it with both small and large sizes?
ps2:
Isn't it possible to separate the tabs-menu from the content-box? and
place it like:
nope. :( the menu is generated separately from the content, and the
sub menu only appears on certain pages. anything within
.content-inside i can manipulate. the things out of it are off limits
to me for this purpose.
ps3:
The SlayerOffice.com Favelet Suite is a * tool. Thanx for hint !
it's saved my bacon more than once. :) i just found the suite
recently, but i also have a bookmark for just MODI, which is basically
the only thing i use.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index? content menu hiding behind header
David Laakso wrote: Leading (line-height) is expressed as a raw number. There is no unit of measure(px, em, %) used with it. The validator is just being a little over-zealous, and complaining about a parse error open string. line-height: 2; is correct. To make the *validator* happy, close the string, like so: line-height: 2.0; Note that a validator bug has been filed http://www.w3.org/Bugs/Public/show_bug.cgi?id=2307, but there appear to be very few developer resources available to make fixes to this tool. If anyone out there is a bored developer, this might be one way to help the community. In any case, since we know that line-height: 2; is correct, I would argue that there is no need whatever to make the validator happy. It is a tool to help you, and you should feel free to ignore it whenever you are certain it is wrong. -Adam Kuehn __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index? content menu hiding behind header
[cj] html and css validate except for a css line-height error that i don't understand. [francky] - The css-error means that you didn't give a unit for the amount of the line-height: Without units some browsers don't know what to measure: px or em or miles. ;-) [dL] Leading (line-height) is expressed as a raw number. There is no unit of measure(px, em, %) used with it. The validator is just being a little over-zealous, and complaining about a parse error open string. line-height: 2; is correct. To make the *validator* happy, close the string, like so: line-height: 2.0; whew, that's what i thought. after reading some other threads here about line height, i was under the impression that it's best not to give a unit to the line height, so this error was really confusing me. thanks francky and david. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index? content menu hiding behind header
[cj]
- how can i move my background globe picture up 1-2em so that it
clears the footer? it needs to stay on the body element(?), though.
[francky]
- body {background: transparent url(graphics/bg-service-1.png) no-repeat
fixed right 80%; }
if i use a percent, resizing the window makes the globe appear in
different vertical places instead of right next to the footer. i know
exactly how far from the bottom i'd like the background image to be,
but i don't think i'm allowed to do this:
body {background: transparent url(graphics/bg-service-1.png) no-repeat
fixed right (bottom-2em);
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index? content menu hiding behind header
Adam Kuehn wrote: David Laakso wrote: Leading (line-height) is expressed as a raw number.[...] Note that a validator bug has been filed http://www.w3.org/Bugs/Public/show_bug.cgi?id=2307, but there appear to be very few developer resources available to make fixes to this tool. If anyone out there is a bored developer, this might be one way to help the community. In any case, since we know that line-height: 2; is correct, I would argue that there is no need whatever to make the validator happy. It is a tool to help you, and you should feel free to ignore it whenever you are certain it is wrong. Now you tell me... =-O . -Adam Kuehn ~davidLaakso If I had known, I would have been a locksmith. --Albert Einstein __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index? content menu hiding behind header
cj wrote:
[cj]- how can i move my background globe picture up 1-2em so that it
clears the footer? it needs to stay on the body element(?), though.
[francky] - body {background: transparent url(graphics/bg-service-1.png)
no-repeat
fixed right 80%; }
if i use a percent, resizing the window makes the globe appear in
different vertical places instead of right next to the footer. i know
exactly how far from the bottom i'd like the background image to be,
but i don't think i'm allowed to do this:
body {background: transparent url(graphics/bg-service-1.png) no-repeat
fixed right (bottom-2em);
Oops, the % was in the direction, but I was too much in a hurry. - A
(bottom-2em) is indeed impossible AFAIK, but what you can do is to hang
the bg-img in the footer, and then push him upwards:
= = =
#world {
position: absolute;
width: 350px;
height: 329px;
right: 5px;
margin-top: -340px;
z-index: 0;
}
= = =
div id=ctl00_divFooterInside class=footer-inside
div id=worldimg
src=http://sltclan.com/images/cj/graphics/bg-service-1.png; alt= /
/div
ul
li(123) 456-7890/li
lia id=ctl00_aContact href=../site/contact.aspxContact
Us/a/li
lia id=ctl00_aSiteMap href=../site/sitemap.aspxSite
Map/a/li
/ul
/div
= = =
Now the globe is on top - you can get him to the background by adding
more foreground (z-index) to the super-container of the whole page:
= = =
.master-form {
z-index: 1;
}
= = =
See test page
http://home.tiscali.nl/developerscorner/css-discuss/z-index-problem-nw.html.
(style additions just before the /head)
Then the disappeared tabs in FFox. That seems to be caused by the
{margin-top: -1.5em} of the .service-menu. Adding a bg-color to the
.menu-inside, and giving some less negative margin-top shows that the
service-menu box with the tabs is falling under the menu-inside container.
I guess that is because of the float / clear operations. Giving a
z-index to the tabs doesn't work.
Giving absolute position to the content-box can help (assuming
everything above has a certain known height, at least in em).
Succes and greetings,
francky
ps1:
Remaining problem: in FF the red bottom line of the content does only
show after hovering over the tabs (!). I don't know why, I didn't see a
relationship in the css (but the css is rather complicated for me).
ps2:
And an other possibility perhaps. - The system is now:
LOGO (float-left) + first menu
- (clear)
Content-box
tabs-menu
other content
Isn't it possible to separate the tabs-menu from the content-box? and
place it like:
LOGO (float-left) + [right-aligned first menu + just in next
line tabs-menu]
--(clear)
Content-box
other content
ps3:
The SlayerOffice.com Favelet Suite is a * tool. Thanx for hint !
f
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] z-index? content menu hiding behind header
on a particular set of pages in my web site, i have a small, secondary tab-like menu in addition to the main navigation. on this set of pages, i'd like to move the main content area (which includes the sub-menu) up a little so that a big gap doesn't appear where the sub menu is taking up vertical space. the problem occurs in ff 1.5 (and opera 8.51) where the sub menu is hidden behind a blank area that the menu div is occupying. i tried putting position: relative; on the menu and sub menu to get z-index to work but i wasn't able to get the sub menu on top. i'm not even sure why it doesn't show up, as nothing in the menu area has a background that should be filling that area in. ie6 shows the menu where i'd like it to be. html and css validate except for a css line-height error that i don't understand. http://sltclan.com/images/cj/z-index-problem.html == other questions that are bugging me but not as bad as the menu: - is there any way to get ie to show my includes area 100% height like firefox? notice how the grey area only goes as far down as the content. and dang ie6's we-don't-do-alpha-transparency... - is there any way to get ff/ie to expand the whole red area to fill in the browser window (minus header/footer)? my ideal look is the vertical red bar to extend to the footer regardless of browser height so that i don't need that retarded red bar at the bottom to show an end to the section (since the right hand side has a background tint that cuts off). i tried putting height: 100% in the parents but i'm not getting something right as it never worked. - how can i move my background globe picture up 1-2em so that it clears the footer? it needs to stay on the body element(?), though. note: for anyone who wants to try a mouseover dom inspector, click the modi link on the menu and choose mouseover dom inspector or modiv2. very, very handy tools. thanks everyone. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index? content menu hiding behind header
cj wrote:
[...]
html and css validate except for a css line-height error that i don't
understand.
http://sltclan.com/images/cj/z-index-problem.html
==
other questions that are bugging me but not as bad as the menu:
- [...]
- how can i move my background globe picture up 1-2em so that it
clears the footer? it needs to stay on the body element(?), though.
[...]
Hi cj,
Two out of the bunch:
- The css-error means that you didn't give a unit for the amount of the
line-height: Without units some browsers don't know what to measure: px
or em or miles. ;-)
- body {background: transparent url(graphics/bg-service-1.png) no-repeat
fixed right 80%; }
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index? content menu hiding behind header
francky wrote:
cj wrote:
[...]
html and css validate except for a css line-height error that i don't
understand.
http://sltclan.com/images/cj/z-index-problem.html
==
other questions that are bugging me but not as bad as the menu:
- [...]
- how can i move my background globe picture up 1-2em so that it
clears the footer? it needs to stay on the body element(?), though.
[...]
Hi cj,
Two out of the bunch:
- The css-error means that you didn't give a unit for the amount of the
line-height: Without units some browsers don't know what to measure: px
or em or miles. ;-)
Leading (line-height) is expressed as a raw number. There is no unit of
measure(px, em, %) used with it. The validator is just being a little
over-zealous, and complaining about a parse error open string.
line-height: 2; is correct.
To make the *validator* happy, close the string, like so:
line-height: 2.0;
~davidLaakso
- body {background: transparent url(graphics/bg-service-1.png) no-repeat
fixed right 80%; }
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
