Re: [css-d] menu test

[David Laakso]

On 12/11/10 6:45 AM, Erik Visser wrote:

Please give me your remarks.
And how this menu behaves in the different browsers and/or 
pplatforms you use.


Thanks, Erik




http://beta.ottermeerhoeve.nl/index.php







Always a pleasure to land on a page with primary content set at default:-) .
O.K. Safari and Camino and SeaMonkey. However, this line beneath the 
menu not seen, and is clipped in landing in Opera, FF, IE 8/7/6:


http://beta.ottermeerhoeve.nl/familieavontuur.php>">Ook in 2011
Ottermeer Famlieavontuur !

If of concern, in FF the long-words walkout the menu with + font-scaling 
[same in IE 8/7/6 at text-size "largest."]



You may want to flip the font-family so Macs get Helvetica and PCs get 
Arial.


Best,
~d

--
http://chelseacreekstudio.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] menu test

[Erik Visser]

David Laakso schreef op 12/11/10 12:49 PM:

On 12/11/10 6:45 AM, Erik Visser wrote:

Please give me your remarks.
And how this menu behaves in the different browsers and/or pplatforms 
you use.


Thanks, Erik


uri, Erik?


eeehhh..

http://beta.ottermeerhoeve.nl/index.php


__
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] menu test

[David Laakso]

On 12/11/10 6:45 AM, Erik Visser wrote:

Please give me your remarks.
And how this menu behaves in the different browsers and/or pplatforms 
you use.


Thanks, Erik


uri, Erik?

--
:: desktop and mobile ::
http://chelseacreekstudio.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] menu test

[Erik Visser]

A client wants elliptical menu buttons with Comic Sans font,

Please give me your remarks.
And how this menu behaves in the different browsers and/or pplatforms 
you use.



Thanks, Erik
__
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] menu test - My Pleasure

[Elias Abunassar]

Chris-

My pleasure...no worries. I hope you find the solution you're looking to
accomplish.

No worries about the link. Whatever I can do to help, anyone, 'if' I know
the answer. 

Took a hiatus for a bit, now back-in full-time. Just transferred my domain
and revising my site. I'll let you know when I set up shop.

All I ask is to 'pay it forward' when you become a CSS guru, cool? Help
others who ask for help, if you can.

Until we speak again, Chris. Thanks for the kind words!

Cheers,

elias
Washington D.C.


On 9/28/07 11:07 AM, "[EMAIL PROTECTED]" <[EMAIL PROTECTED]> wrote:

> This is a great discussion group and I have learned a lot from being here.  I
> am new at all this.
>  
> It's css veterans like you that make this such a great place and wonderful
> resource and we really appreciate your being here.  There is the occasional
> grouchy person but that's rare.  The moderators have a sharp eye and a sharp
> wit about off topic.  Sometimes I consider baiting them just to see what they
> would say but I don't like to waste anyone's time and they are very
> business-like about keeping the discussion list focused.
>  
> Thank you for the link.  I thought it would be something like that but lack of
> sleep lured me into asking rather than figuring out for myself.  Thank you for
> obliging a tired guy.
>  
> You obviously know your way about this stuff.  Do you have a website or blog
> of your work?  It would be interesting to see some of your work.
>  
> Take care,
> Chris Johnson
> Washington by Seattle USA
>  
> - Original Message -
> From: Elias Abunassar <mailto:[EMAIL PROTECTED]>
> To: [EMAIL PROTECTED]
> Sent: Friday, September 28, 2007 6:37 AM
> Subject: Re: [css-d] menu test - Link to Stu Nichol's 'Pure CSS Multi-Level
> Drop-down Menu"
> 
> My pleasure and thanks for welcoming me. Apologies for not including Stu
> Nichols link:
> 
> http://www.cssplay.co.uk/menus/dd_valid.html
> 
> He has a different workaround for the Multi-level Drop Down Menu than the
> (csshover.htc) hack. Visit his page then go to 'Menu' in the top nav.
> 
> Enjoy, hope this helps.
> 
> Cheers,
> 
> elias
> 
> 
> On 9/28/07 9:26 AM, "[EMAIL PROTECTED]" <[EMAIL PROTECTED]> wrote:
> 
>> Thanks for joining!
>>  
>> Sorry to be obtuse here... what is a link for Stu Nichols?
>>  
>> Thanks!
>>  
>>  
> 
>> __
>> 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-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] menu test - thank you!

