Re: [css-d] vertical menu question
On a CSS vertical menu, is there a way to have its submenus open in an upward direction if the submenu doesn't have enough space to open in a downward direction? Thanks. Bruce The only possible solution I can think of (using CSS 2) is to position the sub menu absolutely with respect to the viewport using the bottom property. Don't know if there is some new technique using CSS 3. 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/
[css-d] vertical menu question
On a CSS vertical menu, is there a way to have its submenus open in an upward direction if the submenu doesn't have enough space to open in a downward direction? Thanks. Bruce __ 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] Vertical Menu problem
Alan Gresley wrote: The most notable difference occurs with lists - Safari and Gecko based browsers (e.g. Firefox) use padding-left while Internet Exploder uses margin-left to indent, All modern browser have padding-start for list, not padding-left since this default (padding-start) is applied regardless of if the text flows from left to right or right to left. Pedantically, you are correct. but as you are discovering Exploder also has a default top padding. Is this a IE6 whitespace bug you referring to for li? Heh, no. It seems I was a little too cute for my own good. I meant IE has a top padding of zero (the OP already knew Firefox had a top padding), hence the difference. That's why a padding of 0 on the UL seemed to fix the problem, at least at my end. Further reading: [1] http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ Using the Meyer reset or any other reset is the same a knocking down a bridge and then building it back up and can add many extra styles to ones CSS Reset sheets have their limitations, but it seems more of a personal preference than right or wrong to me. To be fair, IE8 can not be referred to as 'exploder' since it now is the best in implementing CSS2.1 correctly. Agreed, and FWIW I consider IE8 to be an excellent browser. adieu Mark __ css-discuss [cs...@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] Vertical Menu problem
Mark Henderson wrote:
Is this a IE6 whitespace bug you referring to for li?
Heh, no. It seems I was a little too cute for my own good. I meant IE
has a top padding of zero (the OP already knew Firefox had a top
padding), hence the difference. That's why a padding of 0 on the UL
seemed to fix the problem, at least at my end.
[...]
adieu
Mark
There is no padding top Mark. All browsers (apart from Safari) have the
default margin-top (1em) of the list showing. IE7- makes default
vertical margins disappear [1] since the list is within a hasLayout
container (the orange box is a float). So when you gave the style,
ul.left_menu_txt {
list-style: none;
margin: 0;
padding: 0;
}
you zeroed out the margin-top of the list. Safari I think is mangling
the HTML causing the margin space to disappear and IE8 shows an unusual
drop of the link 'Standard' under it's own bullet.
http://www.donann.co.uk/new_site/vertical_menu.html
Mangled HTML:
lia href=placeholder
class=left_menu_indentbAll-in-ones/b/strong/li
1. http://css-class.com/test/bugs/ie/haslayout-margins.htm
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@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] Vertical Menu problem
Thanks to everyone for replying.
Especially Yazmin for the styles, which solved the problem, and Mark for the
explanation which has helped me greatly in understanding what was happening
and may help with a few other quirks!
John
On Thursday 04 June 2009 22:58:20 Mark Henderson wrote:
On Behalf Of Yazmin Media
Sent: 5 June 2009 04:38
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Vertical Menu problem
John,
Try these definitions for your CSS:
.verticalMenu {
background-color : #FFD096;
float : left;
margin-left : 6px;
width : 150px;
padding: 0;
}
.left_menu_txt {
padding: 0;
}
ul.left_menu_txt {
list-style: none;
margin: 0;
}
Just to add to this: John, something you will need to understand is that
many styling inconsistencies occur between browsers because these
browsers apply their own styles to HTML elements (hence the now common
use of a reset style sheet[1]). The most notable difference occurs with
lists - Safari and Gecko based browsers (e.g. Firefox) use padding-left
while Internet Exploder uses margin-left to indent, but as you are
discovering Exploder also has a default top padding. As an FYI, for the
sake of efficiency, the last 2 above rules can be merged:
ul.left_menu_txt {
list-style: none;
margin: 0;
padding: 0;
}
HTH
Mark
Further reading:
[1] http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
__
css-discuss [cs...@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/
--
http://www.donann.co.uk
__
css-discuss [cs...@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] Vertical Menu problem
Hi All, I can't see how to get rid of the padding at the top of the menu in Firefox: http://www.donann.co.uk/new_site/vertical_menu.html Safari displays it as I would like it without the padding showing. Also for the link labeled 'Home' to be in line with the other links in IE I've found I need to add an extra li/li. The menu to the right has the li/li removed to illustrate the problem in IE and that the padding is still there in Firefox. Sorry if it's something simple, it's driving me to distraction! John -- http://www.donann.co.uk __ css-discuss [cs...@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] Vertical Menu problem
John,
Try these definitions for your CSS:
.verticalMenu {
background-color : #FFD096;
float : left;
margin-left : 6px;
width : 150px;
padding: 0;
}
.left_menu_txt {
padding: 0;
}
ul.left_menu_txt {
list-style: none;
margin: 0;
}
It should also allow you to drop the extra li you defined for IE.
On Thu, Jun 4, 2009 at 6:17 AM, John j...@greenbirch.co.uk wrote:
Hi All,
I can't see how to get rid of the padding at the top of the menu in
Firefox:
http://www.donann.co.uk/new_site/vertical_menu.html
Safari displays it as I would like it without the padding showing.
Also for the link labeled 'Home' to be in line with the other links in IE
I've
found I need to add an extra li/li.
The menu to the right has the li/li removed to illustrate the problem
in
IE and that the padding is still there in Firefox.
Sorry if it's something simple, it's driving me to distraction!
John
--
http://www.donann.co.uk
--
Yazmin Wickham
http://www.yazminmedia.com
__
css-discuss [cs...@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] Vertical Menu problem
On Behalf Of Yazmin Media
Sent: 5 June 2009 04:38
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Vertical Menu problem
John,
Try these definitions for your CSS:
.verticalMenu {
background-color : #FFD096;
float : left;
margin-left : 6px;
width : 150px;
padding: 0;
}
.left_menu_txt {
padding: 0;
}
ul.left_menu_txt {
list-style: none;
margin: 0;
}
Just to add to this: John, something you will need to understand is that
many styling inconsistencies occur between browsers because these
browsers apply their own styles to HTML elements (hence the now common
use of a reset style sheet[1]). The most notable difference occurs with
lists - Safari and Gecko based browsers (e.g. Firefox) use padding-left
while Internet Exploder uses margin-left to indent, but as you are
discovering Exploder also has a default top padding. As an FYI, for the
sake of efficiency, the last 2 above rules can be merged:
ul.left_menu_txt {
list-style: none;
margin: 0;
padding: 0;
}
HTH
Mark
Further reading:
[1] http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
__
css-discuss [cs...@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] Vertical Menu problem
Thanks for the additional input Mark. I thought I had tried merging those
two rules, but it didn't work. I suppose something else was interfering at
the time.
And thanks for the reset link...hadn't come across that yet. :)
On Thu, Jun 4, 2009 at 5:58 PM, Mark Henderson m...@cwc.co.nz wrote:
As an FYI, for the
sake of efficiency, the last 2 above rules can be merged:
ul.left_menu_txt {
list-style: none;
margin: 0;
padding: 0;
}
HTH
Mark
--
Yazmin Wickham
http://www.yazminmedia.com
__
css-discuss [cs...@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] Vertical Menu problem
Mark Henderson wrote:
[...]
Just to add to this: John, something you will need to understand is that
many styling inconsistencies occur between browsers because these
browsers apply their own styles to HTML elements (hence the now common
use of a reset style sheet[1]).
When IE8 (post beta) was released, the differences between each browsers
default stylesheet became smaller [2].
The most notable difference occurs with
lists - Safari and Gecko based browsers (e.g. Firefox) use padding-left
while Internet Exploder uses margin-left to indent,
All modern browser have padding-start for list, not padding-left since
this default (padding-start) is applied regardless of if the text flows
from left to right or right to left.
but as you are
discovering Exploder also has a default top padding.
Is this a IE6 whitespace bug you referring to for li?
As an FYI, for the
sake of efficiency, the last 2 above rules can be merged:
ul.left_menu_txt {
list-style: none;
margin: 0;
padding: 0;
}
HTH
Mark
Further reading:
[1] http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
Using the Meyer reset or any other reset is the same a knocking down a
bridge and then building it back up and can add many extra styles to
ones CSS.
To be fair, IE8 can not be referred to as 'exploder' since it now is the
best in implementing CSS2.1 correctly.
2. http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@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] Vertical Menu problem
John wrote:
Hi All,
I can't see how to get rid of the padding at the top of the menu in Firefox:
http://www.donann.co.uk/new_site/vertical_menu.html
Safari displays it as I would like it without the padding showing.
Also for the link labeled 'Home' to be in line with the other links in IE
I've
found I need to add an extra li/li.
The menu to the right has the li/li removed to illustrate the problem in
IE and that the padding is still there in Firefox.
Sorry if it's something simple, it's driving me to distraction!
John
Maybe a pure CSS solution with valid and clean HTML.
http://css-class.com/x/list-images.htm
Much more friendly for IE6 also.
BTW, not sure why that margin top was missing from Safari. Something in
your code? The default margin-top for list has been removed here.
ul.left_menu_txt {
list-style: none;
padding-left:18px;
color : #070d7d;
margin-top: 0;
}
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@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] Vertical Menu problem
Alan Gresley wrote: John wrote: Hi All, I can't see how to get rid of the padding at the top of the menu in Firefox: http://www.donann.co.uk/new_site/vertical_menu.html John Maybe a pure CSS solution with valid and clean HTML. http://css-class.com/x/list-images.htm Thanks, Alan. FWIW, some comparisons of browser rendering of total height of the orange-like box on this end... Box height in Mac OS X 10.4.11 Opera/10.00 Beta 194px Camino/1.6.7 194px Safari/3.2.1 217px FF/3.0.10 228px XP IE/8.0 (on Parallels in Mac OS X 10.4.11) 228px ~d __ css-discuss [cs...@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] Vertical Menu problem
David Laakso wrote:
http://css-class.com/x/list-images.htm
Thanks, Alan.
FWIW, some comparisons of browser rendering of total height of the
orange-like box on this end...
Box height in Mac OS X 10.4.11
Opera/10.00 Beta
194px
Camino/1.6.7
194px
Safari/3.2.1
217px
FF/3.0.10
228px
XP IE/8.0 (on Parallels in Mac OS X 10.4.11)
228px
That is kinda expected. The page doesn't specify font-family nor line-
height.
add
html {font: 1em/1.4 'Helvetica Neue', Arial, sans-serif;}
and see the various browsers fall in line (modulo a couple of
pixels,depending on how they round off decimal values).
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [cs...@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] Vertical menu, Thanks
Thanks to Alan and Tedd for the help I solved the problem, by looking at the source. I've had the source-code printed to a PDF-file, and then copy - pasted the source-code to a real file. But some non-wanted text, had mixed in, and when I deleted this it solved my problem. So, be careful when you make a copy - paste !!! -- Regards / Mhv. Ib K. jensen __ css-discuss [EMAIL PROTECTED] 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] Vertical menu
Hi I'm sorry for my english writing. I'm developing a site on a local computer. And found the menu i wanted here: sperling.com/examples/menuv/ But i can't get it to work in IE6 properly. The first menupoint is working ok, but the submenus are gone to cyperspace. In Opera 9 and Firefox 2, it works perfect. Not tested with Safari and other browsers yet. Having any solutions second ? : At the moment the menu is popping out from left to right. Is it possibly to make it pop out from right to left ? third ? : Is it possibly to make the menu stay in the same column. So the submenus is covering the main menu. Hope you understand my questions. -- Regards / Mhv. Ib K. jensen __ css-discuss [EMAIL PROTECTED] 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] Vertical menu
Your English writing is fine. :-)
I can't understand why you can't get the menu to work in IE6. It works fine for
me. Perhaps you have a modified code that needs to be inspected? Can you upload
it somewhere and send me the URL?
Yes, you can make the sub-menus pop out from right to left by changing: #menuv
li ul {left: - to -8em as below. This is not without problems, as you would
then need to reverse the direction of the 'arrow pointer' gif and alter the
code to place it on the opposite side.
#menuv li ul
{
position: absolute;
top: 0;
left: -8em;/* distance from parent menu */
display: none;
}
To make the sub-menu cover the parent menu, just change the 'left:' (in the
code above) to 0. However, it's not nice and makes the menu hard to navigate,
so you may not want to do it. :-)
Regards,
Alan.
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups
Shopsmith 520 + bits
Flatulus Antiquitus
- Original Message -
From: Ib Jensen
To: css-d@lists.css-discuss.org
Sent: Thursday, May 15, 2008 9:21 AM
Subject: [css-d] Vertical menu
I'm sorry for my english writing.
I'm developing a site on a local computer.
And found the menu i wanted here:
sperling.com/examples/menuv/
But i can't get it to work in IE6 properly. The first menupoint is working
ok, but the submenus are gone to cyperspace.
In Opera 9 and Firefox 2, it works perfect. Not tested with Safari and other
browsers yet.
Having any solutions
second ? :
At the moment the menu is popping out from left to right.
Is it possibly to make it pop out from right to left ?
third ? :
Is it possibly to make the menu stay in the same column.
So the submenus is covering the main menu
__
css-discuss [EMAIL PROTECTED]
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] Vertical menu
At 10:21 AM +0200 5/15/08, Ib Jensen wrote: Hi I'm sorry for my english writing. I'm developing a site on a local computer. And found the menu i wanted here: sperling.com/examples/menuv/ But i can't get it to work in IE6 properly. The first menupoint is working ok, but the submenus are gone to cyperspace. In Opera 9 and Firefox 2, it works perfect. Not tested with Safari and other browsers yet. Having any solutions second ? : At the moment the menu is popping out from left to right. Is it possibly to make it pop out from right to left ? third ? : Is it possibly to make the menu stay in the same column. So the submenus is covering the main menu. Hope you understand my questions. Your English is fine. The best advice I can give you is to take what I have on my site as-is and get it to work on your site. Once you do that, then make a copy and alter the copy in baby-steps to get it to look the way you want. It's a process of copy, alter and test. If any step doesn't work, then you can fall back on the previous step and try again. The most common mistake people make is not keeping the paths to the css and csshover files the same. You can move anything you want anywhere you want, but you have to let the code know where you put these files. If you have any other problems, please review the instructions I provided at: http://sperling.com/examples/menuh/ and http://sperling.com/examples/menuv Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [EMAIL PROTECTED] 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] Vertical menu not displaying in Safari
I apologize because I'm reading this in digest. But have you corrected this issue? I looked at it in 2.0.4 (419.3) and I think it looks really good. Bill __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Vertical menu not displaying in Safari
Hi, Would be grateful if someone could help with this one. I have designed and finished a site for a client which uses a vertical ul menu. This displays perfectly in Firefox and IE6, but in Safari the menu collapses and you only see the contact tab. The url is: http://www.audiocentricstudios.com/ Can someone help, please. Thanks in advance. I am Paul Paul Galatis Galatis Group Project Design The Saga Centre, Unit 10, 326 Kensal Rd London W10 5BZ, UK Cell (UK): +44 (0) 777 572 7942 [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Vertical menu not displaying in Safari
On Oct 26, 2006, at 5:19 PM, Paul Galatis wrote: Would be grateful if someone could help with this one. I have designed and finished a site for a client which uses a vertical ul menu. This displays perfectly in Firefox and IE6, but in Safari the menu collapses and you only see the contact tab. The url is: http://www.audiocentricstudios.com/ Interesting... The whole a box is pulled out of sight. Possibly not 'wrong' according to the specs, but a strange interpretation Anyway: move the 'text-indent:-px;' from #navigation ul li to #navigation ul li a. That fixes it, and it makes more sense, given that the text-indent property is inherited. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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/
