Menu is not overlapping content area and width of menu is not accomodating width of its content

[Terry]

Hi again folks.

I have a couple of issues now.

I am not sure why I can't get my menu to overlap the content area. I
tried using z-index. The effect I want occurs in Firefox but not IE.

The other issue that I am having is that my drop down menu's width
does not accomodate for the width of the content within the menu. (I
am getting two lines for a menu entry when I just want one)

The url to the page is http://theamazing.onlinewebshop.net/cakes/

Thanks in advance,
Terry

[dorayme]

Re: Menu is not overlapping content area and width of menu is not accomodating width of its content

In article
<1192415553.988 710.123420@k35g 2000prh.googleg roups.com>,
Terry <wdd@rogers.com wrote:

Thanks for getting back to me John.
>
I did not mean to bother you.
>
I did try to validate my css and noticed the errors but did not know
how to handle so I decided that I would try to do so later.
>
The menu that I am trying to use is one that I adapted from one that
appeared in a book (DHTML Utopia). It stated that the menu would
degrade gracefully in the case that javascript was disabled.

What is it that attracts you to such a thing for your site? Why
do people particularly need to see the dropdown details. They
work badly even with 'javascript on' on my machine, slow and
clunky and somehow only intermittently? )

If users are interested in looking further, they will. You can
interest them in what you do outside of menu items on the page
itself. By using describing the various things they can go to,
you can provide links in context.

Why all the convoluted mark up and css for such a basically
regular and straightforward site? Have you not enough to do
making cakes? Forget about relative positioning and z-indexing
and sliding this or that, leave behind all that stuff about text
popping up and obscuring other boxes with text, with menus
growing em style and bursting all over the whole design (have you
seen what happens when you alt shift + or alt + or whatever you
do in Windows to enlarge text in FF (on a Mac it is command +)?

I think you better contact Farmer Joe here in Australia. He
thinks website making is like baking cakes and he would not be
pleased if you were to try to bake a simple cake in some overly
complicated way.

--
dorayme

[Terry]

Re: Menu is not overlapping content area and width of menu is not accomodating width of its content

On Oct 14, 10:50 pm, dorayme <doraymeRidT... @optusnet.com.a uwrote:

In article
<1192415553.988 710.123...@k35g 2000prh.googleg roups.com>,
>
Terry <w...@rogers.co mwrote:

Thanks for getting back to me John.

>

I did not mean to bother you.

>

I did try to validate my css and noticed the errors but did not know
how to handle so I decided that I would try to do so later.

>

The menu that I am trying to use is one that I adapted from one that
appeared in a book (DHTML Utopia). It stated that the menu would
degrade gracefully in the case that javascript was disabled.

>
What is it that attracts you to such a thing for your site? Why
do people particularly need to see the dropdown details. They
work badly even with 'javascript on' on my machine, slow and
clunky and somehow only intermittently? )

The client that I am creating the site for saw a menu on another site
and wanted it on hers so I was trying to oblige.