[JGardner]

Wow, I can't believe you went to all of this trouble, thank you!!

Thank you for the links - I read the information (understood about 1/2 but will 
read again)

I  have everything up and working - thanks to this group and Georg.

Thank you again,
Jennifer

PS I hope to some day be knowledgeable enough to "pay forward" the help I have 
received.

Of course: my first example worked just fine, since I had placed all
corrections in a style-block _after_ the [if lt IE 7] style-block. It is
a matter of order and specificity - that I overlooked.

   I can't believe I missed this!


Again: 

1: All new styles moved to the stylesheet where they have replaced the
old ones...

...and my styles are easy to see since I don't use indentations - a
"personal preference" thing.

2: I've deleted all unnecessary and disturbing styles in the [if lt IE
7] style-block in the page-head, so IE6 gets its corrections but will
otherwise follow what's in the stylesheet. It is *important* that you
transfer my corrections to your own page, or else it will fail in IE6 again.

3: I unexpectedly found that my "contain floats" method misfired in one
browser - disturbing the dropdown, so I've changed that to the
"easyclearing"[1] method - and tested again.

4: The use of 'font-size: small' on #menuh triggers IE/win's "font
resizing bug"[2], so I changed that to 'font-size: 82%'. Choose another
value if you like, but avoid the use of "keywords" if you want bug-free
and somewhat identical font size across browser-land.

regards
Georg

[1]http://www.positioniseverything.net/easyclearing.html
[2]http://www.gunlaug.no/contents/wd_additions_13.html
-- 
http://www.gunlaug.no







   

Got a little couch potato? 
Check out fun summer activities for kids.
http://search.yahoo.com/search?fr=oni_on_mail&p=summer+activities+for+kids&cs=bz
 
__
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] menu test - 2nd follow up-Revised

[Elias Abunassar]

Revised-forgot the closing bracket for:

body {behavior: url(csshover.htc);} 

Maybe this would have helped, using inline CSS to fix < IE7 bugs and below:





Sorry for the errors on the previous post.

Regards,

elias



>> You have an [if lt IE 7] style-block in the page head, and those styles
>> will of course override what's in the stylesheet and make everything
>> fail in IE6 and older versions.
>> 
>> Of course: my first example worked just fine, since I had placed all
>> corrections in a style-block _after_ the [if lt IE 7] style-block. It is
>> a matter of order and specificity - that I overlooked.
>> 
>> 
>> Again: 
>> 
>> 1: All new styles moved to the stylesheet where they have replaced the
>> old ones...
>> 
>> ...and my styles are easy to see since I don't use indentations - a
>> "personal preference" thing.
>> 
>> 2: I've deleted all unnecessary and disturbing styles in the [if lt IE
>> 7] style-block in the page-head, so IE6 gets its corrections but will
>> otherwise follow what's in the stylesheet. It is *important* that you
>> transfer my corrections to your own page, or else it will fail in IE6 again.
>> 
>> 3: I unexpectedly found that my "contain floats" method misfired in one
>> browser - disturbing the dropdown, so I've changed that to the
>> "easyclearing"[1] method - and tested again.
>> 
>> 4: The use of 'font-size: small' on #menuh triggers IE/win's "font
>> resizing bug"[2], so I changed that to 'font-size: 82%'. Choose another
>> value if you like, but avoid the use of "keywords" if you want bug-free
>> and somewhat identical font size across browser-land.
>> 
>> regards
>> Georg
>> 
>> [1]http://www.positioniseverything.net/easyclearing.html
>> [2]http://www.gunlaug.no/contents/wd_additions_13.html
> 
> 
> __
> 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-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] menu test - 2nd follow up

[Elias Abunassar]

I just joined, sorry for the late reply.

Maybe this would have helped:




Again, sorry for not replying sooner.

If anyone else is interested, Stu Nichols of CSS Display.co.uk has an
example of a "Pure CSS Multi-Level Drop Down Menu," including IE 6 & 7
conditional bugs/fixes/hacks and workarounds.

Best,

elias


