• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 343
  • Last Modified:

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/
0
Geektank
Asked:
Geektank
  • 4
  • 4
  • 2
2 Solutions
 
fiboCommented:
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
GeektankAuthor Commented:
Sorry I'm now lost I can't find this missing link to the css.
0
 
fiboCommented:
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
 
fiboCommented:
Sorry I'm now lost I can't find this missing link to the css.
Maybe it is not there anymore?
0
 
fiboCommented:
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

Featured Post

Industry Leaders: We Want Your Opinion!

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!

  • 4
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now