473,232 Members | 1,472 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,232 software developers and data experts.

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

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

Oct 15 '07 #1
7 2203
In article
<11**********************@k35g2000prh.googlegroups .com>,
Terry <wd*@rogers.comwrote:
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
Oct 15 '07 #2
On Oct 14, 10:50 pm, dorayme <doraymeRidT...@optusnet.com.auwrote:
In article
<1192415553.988710.123...@k35g2000prh.googlegroups .com>,

Terry <w...@rogers.comwrote:
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

Oct 15 '07 #3
On 2007-10-15, Terry <wd*@rogers.comwrote:

[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.
Oct 15 '07 #4
On Oct 15, 3:30 am, Ben C <spams...@spam.eggswrote:
On 2007-10-15, Terry <w...@rogers.comwrote:

[rehttp://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. 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

Oct 15 '07 #5
On 2007-10-15, Terry <wd*@rogers.comwrote:
On Oct 15, 3:30 am, Ben C <spams...@spam.eggswrote:
>On 2007-10-15, Terry <w...@rogers.comwrote:

[rehttp://theamazing.onlinewebshop.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.
Oct 15 '07 #6
On Oct 15, 8:37 am, Ben C <spams...@spam.eggswrote:
On 2007-10-15, Terry <w...@rogers.comwrote:
On Oct 15, 3:30 am, Ben C <spams...@spam.eggswrote:
On 2007-10-15, Terry <w...@rogers.comwrote:
[rehttp://theamazing.onlinewebshop.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

Oct 15 '07 #7
On 2007-10-15, Terry <wd*@rogers.comwrote:
[...]
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.
Oct 15 '07 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

11
by: Not4u | last post by:
Hello, I have a problem with CSS code. I want to have one menu column with a fixed width and a 100% height and the rest of the page for content. ---------------- |.|.|<--100%-->|...
7
by: R0bert Nev1lle | last post by:
Internet Explorer always presents me with a challenge (partial repost). The current issue involves emulating max-width in IE using the technique described by Svend Tofte. ...
6
by: Hacking Bear | last post by:
Hi, I still don't quite fully understand how to handle mixing border/margin pixel width with percentage width. In the example below, I want to place side-by-side two DIV boxes inside a box....
1
by: houghm | last post by:
Hello, I'm having a problem and I wonder if anyone can help? I have a div on which I have specified {overflow-y:auto; overflow-x:hidden;}. This div contains a table with a varying number of...
3
by: John Kotuby | last post by:
Hi all, Just wondering why this would happen. I had created a standalone ASPX page in which 5 controls are wrapped in an UpdatePanel. The idea is Control1 selection populates Control2 then...
0
by: ra220511 | last post by:
hello ive only started using ajax for first time today . i am trying to use an update panel in asp.net but my whole page keeps refresh rather than just the content area. can any one help. ...
0
by: Aneesh Pulukkul [http://dotnet-revolutions.blogspo | last post by:
I have a requirement- need to display RTF content in context menu. I am able to host a rich textbox in a contextmenu strip using ToolStripControlHost class. But assigning some RTF content to the...
1
by: pixelfreaks | last post by:
Hello, I am having a problem in aligning the sidebar and content area in a webpage. I am using css. Consider the below layout. __________________________________________ | ...
1
by: toltmanns | last post by:
I've got a site at Arte Pizzeria, Loveland Colorado - Home that is having a rendering issue in ie6, the whole main content area is disappearing. Looks pretty good in ie7 and firefox, but ie6 is where...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.