On 9/27/07 10:11 PM, "Gunlaug Sørtun" <[EMAIL PROTECTED]> wrote:

> As promised, I've gone through the entire set of styles again, and found
> that the simplest factors are the easiest to miss :-)
> 
> You have an [if lt IE 7] style-block in the page head, and those styles
> will of course override what's in the stylesheet and make everything
> fail in IE6 and older versions.
> 
> Of course: my first example worked just fine, since I had placed all
> corrections in a style-block _after_ the [if lt IE 7] style-block. It is
> a matter of order and specificity - that I overlooked.
> 
> 
> Again: 
> 
> 1: All new styles moved to the stylesheet where they have replaced the
> old ones...
> 
> ...and my styles are easy to see since I don't use indentations - a
> "personal preference" thing.
> 
> 2: I've deleted all unnecessary and disturbing styles in the [if lt IE
> 7] style-block in the page-head, so IE6 gets its corrections but will
> otherwise follow what's in the stylesheet. It is *important* that you
> transfer my corrections to your own page, or else it will fail in IE6 again.
> 
> 3: I unexpectedly found that my "contain floats" method misfired in one
> browser - disturbing the dropdown, so I've changed that to the
> "easyclearing"[1] method - and tested again.
> 
> 4: The use of 'font-size: small' on #menuh triggers IE/win's "font
> resizing bug"[2], so I changed that to 'font-size: 82%'. Choose another
> value if you like, but avoid the use of "keywords" if you want bug-free
> and somewhat identical font size across browser-land.
> 
> regards
> Georg
> 
> [1]http://www.positioniseverything.net/easyclearing.html
> [2]http://www.gunlaug.no/contents/wd_additions_13.html


__
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] menu test - 2nd follow up

[Gunlaug Sørtun]

As promised, I've gone through the entire set of styles again, and found
that the simplest factors are the easiest to miss :-)

You have an [if lt IE 7] style-block in the page head, and those styles
will of course override what's in the stylesheet and make everything
fail in IE6 and older versions.

Of course: my first example worked just fine, since I had placed all
corrections in a style-block _after_ the [if lt IE 7] style-block. It is
a matter of order and specificity - that I overlooked.


Again: 

1: All new styles moved to the stylesheet where they have replaced the
old ones...

...and my styles are easy to see since I don't use indentations - a
"personal preference" thing.

2: I've deleted all unnecessary and disturbing styles in the [if lt IE
7] style-block in the page-head, so IE6 gets its corrections but will
otherwise follow what's in the stylesheet. It is *important* that you
transfer my corrections to your own page, or else it will fail in IE6 again.

3: I unexpectedly found that my "contain floats" method misfired in one
browser - disturbing the dropdown, so I've changed that to the
"easyclearing"[1] method - and tested again.

4: The use of 'font-size: small' on #menuh triggers IE/win's "font
resizing bug"[2], so I changed that to 'font-size: 82%'. Choose another
value if you like, but avoid the use of "keywords" if you want bug-free
and somewhat identical font size across browser-land.

regards
Georg

[1]http://www.positioniseverything.net/easyclearing.html
[2]http://www.gunlaug.no/contents/wd_additions_13.html
-- 
http://www.gunlaug.no
__
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] menu test - 2nd follow up

[Gunlaug Sørtun]

JGardner wrote:
>> http://www.jgardnerdesigns.com/web-design-services.htm

> When you wrote: Float the entire #menuh right, and _contain_ it. - 
> what did you mean by and contain_it?

"Contain" here means to make the parent element "expand (or stretch) to
contain floats", and the parent element in your case is #menuh-container.
Otherwise the parent-element can't be used for adding background-colors
behind and around its floating child - the #menuh.


The buggy "auto-containment" effect in IE/win isn't replicated by any of
the good browsers, so we have to tell the good browsers directly that
they must "contain floats".

Of the many ways we can do that (tell them what to do), only a few will
actually work in your case because you have a dropdown  in that menu.
I used 'display: table', which has no negative effects in your case
because of how CSS tables work.
IE/win doesn't understand that 'display: table' property at all, but
this is one of those cases where IE's own 'hasLayout' bug comes to its
rescue.

