-1

I'm running into an issue with my template that seems strange to me: when I use ems to define image height/width, it will not display, while setting the image size using pixels works fine. Using ems to define padding and margins have no effect, either. Viewing the page source reveals the image is there; it's like the browser is rendering any value as 0em for images. Interestingly, margins and padding on other kinds of elements (h2 p) using ems work. I've done a fair amount of testing to narrow the problem down to the em unit, though I can't be sure.

This happens whether I put the CSS inline or in linked style sheets. It happens in IE and firefox. I'm using a content management system (Joomla), and when I switch to a different template, setting image size with ems work fine.

Are there any known conflicts in CSS or elsewhere that that would make the image disappear when its size is defined by ems?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Tim Rayworth
  • 29
  • 1
  • 1
  • 3

1 Answers1

0

Because you are using Joomla and you said the problem is solved when changing template, I'm pretty sure it's the template styles that are not allowing you to use ems.

If you are using firefox or chrome, you can check the source code with firebug ( http://getfirebug.com/ -> right click, Inspect element) to see what styles are being applied to the images/margins/padding.

If you don't want to change the template's styles, you can add the !important rule (only if you don't want to touch the original files) in the width and height lines. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. Good luck!

Yisela
  • 6,909
  • 5
  • 28
  • 51