If users are interested in looking further, they will. You can
interest them in what you do outside of menu items on the page
itself. By using describing the various things they can go to,
you can provide links in context.
>
Why all the convoluted mark up and css for such a basically
regular and straightforward site? Have you not enough to do
making cakes? Forget about relative positioning and z-indexing
and sliding this or that, leave behind all that stuff about text
popping up and obscuring other boxes with text, with menus
growing em style and bursting all over the whole design (have you
seen what happens when you alt shift + or alt + or whatever you
do in Windows to enlarge text in FF (on a Mac it is command +)?
>

No I have not seen what would happen if the text was enlarged.
Perhaps I should look into that.

I think you better contact Farmer Joe here in Australia. He
thinks website making is like baking cakes and he would not be
pleased if you were to try to bake a simple cake in some overly
complicated way.

Like I posted earlier I will try to clean up my css.

Thanks,
Terry

[Ben C]

Re: Menu is not overlapping content area and width of menu is not accomodating width of its content

On 2007-10-15, Terry <wdd@rogers.com wrote:

[re http://theamazing.onlinewebshop.net/cakes/]

The other issue that I am having is that my drop down menu's width
does not accomodate for the width of the content within the menu. (I
am getting two lines for a menu entry when I just want one)

You're relying on a very tricky (and rather absurd) part of the
specification there: inline containing blocks.

I've not found any browser that gets those quite right. See
http://www.tidraso.co.uk/misc/inline-cb.html.

The question in this case is how wide are those inline containing
blocks, since they determine the available width for the popups. They
should be only the width of their contents, so if "Wedding Cakes I" is
wider than "Wedding Cakes", which it is, the box gets its available
width and the line is broken between "Cakes" and "I".

You could add white-space: nowrap to the styles for the <ul>, but that
probably won't work in IE. Or I suppose use &nbsp; instead of " " for
the spaces in the menu text.

You might be better to make the menu headings float: left rather than
display: inline. It won't be so easy to get them centered if you do but
you might have fewer problems with stacking and positioning.

I'm not sure you need that z-index in theory even in Firefox (although
it gets it wrong if you don't), although I may not have looked closely
enough at what's going on.

[Terry]

Re: Menu is not overlapping content area and width of menu is not accomodating width of its content

On Oct 15, 3:30 am, Ben C <spams...@spam. eggswrote:

On 2007-10-15, Terry <w...@rogers.co mwrote:
>
[rehttp://theamazing.onli newebshop.net/cakes/]
>

The other issue that I am having is that my drop down menu's width
does not accomodate for the width of the content within the menu. (I
am getting two lines for a menu entry when I just want one)

>
You're relying on a very tricky (and rather absurd) part of the
specification there: inline containing blocks.
>
I've not found any browser that gets those quite right. Seehttp://www.tidraso.co. uk/misc/inline-cb.html.
>
The question in this case is how wide are those inline containing
blocks, since they determine the available width for the popups. They
should be only the width of their contents, so if "Wedding Cakes I" is
wider than "Wedding Cakes", which it is, the box gets its available
width and the line is broken between "Cakes" and "I".
>
You could add white-space: nowrap to the styles for the <ul>, but that
probably won't work in IE. Or I suppose use &nbsp; instead of " " for
the spaces in the menu text.
>
You might be better to make the menu headings float: left rather than
display: inline. It won't be so easy to get them centered if you do but
you might have fewer problems with stacking and positioning.
>
I'm not sure you need that z-index in theory even in Firefox (although
it gets it wrong if you don't), although I may not have looked closely
enough at what's going on.

Thanks for the suggestions Ben. I am going to look into things
further.
I did do what the previous poster, dorayme, suggested, and looked at
the menus from
suckerfish. I came across one that looks simple enough.

It is http://www.htmldog.com/articles/suckerfish/bones/

It seems to work properly with Firefox and IE. But not IE7. In IE7
the menu is starting at the right of the calling menu item as opposed
to underneath it as it does in the other browsers.

Do you know off hand would have to be done to get it to work with IE?
I was thinking of perhaps a hack that detects for IE7 and then uses
the same style stuff that is being used for non IE browsers.

Thanks,
Terry

[Ben C]

Re: Menu is not overlapping content area and width of menu is not accomodating width of its content

On 2007-10-15, Terry <wdd@rogers.com wrote:

On Oct 15, 3:30 am, Ben C <spams...@spam. eggswrote:

>On 2007-10-15, Terry <w...@rogers.co mwrote:
>>
>[rehttp://theamazing.onli newebshop.net/cakes/]

[...]

>You might be better to make the menu headings float: left rather than
>display: inline. It won't be so easy to get them centered if you do but
>you might have fewer problems with stacking and positioning.

[...]

I did do what the previous poster, dorayme, suggested, and looked at
the menus from suckerfish.

Good idea.

I came across one that looks simple enough.
>
It is http://www.htmldog.com/articles/suckerfish/bones/

That is using floats instead of inlines for the containers.

It seems to work properly with Firefox and IE. But not IE7. In IE7
the menu is starting at the right of the calling menu item as opposed
to underneath it as it does in the other browsers.
>
Do you know off hand would have to be done to get it to work with IE?

I can only guess as I don't have IE, but I notice that the popup <ul>s
are position: absolute; left: auto; top: auto.

Making left and top auto for absolutely positioned elements is asking
for trouble. It leads you to a part of the spec that says the browser is
"free to make a guess" at the box's position (CSS 2.1 10.3.7).

Not that IE usually waits to be asked before making a guess at a box's
position.

You could try changing those to left: 0; top; 1em. So long as your menu
items are all on one line, it should be OK.

Otherwise you can put a little wrapper in so you have something like
this:

<li>
Sunfishes
<div style="position : relative">
<ul style="position : absolute; top: 0; left: 0;">
...
</div>

The <divthere locates the popup <ulunderneath the text at the start
of the <li>. It's a more explicit way of doing what top: auto is
supposed to do anyway.

left: auto in this example is just silly-- it should compute to left:0
anyway.

I was thinking of perhaps a hack that detects for IE7 and then uses
the same style stuff that is being used for non IE browsers.

Hopefully that won't be necessary and you can find something that works
in both.

[Terry]

Re: Menu is not overlapping content area and width of menu is not accomodating width of its content

On Oct 15, 8:37 am, Ben C <spams...@spam. eggswrote:

On 2007-10-15, Terry <w...@rogers.co mwrote:
>

On Oct 15, 3:30 am, Ben C <spams...@spam. eggswrote:

On 2007-10-15, Terry <w...@rogers.co mwrote:

>

[rehttp://theamazing.onli newebshop.net/cakes/]

[...]

You might be better to make the menu headings float: left rather than
display: inline. It won't be so easy to get them centered if you do but
you might have fewer problems with stacking and positioning.

[...]

I did do what the previous poster, dorayme, suggested, and looked at
the menus from suckerfish.

>
Good idea.
>

I came across one that looks simple enough.

>

It ishttp://www.htmldog.com/articles/suckerfish/bones/

>
That is using floats instead of inlines for the containers.
>

It seems to work properly with Firefox and IE. But not IE7. In IE7
the menu is starting at the right of the calling menu item as opposed
to underneath it as it does in the other browsers.

>

Do you know off hand would have to be done to get it to work with IE?

>
I can only guess as I don't have IE, but I notice that the popup <ul>s
are position: absolute; left: auto; top: auto.
>
Making left and top auto for absolutely positioned elements is asking
for trouble. It leads you to a part of the spec that says the browser is
"free to make a guess" at the box's position (CSS 2.1 10.3.7).
>
Not that IE usually waits to be asked before making a guess at a box's
position.
>
You could try changing those to left: 0; top; 1em. So long as your menu
items are all on one line, it should be OK.
>
Otherwise you can put a little wrapper in so you have something like
this:
>
<li>
Sunfishes
<div style="position : relative">
<ul style="position : absolute; top: 0; left: 0;">
...
</div>
>
The <divthere locates the popup <ulunderneath the text at the start
of the <li>. It's a more explicit way of doing what top: auto is
supposed to do anyway.
>
left: auto in this example is just silly-- it should compute to left:0
anyway.
>

I was thinking of perhaps a hack that detects for IE7 and then uses
the same style stuff that is being used for non IE browsers.

>
Hopefully that won't be necessary and you can find something that works
in both.

Thanks for the suggestions. I will look into things further.

By the way are you aware of any free newsgroup clients I am getting a
little tired of using google groups.

Terry

[Ben C]

Re: Menu is not overlapping content area and width of menu is not accomodating width of its content

On 2007-10-15, Terry <wdd@rogers.com wrote:
[...]

By the way are you aware of any free newsgroup clients I am getting a
little tired of using google groups.

Do you mean for Windows? I think you can use Thunderbird-- it does news
as well as email.