> I had to leave the float:right style on the page.  If I moved it to 
> the style sheet it didn't work.  I think I remember hearing that to 
> do a float you needed to declare the position, but when I declared 
> the position on the menuh div it still didn't work.  So for now I am 
> leaving the float declaration on the page.

Floats should not be given any positions - unless one also want to
offset it with 'position: relative'.
Absolute or fixed positioning of floats (as found in some stylesheets)
simply mean the float-property will be ignored by browsers.

I'll check that I didn't miss any of your existing styles. In my demo
they are co-existing with my styles since I never touched your stylesheet.

I'll be back on that once I have had time to dissect your styles down to
the smallest details.

> Thank you again for your help.  I did a Google search for the IE6 
> auto-expansion bug and it appears that maybe you coined the phrase - 
> I am impressed.  I will be reading up on it and trying to understand 
> it all.

Do that.
FYI: the "auto-expansion" bug makes any element act like it were an HTML
table-element on drugs. It works different on horizontal and vertical
dimensions, since it doesn't keep the elements children in check the
same way in both directions. Fun :-)

Also: since the patch they have used to fix the "auto-expansion" bug in
IE7 often has worse effects than the original bug itself, we may have to
deal with that IE/win bug and the buggy patches for a long time.

regards
Georg
-- 
http://www.gunlaug.no
__
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] menu test - 2nd follow up

[JGardner]

Thank you so much!

When you wrote: Float the entire #menuh right, and _contain_ it. - what did you 
mean by and contain_it?

I had to leave the float:right style on the page.  If I moved it to the style 
sheet it didn't work.  I think I remember hearing that to do a float you needed 
to declare the position, but when I declared the position on the menuh div it 
still didn't work.  So for now I am leaving the float declaration on the page.

Thank you again for your help.  I did a Google search for the IE6 
auto-expansion bug and it appears that maybe you coined the phrase - I am 
impressed.  I will be reading up on it and trying to understand it all.

Jennifer

JGardner wrote:
> http://www.jgardnerdesigns.com/web-design-services.htm

> Per the problems below I made some changes, which I think solved the 
> +1 break, but something caused some extra padding/margin, something 
> in IE6.  So now the page has all of this extra which space on the 
> right side.

Wrong width on menu, combined with IE6' "auto-expansion bug". A lethal
combination.

IE6 also needs to establish a "relation" between #menuh-container and
#menuh.


> Also, due to the changes the navigation now is on the left side, I 
> had wanted it aligned on the right side.  I can live with it since it
>  is more functional now, but if anyone knows how I can get it to 
> align to the right side of the page that would be a big bonus!

Float the entire #menuh right, and _contain_ it. Background color goes
on #menuh-container.

Example: 

New styles for the relevant elements are found in page-head.

Only tested in IE6, IE7, Firefox 2.0.0.7 and Opera 9.23.

regards
Georg
-- 
http://www.gunlaug.no







  

Luggage? GPS? Comic books? 
Check out fitting gifts for grads at Yahoo! Search
http://search.yahoo.com/search?fr=oni_on_mail&p=graduation+gifts&cs=bz
__
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] menu test - follow up +more

[Gunlaug Sørtun]

JGardner wrote:
> http://www.jgardnerdesigns.com/web-design-services.htm

> Per the problems below I made some changes, which I think solved the 
> +1 break, but something caused some extra padding/margin, something 
> in IE6.  So now the page has all of this extra which space on the 
> right side.

Wrong width on menu, combined with IE6' "auto-expansion bug". A lethal
combination.

IE6 also needs to establish a "relation" between #menuh-container and
#menuh.


> Also, due to the changes the navigation now is on the left side, I 
> had wanted it aligned on the right side.  I can live with it since it
>  is more functional now, but if anyone knows how I can get it to 
> align to the right side of the page that would be a big bonus!

Float the entire #menuh right, and _contain_ it. Background color goes
on #menuh-container.

Example: 

New styles for the relevant elements are found in page-head.

Only tested in IE6, IE7, Firefox 2.0.0.7 and Opera 9.23.

regards
Georg
-- 
http://www.gunlaug.no
__
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] menu test - follow up +more

[JGardner]

Thank you to everyone who took the time to test my menu!

Per the problems below I made some changes, which I think solved the +1 break, 
but something caused some extra padding/margin, something in IE6.  So now the 
page has all of this extra which space on the right side.  You can see it here 
- http://www.jgardnerdesigns.com/web-design-services.htm

