Drop down menu out of position

First I have to say that I love this theme. It has very clean looks to it.

OK on to business, I am having the same issue that was reported above. The only difference is that my theme works fine in IE8 both the slideshow and menus, but in IE7 I have the same issue with both the slideshow and the menus. The biggest issue to me is the menus not lining up properly. For my use I can disable the screenshow buttons, not really necessary.

Any ideas would be very helpful... Thanks,

Hi guys,

I have a drop menu with this theme and it seems to work fine in ie8?

Also no problem with the position bullets?

Noo point in supporint ie7 as ie8 works on xp.

4aron,
While I would love to agree that IE7 is outdated and not being used, unfortunately for external facing websites, we cannot dictate what browser will be used when visiting the website. Working in this business for as long as I have I know that upgrades, especially of this kind, can linger and I know others in the field that still have IE7 running in their business. IE7 support will not end officially until Microsoft officially retires extended support for XP SP3 in 2014.

If anyone has any work arounds for the menu drop down issue I am willing to try them.

Thanks in advance,

I'm having the exact same issue here.
Menu and the position of the bullets of the slider..just like the attachment on this post.
I don't know how the Demo site looks fine on IE7. There must be a way to fix this bug.
I am so tired by dealing with thses issues for the past 3 days..
..and it's too bad that many of Government agencies still use IE7 including the one i'm working on right now..

Please any advise would be greatly appreciated!

I found a solution to screen 2.jpg
(The appearing behind the front page slideshow)
http://drupal.org/node/1154698
Basically change the CSS as below.

/* 1st Level */
#header-menu ul.menu { float:left; display:block; padding:0; margin:0; position:relative; z-index:100;}

but still no luck with the menu and the slider bullets being out of position..

Here is the CSS for IE7.

/*
* Javascript Slideshow
*/

#slideshow { display:block; position:relative; overflow: hidden; width: 100% !important; background:transparent; }

.slider-item { width:100% !important; background:transparent !important; }

.slider-item .content { width:960px; height: 285px; margin:0 auto; padding:0; position:relative; }

.slider-item a { outline:none; }

#slider-controls-wrapper { width:250px; text-align:center; margin:0 auto; }

#slider-controls { display:inline; text-align:center; width:250px; }

#slider-controls ul { list-style:none; margin-left:80px; padding:10px 0 5px 0; }

#slider-controls ul li {margin-bottom: 10px; padding: 0; display:inline; outline:none;} /* Fixed for IE7*/

#slider-controls ul li a { width:17px; height:17px; background:url('images/inactive-slide.png') no-repeat center center; display:block; float:left; padding:3px; margin:0; outline:none; }

#slider-controls ul li a:focus { outline:none; }

#slider-controls ul li.activeSlide a:hover { background:url('images/active-slide.png') no-repeat center center; }

#slider-controls ul li.activeSlide a { background:url('images/active-slide.png') no-repeat center center; }

#slider-navigation ul{ display:inline; overflow:hidden; margin:0; padding:0; }

For the menu problem in IE8 it is probably because you did turn on compatibility mode. If you have the problem in IE7 just use a different style sheet when it is IE7 and modify the css. Worked for me.

isnan, would you mind posting how you switched to a different stylesheet and new css for IE7?

Thanks,

in template.php you need to add code.

drupal_add_css(path_to_theme() . '/ie7.css', array('group' => CSS_THEME, 'weight' => 115, 'browsers' => array('IE' => 'lte IE 7', '!IE' => FALSE), 'preprocess' => FALSE));

this is for IE7 and everything lower... probably just use IE 7 instead of LTE IE7 for just IE7...

Isnan, thanks for the reply. I plan on testing this in the coming week.
The code you posted appears to be the switch for IE7, please correct me if I am wrong here. I stumble my way through the coding pieces. This would force all IE7 browsers to use a new css called ie7.css that would be located in the Corporate Clean themes directory, correct? Would you mind posting your IE7.css? I am unsure if I would copy most of the code from the styles.css and just modify what is needed, and if so exactly what would need to be modified.

Thanks again

