[css-d] Interesting issue with IE6, borders, and negative margins
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 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 below the nested . 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 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 __ css-discuss [cs...@lists.css-discuss.org] 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/
Re: [css-d] Interesting issue with IE6, borders, and negative margins
On Thu, Aug 6, 2009 at 11:00 AM, Mike Smith 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 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 > below the nested . > > 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 > 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 > Did this make it to the list initially? __ css-discuss [cs...@lists.css-discuss.org] 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/
Re: [css-d] Interesting issue with IE6, borders, and negative margins
On 7/08/2009, at 3:00 AM, Mike Smith 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 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 > > below the nested . > > 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 > 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 Give the containing list item 'layout' (http://www.satzansatz.de/cssd/onhavinglayout.html ). One way is with the proprietary 'zoom'. Put it in a separate stylesheet with conditional comments. .activenavpath { zoom: 1; } __ css-discuss [cs...@lists.css-discuss.org] 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/
Re: [css-d] Interesting issue with IE6, borders, and negative margins
On Fri, Aug 7, 2009 at 4:29 AM, Tim Snadden wrote: > > > Give the containing list item 'layout' ( > http://www.satzansatz.de/cssd/onhavinglayout.html > ). One way is with the proprietary 'zoom'. Put it in a separate > stylesheet with conditional comments. > > .activenavpath { zoom: 1; } > Thanks, Tim! I <3 list!! __ css-discuss [cs...@lists.css-discuss.org] 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/