Previous Message
Next Message

Repost-Drop Down Troubles

Sent by Holly Bergevin on 15 December 2004 16:04


From: Tom Livingston [EMAIL-REMOVED]>

>http://66.155.251.18/mlinc/menutest/test/

>Under the "Consumer Credit" menu (first red button) a dropdown will 
>appear. The first dropdown menu item, and the css for the first dropdown 
>has been modified for demo purposes. If you view this in something other 
>than Win IE, like NS7 or Opera, you will see the desired effect of the 
>first dropdown. Viewed in Win IE, you see what I am trying to fix.
>
>Any thoughts? TIA

Hi Tom,

It appears that you can have a narrowed dropdown without fully-clickable (the whole width of the
dropdown) links in IE/Win, or you can have the full-width links but they'll be clickable the whole
way across the page. I didn't figure out a way to get both.

But... Since the button that accesses the dropdowns is only a set number of pixels wide, I find it
unlikely that someone would try to move a mouse down a list outside of that width, (as in follow
along the small text to the end of a long line and then move the mouse down to another link), at
least initially, so the fully-clickable link may not be a big deal. 

Alternately, just let them wrap for IE/win by keeping the set widths for that browser and chalk it
up to browser differences.

So...  

Remove the {width: 100%;} from both - .menu ul li a - and - .menu ul li a:hover - or just give all
browsers the {width: auto;} you have hidden (by using the child combinator) from IE. 

Unfortunately, IE will now space your dropdown lists out, so.... you can change the display property
for the two selectors listed above to be {display: inline-block;} for IE/win (valid in CSS 2.1), or,
depending on what your actual page looks like (backgrounds and such), you can give the LI elements a
bottom border, which will also snug up the white space.

..menu ul li{border-bottom: 1px solid #fff;} /* works for your example page, anyway */

I'm not sure that this is really much help, sorry.

~holly
 
 
                   
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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/
Previous Message
Next Message

Message thread:

Possibly related: