Wordpress CSS Menu Alignment for IE

I have changed the default menu for wordpress it looks find in chrome however it does not in IE.

Can someone please advise what to amend in the CSS to correct this issue.

Your help would be greatly appreciated.

Many thanks Adam.

here is the link http://www.darringtonhealthcare.co.uk/cms/
GeektankAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Bernard S.CTOCommented:
Looking at html with IE tools:
I would suspect that the problem comes from the right margin as defined with
/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
/* Navigation spacer width*/ 
.main-navigation li {
margin: 0 [b]27px[/b] 0 0;
position: relative;
}
/* NAV HACK IE */
@media screen\0 {
    .main-navigation li { margin: 0 [b]18px[/b] 0 0; }
} 
...

Open in new window

and
/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
....
.main-navigation {  
width: 112.4%;
  margin: 0 -2.85714rem;
	background: #8a7090; /* Old browsers */
...

Open in new window


Note also that you have alink to http://www.darringtonhealthcare.co.uk/twentytwelve/style.css which is wrong, start by correcting that first.
0
GeektankAuthor Commented:
Thanks for the quick response fibo, which line is the alink on?
0
GeektankAuthor Commented:
ok i think i found it
@import url(../twentytwelve/style.css);

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

GeektankAuthor Commented:
Sorry I'm now lost I can't find this missing link to the css.
0
Bernard S.CTOCommented:
Sorry for the typo in "a link"!

Not sur if this import is not a duplicate of the others css

You have tons of JS, they might also be the source of the problem

I suggest you use the "XRAY" bookmarklet to make fast checks on css properties of an element
http://www.westciv.com/xray/
a "no-brainer" tool which for some other works I complete with the MobilePerf bookmarklet http://stevesouders.com/mobileperf/mobileperfbkm.php
add both to each of your browsers!
0
Bernard S.CTOCommented:
Sorry I'm now lost I can't find this missing link to the css.
Maybe it is not there anymore?
0
Bernard S.CTOCommented:
Mmmh Might be related to the damn "box-model", see http://css-tricks.com/box-sizing/

One possible cause might be that some elements in css have a negative margin, which would compensate for the extra margin... and this might be handled differently in the browsers:
0
GaryCommented:
How should it look? Because it looks the same to me in all browsers.
0
GeektankAuthor Commented:
My apologies I've been changing stuff around Gary.  Fibo has been helping out, but i'm still stuck.
0
GaryCommented:
Problem with fonts between browsers is you can not guarantee they will render the exact same
So laying out your site based on text sizes and how they look in one browser will almost certainly not work in another browser
Your only solution is to use hacks for IE only

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* Styles for IE10+ */
}


For IE9 and lower you can use the standard IE only stylesheet conditional
<!--[if IE]>
Add css for other IE here
<![endif]-->
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.