Insnan, Thanks for the tip on switching to a different css for IE7. I was able to do this and get the bullets for the slideshow to wrk properly, this means that at least I know I am using the correct css when accessing from IE7. I am still struggling getting the drop down menus to work properly though. They are pushed to the right in IE7 instead of being lined up properly. Do you or anyone have any tips on this?

Thanks in advance,

Hello brainfreeze

Could you try this http://drupal.org/node/1322578 and give me your feedback?

Thanks
George

Thanks for responding gtsopour,
I made the referenced changes in the link you provided and it did not fix the menu being pushed right. Would you like a screenshot on what I see on screen? I am not exactly sure where to adjust the css but I am trying and I am happy to test any suggestions as well.

Thanks,

OK well maybe this will help. The menu is only out of place on the 2nd level. I changed the css in the IE7.css I created to

/*2nd level */
#header-menu ul.menu li.expanded ul.menu { width: 230px; z-index:100; padding:0; background: #222222; display: none; position:relative; }

This does not fix the issue, but does center the dropdown under the 1st level. Some of the other menus are now out of place... I will continue to "play" to see what I can come up with.

Thanks,

Unfortunately xiaoguime, the problem/fix you posted does not solve the originally posted issue. Does anyone have any suggetions about the menu drop downs being pushed right in IE7? Like I said I am trying to fiddle my way through this and have a way to test and I am willing to do so if anyone has any suggestions.

Thanks,

I am changing the category of this issue to bug report (with major priority) and will follow the solution. The solution gives IE7-8 browser support.

Hello everyone,

Thank you for reporting this bug. I made an effort to troubleshoot this bug and I was able to reproduce this in IE7 and IE8. For full IE7 and IE8 support of drop down menus (css multi-level menus), you should make the following changes only to your style.css file. Also, these changes will solve any issue with drop down menus and slideshow (menus behind slideshow)

I've done the necessary checks and all show ok. Please, try to implement these changes to your style.css file too and inform me about the result, in order to commit them.

1. ~line 235
From

#header-menu ul.menu { display:block; padding:0; margin:0;  }

to

#header-menu ul.menu { display:block; padding:0; margin:0; position:relative; z-index:100; }

2. ~line 239
From

#header-menu ul.menu li a { outline:none; text-decoration: none; margin:0 35px 0 0; color:#ffffff; font-size:14px; font-weight:normal; text-align:center; text-transform:uppercase; 
font-family: Myriad Pro,"Lucida Grande","Lucida Sans Unicode",Segoe UI,Helvetica,Arial,sans-serif; }

to

#header-menu ul.menu li a { outline:none; text-decoration: none; margin:0 35px 0 0; color:#ffffff; font-size:14px; font-weight:normal; text-align:center; text-transform:uppercase; 
font-family: Myriad Pro,"Lucida Grande","Lucida Sans Unicode",Segoe UI,Helvetica,Arial,sans-serif; display:block; }

3. ~line 253
From

#header-menu ul.menu li.expanded:hover > ul.menu { display:block; }

to

#header-menu ul.menu li.expanded:hover, #header-menu ul.menu li.expanded:hover > ul.menu { display:block; }

4. ~line 255
From

#header-menu ul.menu li.expanded ul.menu li a { padding:0 10px; margin:0; display:block; width:210px; text-align:left; line-height:35px; height:35px; background:none; font-size:12px; border-bottom:1px solid #353535; }

to

#header-menu ul.menu li.expanded ul.menu li a { padding:10px; margin:0; display:block; width:210px; text-align:left; line-height:130%; background:none; font-size:12px; border-bottom:1px solid #353535; }

Thanks
George

Just committed all these style.css changes http://drupalcode.org/project/corporateclean.git/commit/4b4b7aa

Thank you so much gtsopour!!! I will try your recommended fixes in the old version of the theme and then also upgrade. I will let you know how everything goes.

I really do appreciate the support and love the theme!

OK tested your fix in the old version of the theme just for anyones benefit out there and it worked perfectly. Upgrading now.

Thanks again,

You are welcome brainfreeze. Keep me informed on anything other issues. Thanks again.