Solved

Hover state looks odd in IE9 and IE10?

Posted on 2012-12-22
12
1,262 Views
Last Modified: 2013-01-03
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
0
Comment
Question by:Amanda Watson
  • 5
  • 3
  • 2
  • +2
12 Comments
 
LVL 17

Expert Comment

by:bigeven2002
ID: 38716361
Hello,

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" />

Open in new window

Can you try removing or commenting out this line and then have them refresh to see if there is any difference?
0
 
LVL 3

Expert Comment

by:wadehults
ID: 38716498
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.
0
 
LVL 11

Author Comment

by:Amanda Watson
ID: 38725118
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
0
Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

 
LVL 3

Accepted Solution

by:
wadehults earned 500 total points
ID: 38725383
I believe I may have found the culprit. In the layout.css file (wp-content/themes/athena/css/layout.css), there is a code section
 ul.nav ul {
    width: 11.089em;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    margin: 0;
  }

Open in new window

You will note that this is a fixed width for any unordered list below the initial navigation unordered list. This is currently set to 11.089em which may be too large to be contained within the parent unordered list. I would reset this value to either "auto" or "100%", the latter being my preferred method because it ensures the child element will remain within the bounds of the parent element.
0
 
LVL 17

Expert Comment

by:bigeven2002
ID: 38726133
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
<meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1" />

Open in new window

After changing that, have the client do a refresh to see if any change.

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.
0
 
LVL 11

Author Comment

by:Amanda Watson
ID: 38726272
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%
0
 
LVL 3

Expert Comment

by:wadehults
ID: 38728015
It looks fine using the Windows 8/IE 10 emulator on BrowserStack.com
0
 
LVL 7

Expert Comment

by:Alicia St Rose
ID: 38728331
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.
0
 
LVL 18

Expert Comment

by:Matthew Kelly
ID: 38728551
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.

<a style="width: auto;" href="http://cisrd.com/about/conference-aims-themes/">

Open in new window


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;
}

Open in new window


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
0
 
LVL 11

Author Comment

by:Amanda Watson
ID: 38741947
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.
0
 
LVL 11

Author Comment

by:Amanda Watson
ID: 38741949
Can everyone report now how they see it with this change?
0
 
LVL 11

Author Closing Comment

by:Amanda Watson
ID: 38741992
Thank you
0

Featured Post

Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Border and image sizing 5 20
Cannot center boxes on mobile, but looks good on desktop 9 33
alert(innerHTML); 8 19
Diminish Pop-up  in 3 seconds 7 23
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Find out what you should include to make the best professional email signature for your organization.
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question