If anyone has any suggestions, please send them my way.  Also, due to the 
changes the navigation now is on the left side, I had wanted it aligned on the 
right side.  I can live with it since it is more functional now, but if anyone 
knows how I can get it to align to the right side of the page that would be a 
big bonus!

Thank you again for taking the time to help me with this!
Jennifer



os x 10.4.01

I think the menu is as intended in safari, ff, and camino: but +1 breaks 
it in all. In opera, the menu is aligned left with the "about" block 
breaking left approximately 30px out of the outermost page container.

xp ie6 and ie7 on parallels/os x 10.4.01

In ie7 the link blocks break the top of the nav background band approx. 
8px. At text-sixe "largest" they break out the bottom of the background 
band.

In ie6 the menu is the same as opera/mac (it is aligned and breaking 
left). And, as well, the link blocks break the top of the nav background 
band approx. 8px.

Sorry for all the bad news...

Best,

~dL


-- 
http://chelseacreekstudio.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/







   

Looking for a deal? Find great prices on flights and hotels with Yahoo! 
FareChase.
http://farechase.yahoo.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] menu test

[Alan Gresley]

Jennifer Gardner wrote in reply to Georg Sorten

> Thank you so much!!  Other than a slight positioning problem it seems to all 
> be working now.

> Is
> there a specific place (or book) that will explain how you knew what to
> do?  I did it and it worked but I don't know why it worked or more
> importantly how I would know when it would solve a problem in the
> future.
>
> Thank you all for taking the time to test the menu for me.  This group is 
> amazing!!
> Jennifer
>
> P.S. Sorry Georg I forgot to reply to all the first time.

Hi Jennifer

I don't have IE6 or even understand how it handles z-index since it has 
problems also when a container doesn't have layout [1]. The simple answer in 
why Georg's solution works is that how z-indexing can work. The are several 
solutions which work in good browsers but this is the only solution that works 
for IE. In IE, if two sibling rp containers have ap children, no matter what 
z-index is given to the ap elements, the layering of each ap element relative 
to each other stays the same since they belong to different rp parents.

In IE a z-index of 1 plus should instead be given to at least the first rp 
element. See example 6F in this test page [2]. To get a better idea in 
z-indexing see this page in the wiki [3]. The specs [4] are very clear, part of 
which I have quoted below.

"An element that establishes a local stacking context generates a box that has 
two stack levels: one for the stacking context it creates (always '0') and one 
for the stacking context to which it belongs (given by the 'z-index' property)."

The part where it say "stacking context to which it belongs" is referring to 
the rp #header-inner element belonging the the root stacking context . 
And when Georg gave the rp #header-inner element a z-index:1 he created a new 
local staking content for it's descendantnts or the part that says in the specs 
"stacking context it creates." Now with z-index:1 the #header-inner element is 
now layered higher than any other element on the page outside of it since no 
other of these elements have a z-index.

1. 

2. 

3. 

4. 

I hope this helps.

Kind Regards, Alan 

__
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] menu test

[JGardner]

Thank you so much!!  Other than a slight positioning problem it seems to all be 
working now.

Is
there a specific place (or book) that will explain how you knew what to
do?  I did it and it worked but I don't know why it worked or more
importantly how I would know when it would solve a problem in the
future.

Thank you all for taking the time to test the menu for me.  This group is 
amazing!!
Jennifer

P.S. Sorry Georg I forgot to reply to all the first time.

- Original Message 
From: Gunlaug Sørtun <[EMAIL PROTECTED]>
To: JGardner <[EMAIL PROTECTED]>
Cc: CSS List 
Sent: Friday, September 21, 2007 1:15:17 PM
Subject: Re: [css-d] menu test

JGardner wrote:

> http://www.jgardnerdesigns.com/web-design-services.htm
> 
> It seems like sometimes in IE 6 when you hover over the drop down 
> links they disappear.  Please let me know if this happens to you and 
> if so what browser you are using.

IE6 and IE7 can't stack absolute positioned elements properly, so the
drop down ends up behind the text below instead of in front of it. This
of course leads to loss of focus on :hover when text gets in front of
the drop-down.

To fix this IE/win bug, add...

