Nav menu positioning for IE6

Discussion in 'Web Design' started by anna, Sep 8, 2010.

to remove all ads.
  1. anna

    anna New Member

    Messages:
    542
    Hello all,

    I cannot get my nav menu to line up correctly in IE6. Can anyone help me?

    (Please no IE6 browser push arguments...)

    Here is a link to the site in question.

    The menu should be above the nav. line like this:

    ss01.jpg

    Not like this:

    ss02.jpg

    Thank you for any solutions, attempts, alcohol, or humorous anecdotes. :eek:
     
  2. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Hey Anna your link is broken, gives me a 404
     
  3. bcee

    bcee New Member

    Messages:
    367
    X2. Would be glad to boot up 6 and help, get it online :)
     
  4. LouTheDesigner

    LouTheDesigner New Member

    Messages:
    506
    Ahh!! Another IE6 problem has led yet another designer toward alcohol... I wonder if Microsoft has found any correlations between developing for IE6 and alcohol use -- wouldn't surprise me! I'll drink this 64oz beer in your name.
    [​IMG]

    I love my "No, I will not fix your computer." shirt.

    But yes, the link is broken; I'll try to help but I'd have to look at the HTML/CSS with firebug.

    -Lou
     
  5. anna

    anna New Member

    Messages:
    542
    Thanks Lou!! Did you finish that monster?!?! :D

    Thanks to everyone else, too. Give me a bit more time, I am putting a (working) link up right now! :eek:
     
  6. anna

    anna New Member

    Messages:
    542
    Ok

    Here is a working link.

    I didn't include the logo but it shouldn't make a difference.

    Do you see what I mean about the menu? And Nathan, yes, there IS a float: left but I'm not sure if I should take it out (it's a project 7 menu).

    Thank you again everyone, for your patience and help!!
     
  7. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    I am guessing this is a pre-built menu from DW or some other place? I say that because the class names are horrendous.

    So here's my recommendations:

    1. Remove the div that is holding the UL (p7PMMh07), it is redundant and not needed. The list is a block level element and can be styled the same way. If you need the id, add it to the list.
    2. Remove the empty div under the UL (p7pmmclearfloat). Bad practice. Just add a clear to the UL...if you even need it.
    3. Now the main issue at hand....if you are trying to get the grey line under the menu, why not add it to the UL as a background image?

    I think a bg image is the best way to go here.
    If you want the bg image to be below the list items (like in your pic) you will need to either
    1. define a height for the list this is taller than the list items
    2. increase the height of the list items

    Good luck! Let us know if you get stuck.
     
    Last edited: Sep 9, 2010
  8. anna

    anna New Member

    Messages:
    542
    Thanks, Pixel... Yes, it is a pre-built menu from Project Seven (not that my class names would be any better) :D

    I will implement these suggestions and let you know how it works!!

    Thanks again!
     
  9. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Anytime Anna, your welcome!
     
  10. LandisCreations

    LandisCreations New Member

    Messages:
    18
    Code:
    HEADER IMG - <img src="images/jpg/header_organic_gray.jpg" width="980" height="85" class="Image100pct" />
    LOGO IMG    - <img src="../../../assets/jpgs_for_web/dark_logo_smaller_gray.jpg" width="250" height="103" class="logoPosition" />name="NavigationMenu" -->
    MENU DIV    - <div id="p7PMM_1" class="p7PMMh07">
      <ul class="p7PMM">
      ... bunch of <li>s and a </ul>
    
    I'm fairly convinced that this is a width issue. Since you've got the logo img there and a div just below it with width:auto; and left: 400; if for any reason (and IE6 will find many) the width of the menu div + 250 (logo) + 400 (left margin) is > 980 IE would just move the div to the next line.

    On the other hand, since IE6 is fairly picky, it could just be seeing a div next to an image and moving the div to the next line, just because it's IE6 and it can. Not convinced this is the issue, but I wouldn't be surprised either.

    A couple of options:
    1) wrap the logo in a div floated left and also float the menu div left, hopefully keeping it on the same line.
    2) define a width for the menu div rather than using auto (which in a perfect world should work I think but... IE6)

    In general I'm not really a fan of using the left: 400; to position things, but that could just be a personal preference.

    Best of luck. We all feel your IE6 pain!

    ~ Nathan
     
  11. LouTheDesigner

    LouTheDesigner New Member

    Messages:
    506
    You're like the Batman of web design. Anytime I see a real issue, like this one, I patiently wait for PP to come to the rescue.

    -Lou
     
  12. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Lol, thanks Lou! What can I say, I like the challenge of solving other peoples problems.
     
  13. anna

    anna New Member

    Messages:
    542
    Pixel: I can't get your suggestions to work; they compromise the integrity of the menu. I will post some screen shots later so you can see what I'm talking about. It's VERY possible (in fact, it's probable) that I did not implement them correctly so let me get back with you.

    Nathan: When I implement your suggestions, I begin to get on the right track, however, I have a question. When you mentioned that you are not a fan of using left: 400; to position things, what did you mean? What do you use?

    Thanks everyone. I appreciate your help!
     
  14. LandisCreations

    LandisCreations New Member

    Messages:
    18
    Hi Anna,

    I put together a quick sample of what I mean. The working demo link is down, so I just used a couple of quick images from your original post, but you should be able to replace the menu image w/ your menu code and have it work the same way.

    Example is at http://www.landiscreations.com/wdf/anna.php ... it's super basic and just thrown together in literally the last 3 minutes, but it shows how using floats will align how you're looking for.

    Code:
    Code:
    <body>
    	<div style="width: 800px;">    [B]<- "site" container div[/B]
                <div id="logo" style="float: left;"> [B]<- logo div, floated left[/B]
            	<img src="images/leco_logo.jpg"/>
                </div>
                <div id="menu_container" style="float: left;">  [B]<- menu div, floated left so that it appears next to the logo div. could add left padding here if you'd like to position within this div[/B]
            	<div id="menu" style="padding-top: 40px;">    [B]<- actual div for for the menu, not floated because it doesn't need to be w/in menu_container[/B]
    	        	<img src="images/menu.jpg" />
                    </div>
                    <img src="images/menuborder.jpg" /> [B]<-border image, could be w/in a div, doesn't necessarily need to be[/B]
                </div>        
                <div style="clear: both;"> [B]<- rest of your content goes below[/B]
                   Rest of the page
                </div>
        </div>
    </body>
    
    That's how I'd break this up personally if I were to build it quickly (which I did). Feel free to critique. :)

    ~ Nathan
     
  15. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    After glancing at this layout, yes it will work but it still suffers from an overuse of tags. There is no need to wrap the menu in a "menu-container". An unordered list is a block level element. It can be styled in the same manner.

    Plus there is no need to add an image tag for the line image under the menu. This should be added through CSS.
    As a rule of thumb, image tags should be used for images that are content (i.e. picture of the white house, bat mobile :)) Styling-based images, like borders, should be done through CSS.



     
  16. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077

    I will write something up for you later this evening. I'm in Brooklyn right now and I wanna check the place out :p
     
  17. anna

    anna New Member

    Messages:
    542
    Brooklyn?!?! What the hell are you doing online?!?! Get out! Enjoy! See some babes!! :D
     

Share This Page