spry in ie6

Chris,

I have a bit of an issue with this post, i have already answered this issue in a previous post, but you say that by altering the ul.MenuBarHorizontal width setting alters your positioning.

The point is that positioning the menu by setting the width of the menu is not the way to position it... you should be positioning the menu centrally by setting the containing div margins to auto, what you have got here is a style that is working, but more by luck than judgement unfortunately. Because of this your site cant be future proof, there is nothing to say that an update or something in the future might not send the design out, in the same way that IE6 is messing with the design now.

For now, you can try altering the ul.MenuBarHorizontal li width to auto instead or the ul.MenuBarHorizontal setting. then alter the ul.MenuBarHorizontal a left and right padding setting to space them out a little better.

You may then need to add a rule
ul.MenuBarHorizontal li ul li{
clear: left;
}
to the spry menu css to correct the submenu if they suddenly go horizontal.



Richard Williams
p.s. Please remember to rate our post replies and tick if solved. Also, please remember that we here are NOT employed by Adobe, we do this out of love and fun, so its always nice to recieve a Please and Thank You! :o)

i strongle suspect that The pure issue with IE6 is down to the width of either
a) The containing DIV
b) The Spry Menu.

The chances are that making this slight adjustment might sort it out, if not you could try setting the width of the DIV surrounding the spry menu, to a size slightly largert than that of the spry menu, this might sort it out. ( i cant test in IE6 anymore unless i upload a site so i cant give you the exact answer.

What i would point out however though is this...

Im not sure how it looks in Dreamweaver to you, but to me in CS3, your page content looks nothing like how it should in Dreamweaver design view, Your Header DIV is not set at the correct height to contain the Headerlink DIV, and so your navcontainer2 DIV, although set at 100% width, only goes so far as the start of the headerlink div...
If this is happening with the way that your design software is rendering it, then it aught to set of alarm bells in your head that is all i was trying to point out.. I commend you for your effors on this site using the cascading stlye sheet, but there are some quite clear errors


If you altered the height of the header div, and then added padding left auto padding right auto, to the ul.MenuBarHorizontal then this would center the menu for you so long as there is a width setting in this rule... ie, not auto, and then if you use a px setting for the width rather than ems that will also help to ensure the look is universal.

I agree with what you are saying about IE6, but sometimes older versions are good for pointing out that there are errors... and ok, newer versions can cope with these errors, but there is nothing to say that future issue will be so forgiving, so if something does not work in a lower browser setting, it is still good to examine why this is, as it could rear up again in the future.

Richard Williams
p.s. Please remember to rate our post replies and tick if solved. Also, please remember that we here are NOT employed by Adobe, we do this out of love and fun, so its always nice to recieve a Please and Thank You! :o)

yes it will be all the style sheet links, and no thats not the issue i am having.

It looks like it should, but if you click on the div containers, and the highlight appears around them, you can see they are not doing what they are supposed to thats all... the site itself looks the same.

See how the DIV navcontainer2 looks, it has stopped, bumped into the headerlinks DIV



When you donwload the code to a new computer, you have to include the CSS and all the other links your site includes, OR you can alter the code to look at the existing ones... by adding the root directory http://www address to it.

Richard Williams
p.s. Please remember to rate our post replies and tick if solved. Also, please remember that we here are NOT employed by Adobe, we do this out of love and fun, so its always nice to recieve a Please and Thank You! :o)

Hi Tom,


The problem is that you have, at some point, lost a zero in your SpryMenuBarHorizontal.css rule for ul.MenuBarHorizontal ul

You have the z-index: 120;

The should be z-index: 1020;

Richard Williams
p.s. Please remember to rate our post replies and tick if solved. Also, please remember that we here are NOT employed by Adobe, we do this out of love and fun, so its always nice to recieve a Please and Thank You! :o)

Richard,

Now that I'm back in the office, I set the z-index back to 1020 and the submenus are now behaving properly. They stay visible until you click one of the items. I originally had float = none and z-index set to 1020 in the ul.MenuBarHorizontal ul style and was advised to remove the float parameter and change z-index to 120. I did them both at the same time and the problem didn't seem to change at all. Apparently, all I had to do to correct the menu issue was to remove the float parameter.

I still have the third problem I mentioned. On one installation of IE6, one particular page's main content starts below the level of the sidebar content. On another installation of IE6, that same page displays properly.

Thanks,
Tom

Ah, I see the problem. On my machine the navcontainer2 shows up in the correct position below the header...it makes it hard to adjust what I need when I see something different... I am going to print my code as is now (for reference) and start adjusting and see what I come up with.
Thanks for your help

Hi Chris,

Looking at your CURRENT pages online NOW...

No the Ul.MenuBarHorizontal MUST have a setting, not auto, as i said in one of the last posts, for the menu to center.

The width 40ems in not enough for IE6, set it to 43 em, or better still, use pixles.

Set the #header height to 100px

ul.MenuBarHorizontal li width to auto

ul.MenuBarHorizontal a Padding 0.5em and 1.6em

Now the menu should be full on every browser, should be evenly spaced between menu items and hopefully look how you want it.. fingers crossed

Richard Williams
p.s. Please remember to rate our post replies and tick if solved. Also, please remember that we here are NOT employed by Adobe, we do this out of love and fun, so its always nice to recieve a Please and Thank You! :o)

As far as i tested, this was an issue in IE 5.5 but not IE6.

I suspect it is a conflict with the a, a:link rule or something like that... in other words the text is there... its just the wrong colour...

The best way to test this is change the colour of this first, then see if thats the colour that is now taken on in your browser checks... if it is, then thats the reason.

Ie 5.5 does not support the new CSS rules anyway, so i wouldnt worry about it, it wont look the same anyway because it does not recognise the margin auto stuff... so ignore 5.5 imo



Richard Williams
p.s. Please remember to rate our post replies and tick if solved. Also, please remember that we here are NOT employed by Adobe, we do this out of love and fun, so its always nice to recieve a Please and Thank You! :o)

Hi all,

I'm building a website for my school and this is my problem: the spry menu bar works correctly in FF 4 and IE 9 (the ones that I use at home), but in IE 6 (which is on the school's computers), the menu bar won't work. More specifically, when I click on it, the submenus don't appear. Accidentally, while moving the other elements under the bar (a sidebar and a spry image slide show), I could see that the submenus actually drop, but it happens behind those elements. Since I am rather new to building websites, the problem seems too difficult to me. I would appreciate any help, because I need to go on with thsi website.

Thank you,

Remus