Layout help needed: dropdown menu / Old Family Album / IE 6.0

[PBolchover]

I'm trying to get the dropdown menu to work with the Old Family Album theme.

I'm using the menu code linked from the FAQ page, placing the menu in the header. Since the Old Family Album theme has different widths of background depending on the context, I'm using CSS to vary the menu width and background, depending on the body class.

In the homepage, I have a duplicate copy of the dropdown menu html in the bio tag, and I set display=none for the menu in the header.

In Firefox, it looks nearly fine (I just need to work out how to stop the menu overlaying with a horizontal line).

However, in IE 6.0, I have the following problems:
1) On my homepage, part of the box background image is shifted slightly to the left.
2) On a keywords page, the menu goes slightly screwy - there appears to be an image overlaying it, and there's a slight gap between the initial button, and the drop-down list.

I'd appreciate some help from the CSS gurus. Pages that exhibit the problem include
http://pbolchover.smugmug.com/
http://pbolchover.smugmug.com/keyword/best


Thanks in advance,

Paul

[Andy]

Wait for Allen to see this, he's done the dropdown thing in OFA. :deal

[Allen]

...

However, in IE 6.0, I have the following problems:

2) On a keywords page, the menu goes slightly screwy - there appears to be an image overlaying it, and there's a slight gap between the initial button, and the drop-down list.
...



This will get rid of the gap.
/* another hack for IE5.5 */
* html .menu ul ul {
top:25px;
t\op:16px; /* IE gap between main bar and the dropdown items */
}

Replace red with green
<li><a class="drop" href="http://pbolchover.smugmug.com" title="My Photo Page">Home
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="http://pbolchover.smugmug.com" title="My Photo Page">Home</a></li>

Add green
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
<br>
</div>
</div>
<!-- End Navbar Code -->

See if this helps. The image running across might be fixed, but can't
tell until you try it.

I have not seen class ="menu headerMenu" before so have no idea
what it does. I would define the class as just menu and use CSS to
format on different pages. There's only one list contained in the div
and your CSS is formating .menu.
Hope this helps,
Al

[PBolchover]

I've applied your suggestions, but they don't help.

The gap was only present on keywords pages, and while it's corrected there, there's now a negative gap on gallery pages, and on my homepage (in IE6).

The "content box" is still shifted slightly to the left on my homepage.

As for the headerMenu class, the reason for it, is that there are two copies of the dropdown menu on my homepage: one in the header, and one in the bio box. I have class="menu headerMenu" on the div in the header, and class="menu BioMenu" on the div in the bio box, as a means to distinguish the two.

Most of the CSS refers to .menu, and therefore is applied to both menus. However, I had the additional code
.homepage .headerMenu
{
display: none;
}

.homepage .bioMenu
{
width: 700px !important;
}
which disables the header menu, and sets up the bio menu on the homepage.

[PBolchover]

I've worked out what the problem was in the keywords page in IE6. For reference, the dropdown bar uses tables in IE6, and the Old Family Album theme has CSS entries for tables on keyword pages, setting background images and the like.

I restored the "16px" back to "26px", and added the additional CSS, which appears to have fixed the problem on keyword pages.
.keywordPage .menu table {
margin-top: 0px !important;
padding: 0px 0px 0px 0px !important;
background-image: none !important;
_background-image: none !important;
}

.keywordPage .menu table td {
margin-top: 0px !important;
padding: 0px 0px 0px 0px !important;
_padding: 0px 0px 0px 0px !important;
}

The front page is still slight offset in IE, though...

[PBolchover]

And I've finally solved the homepage issue.

The problem was to do with the default padding when the toolbar was within the bio box. In IE, the width of the toolbar+padding was greater than the width of the bio box, causing everything (including the background) to become shifted. I added the following code, and everything became good
.bioMenu {
padding-left:0px !important;
}