After a very quick look, change #bodynav li a to display: inline; instead of block fixes it for me. (IE6 XPsp2) David
-----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Ted Drake Sent: Thursday, 16 September 2004 9:41 AM To: [EMAIL PROTECTED] Subject: [WSG] my dl lists are playing nicely with IE Hi Everyone I was just about to send you a question concerning some dl's and I fixed them myself. Yep, the whole process of writing the e-mail made me realize I had an extra position:relative sneaking around. So, here's another problem area. And this one should be a piece of cake, but it's driving me nuts. I'm using the basic horizontal list buttons to create a tertiary navigation. They are based on Zeldman's dwws boxes but are simple enough to understand. In firefox, they are perfect, in IE, they are taking up the width of the container and becoming big ol' vertical boxes instead of tidy horizontal ones. Here's an example: http://v4.csatravelprotection.com/csa/webdirect.do Here's the code: <ul id='bodynav'> <li id=''><a href="/csa/webdirect.do" class="here" id="" title="Guarantee Your Vacation with our WebDirect comprehensive travel insurance product">Features</a></li> <li id=''><a href="/csa/coveragesall.do" class="" id="" title="Read a table of travel insurance coverages and benefits">Coverages/Benefits</a></li> <li id=''><a href="/csa/certpolicy.do" class="" id="" title="Download and read your Travel Insurance Policy or Certificate">Certificate/Policy</a></li> <li id=''><a href="/csa/defineterm.do" class="" id="" title="Read the definition of terms and outline of coverages">Definitions</a></li> <li id=''><a href="/csa/afaqproduct.do" class="" id="" title="Frequently Asked Travel Insurance Questions">FAQ</a></li> </ul> The list is being generated dynamically and the extra id's were there for flexibility. We can remove them from the template if that is a problem. Here are the appropriate CSS styles /* General List Styles */ #content { position:relative;top:0px;clear:both;} #maincontent { float: right;width: 490px;margin: 0; padding: 0 20px 0 0; clear: right;} li {list-style:circle;} ul#bodynav{border: 0;margin: 3px 0 0;padding: 0;list-style-type: none;/**/float: right;border-right: 1px solid #666;} #bodynav li{display: block;float: left;text-align: center; width: auto; padding: 0;margin: 0;} #bodynav li a{background: #e4edf1; height: 18px; width: auto;padding: 0 5px; margin: 0;color: #666;text-decoration: none;display: block;text-align: center; font-size:70%;font-weight:bold;border-top: 1px solid #666;border-left: 1px solid #666; border-bottom: 1px solid #666;border-right: none;} #bodynav li a:hover{background: #9CBCC9; color:#fff;} #bodynav a:active{background: #9CBCC9;color: #fff;} #bodynav li a.here {background: #74A2B4;border: 1px solid #666;color: #fff;} I don't see anything that is making the list boxes take up all of the horizontal space and then stack vertically on ie and not on firefox. Does anyone have an idea? Once again, I realize the site is not valid xhtml yet, I'm working on fixing those outstanding issues as well. Thanks Ted [EMAIL PROTECTED] ****************************************************** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ****************************************************** ****************************************************** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
