I'm creating a horizontal unordered list that in most cases will be long enough to wrap to more than one line. The <li> and <a> elements are set to display:block and float:left. I do not have a set width or height on either of these and prefer not to do so.
All works fine in Firefox; however, IE is expanding the height of the last element on the initial line (prior to wrapping) rather than floating the <li> down to the next line. What can I do to get IE to behave like Firefox? A screenshot can be seen here: http://www.radiantconsultinginc.com/images/screen-menu.gif. CSS currently in use: div#submenu { clear:both; margin-bottom:30px; } ul.submenu { list-style-type:none; margin:0; padding:0; float:left; width:575px; } ul.submenu li { margin:0; padding:0; list-style:none; float:left; position:relative; } ul.submenu li a { color:#B85122; text-decoration:none; display:block; height:18px; /* overflow:hidden; */ margin:0px 0px 3px 0px; padding:0px 5px; border-right:1px solid #B85122; } ul.submenu li.parent a { padding-right:15px; background: url(../images/arrow-down.gif) bottom right no-repeat; } ul.submenu li a:hover { background-color:#BACEDA; text-decoration:underline; } ul.submenu li#current { background-color:#E7EEF2; } ul.submenu li ul { padding:0; display:none; } ul.submenu li:hover { z-index:120; /* IE hack */ } ul.submenu li:hover ul { display:block; position:absolute; top:12px; left:0px; z-index:100; } ul.submenu li ul li { float:none; width:175px; background-color:#BACEDA; opacity:1; filter: alpha(opacity=100); } ul.submenu li.parent ul li a { border:none; background-image:none; } Thanks in advance, Denise ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