#header-inner {position: relative; z-index: 1;}

...to stack the entire header higher than the content.

> I am also still having the positioning problem in IE6 - the menu you 
> will not move over to the left as it does with FireFox, and IE7.  So 
> if you see this problem on a different browser please let me know.

I didn't check how wide 'width: 100%' is supposed to be, but Opera 9
interprets your styles same as IE6.

Change to...

#menuh {width: auto;}

...and they will all agree and send the menu to the same spot on the
right side.

regards
Georg
-- 
http://www.gunlaug.no
__
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/







   

Be a better Heartthrob. Get better relationship answers from someone who knows. 
Yahoo! Answers - Check it out. 
http://answers.yahoo.com/dir/?link=list&sid=396545433
__
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] menu test

[Gunlaug Sørtun]

JGardner wrote:

> http://www.jgardnerdesigns.com/web-design-services.htm
> 
> It seems like sometimes in IE 6 when you hover over the drop down 
> links they disappear.  Please let me know if this happens to you and 
> if so what browser you are using.

IE6 and IE7 can't stack absolute positioned elements properly, so the
drop down ends up behind the text below instead of in front of it. This
of course leads to loss of focus on :hover when text gets in front of
the drop-down.

To fix this IE/win bug, add...

#header-inner {position: relative; z-index: 1;}

...to stack the entire header higher than the content.

> I am also still having the positioning problem in IE6 - the menu you 
> will not move over to the left as it does with FireFox, and IE7.  So 
> if you see this problem on a different browser please let me know.

I didn't check how wide 'width: 100%' is supposed to be, but Opera 9
interprets your styles same as IE6.

Change to...

#menuh {width: auto;}

...and they will all agree and send the menu to the same spot on the
right side.

regards
Georg
-- 
http://www.gunlaug.no
__
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] menu test

[David Laakso]

JGardner wrote:
> Hi,
>
> For whoever has a second (risky question :-)) could you test the drop down 
> function on the menu (there is only a drop down section under services).  You 
> can find the menu here - 
> http://www.jgardnerdesigns.com/web-design-services.htm
>
> It seems like sometimes in IE 6 when you hover over the drop down links they 
> disappear.  Please let me know if this happens to you and if so what browser 
> you are using.
>
> I am also still having the positioning problem in IE6 - the menu you will not 
> move over to the left as it does with FireFox, and IE7.  So if you see this 
> problem on a different browser please let me know.
>
> Thanks for your time.
>
> Jennifer
>
>
>
>
>
>   

os x 10.4.01

I think the menu is as intended in safari, ff, and camino: but +1 breaks 
it in all. In opera, the menu is aligned left with the "about" block 
breaking left approximately 30px out of the outermost page container.

xp ie6 and ie7 on parallels/os x 10.4.01

In ie7 the link blocks break the top of the nav background band approx. 
8px. At text-sixe "largest" they break out the bottom of the background 
band.

In ie6 the menu is the same as opera/mac (it is aligned and breaking 
left). And, as well, the link blocks break the top of the nav background 
band approx. 8px.

Sorry for all the bad news...

Best,

~dL


-- 
http://chelseacreekstudio.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] menu test

[Kenny Graham]

> It seems like sometimes in IE 6 when you hover over the drop down links they 
> disappear.  Please let me know if this happens to you and if so what browser 
> you are using.

In IE 6, the menu is going under the content, so it loses focus when
you hover over the lower menu items.  Set the menu to have a higher
z-index.  Also, the menu bar is positioned too high (vertically, not
z-index) in IE 6.
__
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] menu test

[JGardner]

Hi,

For whoever has a second (risky question :-)) could you test the drop down 
function on the menu (there is only a drop down section under services).  You 
can find the menu here - http://www.jgardnerdesigns.com/web-design-services.htm

It seems like sometimes in IE 6 when you hover over the drop down links they 
disappear.  Please let me know if this happens to you and if so what browser 
you are using.

I am also still having the positioning problem in IE6 - the menu you will not 
move over to the left as it does with FireFox, and IE7.  So if you see this 
problem on a different browser please let me know.

Thanks for your time.

Jennifer




   

Moody friends. Drama queens. Your life? Nope! - their life, your story. Play 
Sims Stories at Yahoo! Games.
http://sims.yahoo.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] Menu test

[David Laakso]

David Laakso wrote:


tedd wrote:



Please test the following --
http://www.webbytedd.com/menu_v
http://www.webbytedd.com/menu_h
-- and report each menu's operation.
tedd


XP_SP2 IE6/FF/Moz?Opera
Both are fine on my end with and without zoom @ 1280, Ted. Nice job.
(BTW,  slow catching up with back mail, sorry).
~dL


Ted, FWIW, you may want to cover for the forthcoming IE7 with this
|

Re: [css-d] Menu test

[David Laakso]

tedd wrote:


Hi:

Please test the following --

http://www.webbytedd.com/menu_v

http://www.webbytedd.com/menu_h

-- and report each menu's operation.

Thank you.

tedd



XP_SP2 IE6/FF/Moz?Opera
Both are fine on my end with and without zoom @ 1280, Ted. Nice job.
(BTW,  slow catching up with back mail, sorry).
~dL

--
David Laakso
http://www.dlaakso.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Menu test

[tedd]

On 07/10/2005 13:27, tedd wrote:

Please test the following --

http://www.webbytedd.com/menu_v
http://www.webbytedd.com/menu_h


Work well in FF - perhaps you could change your #menu ul ul rule to 
something like:


#menuh ul ul
{
position:absolute;
z-index:500;
top:auto;
display:none;
padding:15px;
margin:-15px 0 0 -15px;
}

That way you get a little room for mouse slip ups around the edges 
of the menu. And it feels a bit more like a "real" menu because the 
margin makes it feel like theres a delay to the menu disappearing. 
Havnt tested this anywhere except FF.


Marcus


Marcus:

Good suggestion -- done -- except I changed it to ems.

Thanks for your review and suggestion.

tedd
--

http://sperling.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Menu test

[tedd]

From: "tedd" <[EMAIL PROTECTED]>


Please test the following --

http://www.webbytedd.com/menu_v

http://www.webbytedd.com/menu_h


The CSS seems in order. The menus themselves are difficult to use 
because they snap shut so fast and there is no timing mechanism to 
allow them to remain open or allow diagonal mouse movements with 
premature closing. Tab key support is not there - neither to light 
the menu items up nor to open the menus - (this could be good 
interms of accessibility, though) so an actual site would need to 
have the child level links accessible outside the menu to support 
keyboard surfing. This article describes some CSS and accessibility 
issues relevant to these types of menus, which might prove helpful:


http://www.projectseven.com/tutorials/accessibility/pop_integrated/index.htm

Good luck.

Al Sparber


Al:

Great reference -- I'll try to digest.

Many thanks for your review and comment.

tedd
--

http://sperling.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Menu test

[tedd]

Having some minor problem with Firefox 1.0.6 on GNU/Linux, concerning some
"empty pixels" that seem to appear random between some of the dropdown menu.
For example on the orizontal one I see them among Sub1.1-Sub1.2, Sub1.4-Sub1.5
and on some of the others SubX.X. Seems like there is a border of 1 maybe 2px
among these submenus.
Almost same problem with vertical one, where I see a "line" like that also
between Item3-Item4 and at least one on each dropdown in correspondace with
this one, so is Sub1.3-Sub1.4, Sub2.2-Sub2.3, Sub3.2-Sub3.3 and (?)
Sub4.3-Sub4.4.


curson:

Yeah, FF appears to handle borders a bit differently than other 
browsers. I don't know what that's all about.


However, one "fix" is to place a border around the entire 
menu-item-box and not just the top and right. It makes the 
menu-item-boxes slightly larger than what I want. But, the net is a 
lesson in compromise.


Many thanks for your review and comment.

tedd

--

http://sperling.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Menu test

[tedd]

 > Please test the following --


 http://www.webbytedd.com/menu_v

 http://www.webbytedd.com/menu_h

 -- and report each menu's operation.


IE6 XPsp2 - Appears to function perfectly, all menu elements were
aligned with pixel precision even with changing the font size. What
are you calling this? "Grandson of Suckerfish"?


Chris:

I'm not calling it anything just yet -- maybe "simple menu".

However, please understand that I'm not doing anything original -- 
I'm just trying to make what's been "accomplished by others" simpler.


