I'm pretty sure I have posted this before and rectified the issue, but I cannot seem to find the post. I have a module which I just want to display as a darkblue empty module, filling the module position background colour. In Chrome this displays fine, but in firefox the module appears to overflow the container for some reason.

Please see on this page and compare the results between the 2 browsers. I do not understand what is causing this?

My apoligies if I have posted this here before, I have been through my quetsions and cannot find it.

regards D

Edit: Links removed

2 Answers 2


The problem is not the blue module. It is the photo. With FF its calculated height is 175px according to the 100% specified for its height:

<img src="/wimeta/images/factory.jpg" style="height:100%;" alt="factory">

Replace it by:

<img src="/wimeta/images/factory.jpg" style="height:191px;;" alt="factory">

NB: not sure this is the more elegant way but it works, at least you get what you need ;)


You should never set both width and height to 100% on an image because it changes aspect ratio when the width of the screen changes.

The easiest thing is to make a png image in the selected color of the same size as you can publish in the module to the right.

If a module contains only one image, it should appear in a div's instead of


Always remember to insert both width and height. Max-width is - as it should be, already defined to 100% in css

<div class="your_class_name">
<img src="/wimeta/images/factory.jpg" width="508" height="175" alt="factory">

If you want to define margin or padding, you should add class_name to the div and then add it to custom.css


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.