Message: 18 Date: Thu, 6 Aug 2009 12:02:03 -0400 From: Mike Smith <[email protected]> Subject: Re: [css-d] Interesting issue with IE6, borders, and negative margins To: [email protected] Message-ID: <[email protected]> Content-Type: text/plain; charset=ISO-8859-1
On Thu, Aug 6, 2009 at 11:00 AM, Mike Smith <[email protected]> wrote: > Hello all, > > I have some HTML being generated by our CMS that is creating a nested list > for a menu. > The issue at hand: > > The sub-navigation on this menu is supposed to have a divider between each > item. I used a border-bottom on each link to achieve this. However, the last > item shouldn't not have this border, so I added a margin-bottom: -1px; to > the containing <ul> and that covers it up in all browsers tested (FF 3.5 on > Mac/PC, Safari 4 on Mac, Opera 9.64 on Mac, IE7 on PC, IE8 on PC, Chrome 2 > on PC) but not in IE6. In IE6, the border is showing on top of the <li> > below the nested <ul>. > > View the page[1] in any browser but IE6 to see what we want. CSS is linked > in the header and there is a wee bit of IE6 sniffing going on up there, too. > > Anyone have a work around? And yes, if I could edit the HTML, I wouldn't be > asking for an assist on this issue; I'd add a class="last" to the last <li> > and be done with it. ;) I also considered getting rid of the dividing lines > altogether but the designer (my superior) doesn't cotton to that idea. :/ > > Thanks in advance! > > > [1] http://www.jhsph.edu/urbanhealth/about_us/demo.html > > > -Mike > Can't see an easy CSS solution. You might be able to alter the stacking context with z-index. I haven't tried this and I would question if it is really worth it for IE6, or even if it is possible. http://css-discuss.incutio.com/?page=OverlappingAndZIndex You could use JavaScript to add class="last" to the last li in the list, and then style it accordingly. That might be the easiest solution. If it wasn't IE6 you were targeting, you might find the first-child and last-child pseudo-elements handy. http://www.quirksmode.org/css/firstchild.html I'd be inclined to switch the border off in IE6 myself. -------------------------------------------------------------------------- AstraZeneca UK Limited is a company incorporated in England and Wales with registered number: 03674842 and a registered office at 15 Stanhope Gate, London W1K 1LN. Confidentiality Notice: This message is private and may contain confidential, proprietary and legally privileged information. If you have received this message in error, please notify us and remove it from your system and note that you must not copy, distribute or take any action in reliance on it. Any unauthorised use or disclosure of the contents of this message is not permitted and may be unlawful. Disclaimer: Email messages may be subject to delays, interception, non-delivery and unauthorised alterations. Therefore, information expressed in this message is not given or endorsed by AstraZeneca UK Limited unless otherwise notified by an authorised representative independent of this message. No contractual relationship is created by this message by any person unless specifically indicated by agreement in writing other than email. Monitoring: AstraZeneca UK Limited may monitor email traffic data and content for the purposes of the prevention and detection of crime, ensuring the security of our computer systems and checking Compliance with our Code of Conduct and Policies. ______________________________________________________________________ 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/
