We value your feedback.
Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!
COURSE of the MONTH
12 days, 19 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
Hover state looks odd in IE9 and IE10?
Posted on 2012-12-22
Hi there,
I am having a terrible time getting a site to be compatible for a client using IE9.
I cannot test it as I am only using windows 7.
Can someone help me to iron out an issue.
On this site here http://cisrd.com/ if you go to hover over the "about our conference" you will see the hover menu looks odd - see screenshot...
I cannot seem to get the code right to make this work for them. It looks good in my browsers, just not theirs?
Thanks
aaaimage003.jpg
I am having a terrible time getting a site to be compatible for a client using IE9.
I cannot test it as I am only using windows 7.
Can someone help me to iron out an issue.
On this site here http://cisrd.com/ if you go to hover over the "about our conference" you will see the hover menu looks odd - see screenshot...
I cannot seem to get the code right to make this work for them. It looks good in my browsers, just not theirs?
Thanks
aaaimage003.jpg
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
-
5
3
2- +2
12 Comments
Active 2 days ago
Hello,
I did not see the problem either. There is a line in the header
I did not see the problem either. There is a line in the header
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
I would look at how your cells inherit their width. It appears as if the IE9 is using a default size for your cell at one level or another. It may help if you explicitly control the size of the child cell instead of allowing the browser to make default style decisions.
On a separate note, how does IE9 have anything to do with Windows 7? IE9 can be installed on anything Windows Vista or newer.
On a separate note, how does IE9 have anything to do with Windows 7? IE9 can be installed on anything Windows Vista or newer.
Hi there,
Thanks for the reply.
Sorry it was IE10 that is causing the issue - IE9 is ok.
Also in my wordpress theme I can't seem to find the line you mentioned...it isn't in the header file
?
If the cells are inheriting their width, where can I change this and in which tag in the CSS to stop this from inheritng a default size...?
Thanks for helping me with this
Thanks for the reply.
Sorry it was IE10 that is causing the issue - IE9 is ok.
Also in my wordpress theme I can't seem to find the line you mentioned...it isn't in the header file
?
If the cells are inheriting their width, where can I change this and in which tag in the CSS to stop this from inheritng a default size...?
Thanks for helping me with this
I believe I may have found the culprit. In the layout.css file (wp-content/themes/athena/
ul.nav ul {
width: 11.089em;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 9999;
margin: 0;
}
Active 2 days ago
Yes it should be in either one of the header php files or index php file. If you are using a web developer program like dreamweaver then it should be able to search the relevant files' content for that particular line of code. It will probably be in the folder of the name of the template you are using.
Seeing that it is IE10 specifically now, that line I think could be changed to
Is the client using a beta version of IE10? Are they running Windows 7 or 8? I loaded the site just fine on a Windows 8 machine and it runs IE 10. I viewed it in both the legacy and metro versions.
Seeing that it is IE10 specifically now, that line I think could be changed to
<meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1" />
Is the client using a beta version of IE10? Are they running Windows 7 or 8? I loaded the site just fine on a Windows 8 machine and it runs IE 10. I viewed it in both the legacy and metro versions.
Great finding the culprit for the strange hover state...can you please have a look and see if you can see it ok now? Anyone? I used width: 100%
It looks fine using the Windows 8/IE 10 emulator on BrowserStack.com
Active 5 days ago
As wadehults has hinted at please check out BrowserStack.com. You can test your site on any OS, browser, device. It's been a lifesaver for me! Worth the monthly fee.
The issue appears in IE9 when running compatibility mode (see attached screenshot). It doesn't appear in IE9 running normally. If you are running IE9 on your Win7 machine you should be able to see the problem by clicking the compatibility mode button.
This can be fixed by adding "width:auto;" to all of the sub-menu "a" tags.
You may be able to fix it via changing "width: 100%" to "width: auto" on the "ul.nav ul li a" element in layout.css: http://cisrd.com/wp-content/themes/athena/css/layout.css?ver=3.4.2
Either way, you should be able to test each of those on your Win 7 machine using compatibility mode to see it.
As a tip, I used IE developer tools (hit F12 with the website open in IE) to debug the css.
ie9-compatibility-mode.jpg
This can be fixed by adding "width:auto;" to all of the sub-menu "a" tags.
<a style="width: auto;" href="http://cisrd.com/about/conference-aims-themes/">
You may be able to fix it via changing "width: 100%" to "width: auto" on the "ul.nav ul li a" element in layout.css: http://cisrd.com/wp-content/themes/athena/css/layout.css?ver=3.4.2
ul.nav ul li a {
-moz-box-sizing: border-box;
display: inline-block;
width: auto;
}
Either way, you should be able to test each of those on your Win 7 machine using compatibility mode to see it.
As a tip, I used IE developer tools (hit F12 with the website open in IE) to debug the css.
ie9-compatibility-mode.jpg
Ok on line 59 in layout.css I changed the width from 100% to auto.
Thanks for all the information regarding testing this on non Win 8 machines.
Thanks for all the information regarding testing this on non Win 8 machines.
Featured Post
WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
Find out what you should include to make the best professional email signature for your organization.
This article shows the steps required to install WordPress on Azure.
Web Apps, Mobile Apps, API Apps, or Functions, in Azure all these run in an App Service plan.
WordPress is no exception and requires an App Service Plan and Database to install
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by
placing a Mailchimp signup form on a WordPress Page or Post.
This will be demonstrated using a Windows 8 PC. Mailchimp will be used.
Log into your Mailchi…
Learn how to create flexible layouts using relative units in CSS. New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month12 days, 19 hours left to enroll
777 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.