close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 or 2018 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Inconsistent sub-menu background widths

Thread began 4/21/2009 8:39 pm by jeremyandrebecca67370 | Last modified 4/22/2009 2:26 pm by jeremyandrebecca67370 | 1526 views | 4 replies |

jeremyandrebecca67370

Inconsistent sub-menu background widths

OK, I have an issue with sub-menu background widths that are not consistent across browsers.

I set up a slimmed-down file to better illustrate the problem:

menutest.php

-----------------------------------------------

Issue #1:

For some reason, in Internet Explorer 7, the sub-menu background widths stop at the end of each text link. This is, of course, not the way it should appear.

However, in Firefox 3, the widths are all the same for each item in a particular sub-menu list, all based on the length of the text in the longest text link.

(It's even stranger in Firefox 2 for the Mac - some items appear correctly: about, news, music, & store) while others have the problem I describe here for IE (media & connect) But, that's another story!)

-----------------------------------------------

Issue #2:

Now, while the widths function correctly in Firefox, there also seems to be another issue that keeps things from being consistent.

Notice that I've had to put a 10px pad on the right side so that the CSS Menu Writer display, as well as Internet Explorer, will give a little room to the right of the text link. No such padding is necessary for the left side. It seems to do that correctly by default. (I'm not sure if it has anything to do with the inside/outside bullet specification or not.)

Anyway, the menu would look perfect in Firefox if it was not for the extra 10px pad I had to add. Because of it, I end up with twice the amount of padding I actually want in Firefox, even though it produces the pad I'd like to see for Internet Explorer.

-----------------------------------------------


Of the two issues, though, I really want to fix the background width of the sub-menus (issue #1). If the padding issue (#2) can't be resolved, I could live with that. But, maybe someone knows a way to fix both.


Thanks so much, in advance, for the help.

Jeremy

Sign in to reply to this post

Ray BorduinWebAssist

It is because you are using width:100% and IE simply treats that differently than other browsers.

The menu writer really has a requirement to use fixed width submenus by defining the exact width.

If you won't have another menu level under it, you may have some workarounds that could work for you.

One thing you can try is simply remove the width attribute entirely instead of using width:100%

if that doesn't work you might be able to change the LI tag to display:block

If neither works, I would suggest defining an exact width. This is the only solution that would allow another level of menus, since it needs to know the width of the first level to position the second level properly.

Sign in to reply to this post

jeremyandrebecca67370

Thanks again for the reply!

Well, setting the width to 100% was what I had resorted to because leaving it blank wasn't working either. And, unfortunately, using "display:block" didn't work either. (Internet Explorer is so weird!) Firefox seemed to do fine with just about anything I'd throw at it though.

So, I had to go with defining an exact width. Not exactly ideal since it applies to all sub-menus, and because I'm using variable generated sub-menu link text. (It just would have been nice to have the widths adjust automatically when changes are made to the links.) But, this will have to do for now. And, it is certainly better than having the varying widths.

Hopefully Internet Explorer will catch up in terms of brain-power, or standards compliance, or something. Such a pain to always have to accommodate it.

Thanks again for the assistance!

All the best,

Jeremy

Sign in to reply to this post

Ray BorduinWebAssist

You could always go in and hand edit the widths for each individual submenu, but this isn't possible through the interface mostly because of the increased difficulty in positioning the next level of menus.

Sign in to reply to this post

jeremyandrebecca67370

Good point!

And I guess I could even set it up in my site management area to specify a certain width value along with my new link text, just in case I want to deviate from my default setting.

Thanks for the idea!

Jeremy

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...