[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/
