Menu css not looking centered in Firefox and Safari, but OK in Chrome

[janet4now]

On the left hand side is a menu with icons over the page titles. They should be centered, but only looks right in Chrome:

http://grow.habovillage.com/testing/

#sfm-sidebar .sfm-menu a img {
    max-width: 100%!important;
    margin-left: -15px !important;
    display: block;
}
#sfm-sidebar .sfm-menu li > a span {
    margin-left: -30px!important;
    margin-top: 6px!important;
}

That is the code I added to try and get it to center above instead of the icons being on same line as title.

Anyone know why only Chrome looks correct?

[Atelierbram]

#sfm-sidebar .sfm-menu a img {
  display: block;
  max-width: 40px  !important;
  max-height: 40px  !important;
  margin: 0 auto !important;   
}
#sfm-sidebar .sfm-menu li > a span {
  display: inline-block;
  margin-top: 6px !important;
}
.sfm-has-child-menu > a, 
.sfm-pos-right .sfm-has-child-menu > a {
  padding: 0 !important;
}

Have you considered embedded SVG sprites (with the use element)?

[Pogany]

Hi,

In your code as it is you may replace #sfm-sidebar .sfm-menu a img {max-width: 100% !important; with #sfm-sidebar .sfm-menu a img {width: 100%;

[Author]

Posts