Chrome Menu Space

[lwells]

1) Script Title: Chrome CSS Drop Down Menu (v2.0)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...rome/index.htm

3) Describe problem:

I'm having a very minor issue with the aforementioned script. Basically there appears to be a small space to the left of a menu item. The space isn't hyperlinked and thus doesn't change background like the rest of the item when hovered over. I've fiddled with the CSS but can't work out how to get rid of the space. The space exists on the example included in the chrome zip file (and the chrome menu on these forums).

Below is a zoomed in image of the space (the space itself is 4 pixels wide) whilst hovering over the "Galleries" menu item:



Is there some way to get rid of this space?

Thanks in advance (and for the great script!)

[lwells]

Any one able to shed some light on this issue?

[jscheuer1]

What browser are you using? I notice what you are talking about on the demo page but, it is more like a 1px imaginary (invisible) space. In IE 6 it only creates a momentary flash of the drop down if you get your mouse in just the right spot and only if you are traversing from the drop down up to the trigger. In Opera 9.01 and FF 1.5.0.7 it seems to make the drop down disappear if you get your mouse directly over it going in either direction. In all cases it requires precise control of the mouse, including the ability to hold it at just the right vertical coordinate for at least a short amount of time, to even notice it. I'm thinking that in your implementation you have done something that increases this space or that you are using a different browser.

It would help us to help you if you could provide a link to your page and the details on the browser(s) and OS used.

If you give a negative top margin here (red):

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
margin-top:-5px;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}

It will move the drop down up and make this even less likely to be a problem. If done right, there should be only a 1px overlap of the trigger by the drop down. This will not eliminate the effect I mentioned entirely. But, it will reduce it to the flickering effect in all browsers (like in IE for the default version). Don't use any greater of a negative value than is absolutely necessary. -1px worked fine for the demo version here.

[lwells]

jscheuer1: Thanks for your reply.

What browser are you using?

Firefox 2.0 (or to be precise, Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1b2) Gecko/20060901 BonEcho/2.0b2).

I've also tested it in IE6 and it has the exact same issue (i.e. a 4 pixel 'dead space' to the left of every top level menu item, just before the left-hand border).

I notice what you are talking about on the demo page but, it is more like a 1px imaginary (invisible) space.

When viewing the demo.htm page included in the Chrome Menu 2 zip file, the exact same 4 pixel dead spot exists. Its not as obvious because the demo.htm CSS file references a background image (and another for hovering) that doesn't exist, so no rollover occurs (i.e. the background remains white despite the state change).

Below is a screen shot from the demo.htm. I only changed the CSS to point to a real background image whilst hovering to make the space more visible (as white contrasted with white is not very visible ). Otherwise the code used was identical to that included in the chrome zip file. I have included a diagonal red line in the screen shot so you can see that the dead space is 4 pixels wide:

... drop down ...

I think we are talking at cross purposes. I am absolutely happy with the placement of the drop down menus relative to the top level. My issue is merely that there is a 4 pixel 'dead space' on the left of every top level menu item.

It would help us to help you if you could provide a link to your page and the details on the browser(s) and OS used.

As per above, I've tested with both FF 2.0 and IE6 (running on Win XP SP2 with all current updates). I've put up an example page at http://www.robmondkennels.com/index2.htm although given this issue exists in the demo.htm file, I'm not sure my code is going to give you any particularly insight.

Thanks for all your help!

[jscheuer1]

A demo is always useful as, it often saves considerable time in diagnosing. In fact, if my below solution is satisfactory, it took me all of 5 minutes, if that.

The space on the left was not what I was talking about. I didn't even notice it. On your kennel page, this seems to do the trick but, may cause other problems, try it out and see:

.chromestyle ul li a{
color: #000000;
padding: 0px 7px;
margin: 0;
text-decoration: none;
border-right: 2px solid #000000;
margin-left:-4px;
}

[blm126]

To quote mwinter from another thread.

I did, and it seems a little odd to me. That white area makes me think the menu is missing something, and the blue highlight doesn't span the entire menu item (except in "Home"). The latter issue is caused by whitespace nodes in the document tree, and could be removed by floating the menu items (though that necessitates some changes in other areas of the style sheet).

He was talking about the menu at the top of the forum(which is the same one, without the dropdowns)

[lwells]

On your kennel page, this seems to do the trick but, may cause other problems, try it out and see

Thanks again for your help. I tried the -4px margin trick. You're right in that it induces its own problems By reducing the margin, the leftmost menu item (i.e. "Home") now appears to be too close to its left border as per the image below. If you hover over "Home" the roll over effect completely obscures the left border as you can see in this image.

With a -4px left margin:

To quote mwinter from another thread

Actually I came to the same conclusion today whilst fiddling with the menu's CSS; i.e. that using "float: left" removes the spacing. Unfortunately, using "float: left" also means that the menu floats over (i.e. obscures) the left most border as defined in ".chromestyle ul". I haven't been able to come up with an elegant solution for that and I can't find the post by mwinter you have quoted (I was hoping s/he might expand on what other changes were necessary ).

With "float: left" (spacing fixed but missing left border of left most menu item):


As I said, I can't really think of an elegant solution so any further advice would be much appreciated.

Cheers!

[jscheuer1]

.chromestyle ul li a{
color: #000000;
padding: 0px 7px;
margin: 0;
text-decoration: none;
border-right: 2px solid #000000;
margin-left:-4px;
padding-left:11px;
}

[lwells]

jscheuer1: Adding the 11px padding solves the highlight issue. However it means the menu items don't appear to be centered and the rollover on the leftmost menu item obscures the border. I've put up an example page here:
http://www.robmondkennels.com/index-jscheuer1.htm

The good news is, taking your ideas and playing with them, I've come up with a fix. It seems so obvious now; I wish I was a better coder :

.chromestyle ul{
border-left: 2px solid #000000;
border-bottom: 0;
border-right: 0;
border-top: 0;
width: 100%;
background: url(menubg.gif) center center repeat-x;
margin: 0;
text-align: left; /*set value to "left", "center", or "right"*/
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 4px;
}

.chromestyle ul li a{
color: #000000;
padding: 0px 7px;
margin: 0;
text-decoration: none;
border-right: 2px solid #000000;
margin-left:-4px;
}

This code seems to display perfectly in both FF 2.0b and IE6. The spacing seems spot on and the rollover effect works without obscuring any borders. If you're interested, you can see it in action here:
http://www.robmondkennels.com/index2.htm

So as far as I can see, my issue is fixed. Thanks for all your help!