When I have  "finished" simple product, I'll post it on my web site 
for others to review and possibly use.


As far as the "pixel precision" you noted, that's due to using ems. 
Once you get used to using ems for everything, things like that just 
work.


Many thanks for your review and comment.

tedd
--

http://sperling.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Menu test

[Marcus Williams]

On 07/10/2005 14:21, Marcus Williams wrote:

Work well in FF


(Deer Park beta 1)

--
Marcus Williams -- http://www.cad-schroer.co.uk
CAD Schroer UK, 39 Newnham Road, Cambridge, UK
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Menu test

[curson]

On (07/10/05 08:27), tedd wrote:
> Please test the following --
> 
> http://www.webbytedd.com/menu_v
> http://www.webbytedd.com/menu_h

As far as I could see, everything working 100% perfectly with Opera 8.5 on
GNU/Linux. Menu are lined up as desired, no margin/padding problem, and the
dropdown are working smooth.

Having some minor problem with Firefox 1.0.6 on GNU/Linux, concerning some
"empty pixels" that seem to appear random between some of the dropdown menu. 
For example on the orizontal one I see them among Sub1.1-Sub1.2, Sub1.4-Sub1.5
and on some of the others SubX.X. Seems like there is a border of 1 maybe 2px
among these submenus.
Almost same problem with vertical one, where I see a "line" like that also
between Item3-Item4 and at least one on each dropdown in correspondace with
this one, so is Sub1.3-Sub1.4, Sub2.2-Sub2.3, Sub3.2-Sub3.3 and (?)
Sub4.3-Sub4.4. 

That's all, the dropdown still works without problem, seem to be just a
graphic issue. Also, remember that as far as I know, these are not supposed to
work on IE (Win+Mac) without using a JScript. 

bye

-- 
curson
"Fear is the mind killer, fear is the little death that brings total
obliteration."
 
 
 --
 Email.it, the professional e-mail, gratis per te: http://www.email.it/f
 
 Sponsor:
 Erbe e tisane di primissima qualità.
* Inoltre 1800 articoli erboristici. Tutti a portata di un click !
* 
 Clicca qui: http://adv.email.it/cgi-bin/foclick.cgi?mid=1309&d=7-10
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Menu test

[Marcus Williams]

On 07/10/2005 13:27, tedd wrote:

Please test the following --

http://www.webbytedd.com/menu_v
http://www.webbytedd.com/menu_h


Work well in FF - perhaps you could change your #menu ul ul rule to 
something like:


#menuh ul ul
{
position:absolute;
z-index:500;
top:auto;
display:none;
padding:15px;
margin:-15px 0 0 -15px;
}

That way you get a little room for mouse slip ups around the edges of 
the menu. And it feels a bit more like a "real" menu because the margin 
makes it feel like theres a delay to the menu disappearing. Havnt tested 
this anywhere except FF.


Marcus

--
Marcus Williams -- http://www.cad-schroer.co.uk
CAD Schroer UK, 39 Newnham Road, Cambridge, UK
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Menu test

[Al Sparber]

From: "tedd" <[EMAIL PROTECTED]>


Please test the following --

http://www.webbytedd.com/menu_v

http://www.webbytedd.com/menu_h


The CSS seems in order. The menus themselves are difficult to use 
because they snap shut so fast and there is no timing mechanism to 
allow them to remain open or allow diagonal mouse movements with 
premature closing. Tab key support is not there - neither to light the 
menu items up nor to open the menus - (this could be good interms of 
accessibility, though) so an actual site would need to have the child 
level links accessible outside the menu to support keyboard surfing. 
This article describes some CSS and accessibility issues relevant to 
these types of menus, which might prove helpful:


http://www.projectseven.com/tutorials/accessibility/pop_integrated/index.htm

Good luck.

Al Sparber
PVII
http://www.projectseven.com

"Designing with CSS is sometimes like barreling down a crumbling 
mountain road at 90 miles per hour secure in the knowledge that 
repairs are scheduled for next Tuesday".



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Menu test

[tedd]

Hi:

Please test the following --

http://www.webbytedd.com/menu_v

http://www.webbytedd.com/menu_h

-- and report each menu's operation.

Thank you.

tedd
--

http://sperling.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/