CSS Hacks for positioning in IE

[lilyinblue]

I have a menu that I am trying to implement on a client's website. Using CSS hacks for IE is somewhat new to me, and I'm having a hard time getting them to work.

In IE7, everything is working beautifully except for the fact that the whole thing is two pixels off in position. Here's my attempted fix:


.arrowlistmenu{
width: 194px; /*width of accordion menu*/
position: relative;
top: -4px;
}

body > .arrowlistmenu{
left: -2px;
top: -6px;
}

However, it doesn't seem to be doing anything. The menu is still sitting in the same spot. Does anyone know if I've set something up wrong?

Also, after I solve this, I am going to have to throw in a lot of CSS hacks to strip out much of the padding for IE6. Does anyone have a suggestion for the best way to do this?

Thanks

[TheJoshMan]

I'd recommend using margin to adjust rather than position.

something like:



<!--[if IE]>
<style type="text/css">
.arrowlistmenu{
width: 194px; /*width of accordion menu*/
position: relative;
margin:-4px 0 0 0;
}

body > .arrowlistmenu{
margin: -6px 0 0 -2px;
}
</style>
<![endif]-->

[lilyinblue]

Thanks for the suggestion. Unfortunately, margin vs. positioning doesn't really seem to be the root of the problem. I switched back to using conditionals instead of the nesting hack, but it really isn't making any difference:


<!--[if IE]>
.arrowlistmenu{
position: relative;
top: -6px;
left: -2px;
}
<![endif]-->

Even with that in the stylesheet, IE7 just doesn't seem to be picking it up. The menu is still displaying out of position. However, I made a copy of the HTML file and attached a different stylesheet with that positioning in it (rather than the original) and the menu positioning itself where it was supposed to be:


.arrowlistmenu{
width: 194px;
position: relative;
top: -6px;
left: -2px;
}

... which leads me to think I'm somehow doing something wrong with my conditionals and/or hacks. Any thoughts?

And once I figure this out, I'm going to have to do it all again for IE6. So, which method do you all recommend for making a bunch of IE6 fixes too?

[TheJoshMan]

this would really be easier and quicker to solve if we could see a link to the test page you're working with.

[lilyinblue]

You're right. I should have posted links earlier. Sorry about. (And thank you for the help!)

Here is one version with some conditionals to get the menu in the right spot:
http://www.bluetears.com/tbg_test/aer/AER036_public_template_2column_V02.html

The .css file in question is http://www.bluetears.com/tbg_test/aer/css/ac_menu.css

Here is a second version made just for IE with no conditionals and no hacks:

http://www.bluetears.com/tbg_test/aer/AER036_public_template_2column_V02_IE7.html

And the .css file for that is http://www.bluetears.com/tbg_test/aer/css/ac_menu_ie7.css

Obviously I can adjust things to get the menu in the right place (as seen on the second file)... but I need to have this done with only one HTML page, not two. Ideally, I'll put all of my IE-specific adjustments in their own .css file... but I'm having trouble getting that set up right.

[TheJoshMan]

ok, the only diff i'm noticing between the two links in IE7 is the heading of the sidebar nav... Is this the problem you're having? I thought you were talking about the main navigation (horizontal)

[lilyinblue]

Right. The problem is the sidebar nav. The top nav seems relatively happy.

... and actually, I managed to figure that out at some point this evening. Thank you for your help though.

Unfortunately, the sidebar nav is still causing me some serious headaches. Maybe you can shed some light on this instead.

Here is the most current versions of the problem files:

http://www.bluetears.com/tbg_test/aer_v2/AER036_public_template_2column_V02.html

http://www.bluetears.com/tbg_test/aer_v2/css/ac_menu.css

The basic problem is, most of my text and background colors are not showing up in IE6. Unfortunately, this has to be IE6-compatable. I think this is an issue with me screwing up my inheritance with having so many nested things, but I can't figure it out. Any hints regarding what I need to fix to get the sidebar nav in IE6 to look like the rest of the browsers (mostly in regards to colors and border styles - I know there's extra spacing... but that's less important) would be very appreciated.

And if it helps, here's the script it's using:
http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm

Thanks for any help!

[lilyinblue]

Just as an update, I've been working and tweaking the CSS all night and made some adjustments. Most issues with IE6 have been resolved. The only thing that remains is that the background colors on the sidebar menu don't seem to like showing up. The files in the post above this will reflect all updates. They're still the most current versions.

[TheJoshMan]

if it's not already resolved by then, i'll take a look when i get home this afternoon

[lilyinblue]

That would be fantastic. Thank you!

[TheJoshMan]

here's what i'm seeing in IE6 on the last link you posted... It looks no diff than in FF3

http://www.eight7teen.com/images/IE6.jpg

BTW... Have you checked out the first link in my signature? You should definitely take a look if you are still worried about IE6

[lilyinblue]

Hello again,

The problem with the menu is actually a few levels down. Most of the menu doesn't expand since the client sort of forgot to give me a complete site map. However, it will expand off of "Specialty Centers" - then, follow "CORDS" and "Reentry Data". That path will open the menu to the lowest level. It's the background colors on these lower levels that aren't matching up.

... and believe me. I wish I didn't have to be worried about IE6. I was just told I have no choice.

Thanks again :)

[lilyinblue]

I thought it might help to toss up a side-by-side view (IE6 vs. FF) to show what's going on. Maybe this will help:

http://www.bluetears.com/tbg_test/IEvsFF.jpg

[lilyinblue]

Outsourced and fixed. Thanks for all the help :)