Forums

ukcpi

I have a problem with Firefox making images smaller. It looks fine in Chrome but the original larger size of the image is shown in Firefox despite the rules given to it.

You can view the problem here - see the circle navigation under the city scape. http://dev.uk-cpi.com/sustainable-cities

CSS

.future-nav img {width: 120px; height: 120px;}

HTML

  <div class="future-nav">
        <a href="/sustainable-cities/office/"><span class="circle"><img src="<?php bloginfo( 'template_url' ); ?>/-/images/content/future/city/small-office.png" alt="Office" width="120" height="120" /></span>
        <h4>Office</h4></a>
        </div>

Watson90

The images in Chrome are 66px by 66px and the ones in FF are 120px by 120px.

Change this;

.future-nav img {
width: 120px; 
height: 120px;
}

To this;

.future-nav img {
width: 66px; 
height: 66px;
}

And it should be fine?

ukcpi

Douh! I feel so stupid, I missed that!

Cheers!

Watson90

Glad you got it working mate :)

treehouse : what would you like to learn today?

Forums

Images don't resize in Firefox