Nav menu positioning for IE6

anna

New Member
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:
 

LouTheDesigner

New Member
Thank you for any solutions, attempts, alcohol, or humorous anecdotes. :eek:

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.
alcohol.jpg


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
 

anna

New Member
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:
 

anna

New Member
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!!
 

PixelPusher

Super Moderator
Staff member
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:

anna

New Member
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!
 

LandisCreations

New Member
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
 

anna

New Member
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!
 

LandisCreations

New Member
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
 

PixelPusher

Super Moderator
Staff member
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.



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
 
Top