4 Replies Latest reply on Jun 16, 2010 6:18 PM by R-Co

    Unordered list positioning in ie6


      I've searched the forums for an answer to this but didn't find one, although I'm sure it's a common problem. I have an unordered list I've styled to be a menu of thumbnail images. It's in the #mainContent div. To the right of it is another menu in a separate div, floated to the right. Everything looks just fine in every browser except IE6, where the thumbnails menu is pushed down to the bottom of the page, leaving empty white space in its place. I've tried adding relative positioning to the <ul>, I've tried wrapping the <ul> in its own div, I've tried changing the margin on the div to the right, but nothing seems to work. Does anybody have an idea?


      Here's the page: http://www.colbydesign.com/redesign/portfolio.html


      In IE6, the group of 5 horizontal images is pushed straight down to just below the caption.




        • 1. Re: Unordered list positioning in ie6
          Ben M Adobe Community Professional

          To be honest the best advice I can give you is to forget about IE6 entirely.  Even Microsoft is strongly encouraging all users upgrade to IE 7/8, and heck they are close to releasing 9.


          However, if a good percentage of your users are using IE 6 I would recommend just loading up a 2nd style sheet so that users of modern browsers do not lose the experience you are trying to create for them.  This link will give you an example of what IE 6 specific code looks like : http://www.quirksmode.org/css/condcom.html .

          • 2. Re: Unordered list positioning in ie6
            R-Co Level 1

            Thanks for the response and for the link to that article. That's what I assumed I'd need, a conditional comment for IE6. I'm with you -- I'd just as soon not have to worry about IE6, but I'm trying to do my due diligence. I did a search for recent usage stats and it looks like anywhere from %17-20 of users are still using IE6 as of this writing.


            So, assuming I can employ a conditional comment to fix the problem for IE6, what would that be? I've tried tweaks to the CSS to change positioning, width, margin, etc. The other pages in my portfolio section have an image in the space that my <ul> is on this page, and I had the same problem until I added align=left to the img tag. Is there a similar -- and possibly just as easy -- solution for the styled list?




            • 3. Re: Unordered list positioning in ie6
              Nancy OShea Adobe Community Professional & MVP

              Float Drop -

              If a container (including the body) is not wide enough to display  both a float and the static content that follows it side by side, the  static content will drop below the float instead of wrapping around it.




              Wrap content in a fixed-width container large enough to accommodate  the content, or remove the width from the static block.


              Expanding Box Bug -




              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists

              • 4. Re: Unordered list positioning in ie6
                R-Co Level 1

                Thanks, Nancy. I  found the answer in a different tutorial on the same site, this one having to do with a double float margin bug in IE. The solution is simply to add "display:inline" to the floated box. I did that and it now looks fine in IE6 and other browsers. Here's the article: http://www.positioniseverything.net/explorer/doubled-margin.html


                Thanks again for pointing me to it.