Let's see if someone can help me to solve this mistery....
I have a 4 modules in homepage http://174.132.147.254/ ~sarteano/it/
displaying big images from an image field
the modules work just fine with firefox and chrome
but in IE10 the images are being resized and are mich smaller
(when you open the page with IE10 the images are ok until the page loads, then when it ends loading they get resized like this
here is the template code
<div class="cobalt_module_title_background">
<div class="cobalt_module_title_before"></div>
<div class="cobalt_module_title"><?php echo implode(', ', $item->categories) ; ?></div>
</div>
<div class="cb_mod3_main">
<div class=cobalt_image_big"><?php echo $item->fields_by_id[3]->result; ?></div>
<div class="cobalt_item_title"><h2> <a <?php echo $item->nofollow ? 'rel="nofollow"' : '';?> href="/<?php echo JRoute::_($item->url);?>" title="<?php echo $item->title?>"><?php echo $item->title?></a></h2></div>
</div>
and here is the css
.cobalt_module_title_background{
background:#9A9941;
}
.cobalt_module_title_before{
position: absolute;
background:#DBD85E;
width: 5px;
height: 22px;
left: 0;
top: 15px;
}
.cobalt_module_title{
color: rgb(220, 224, 173);
font-size: 180%;
padding:15px 15px 15px 20px;
text-transform:lowercase;
}
.cb_mod3_main:hover{
opacity:0.6;
filter:alpha(opacity=60);
}
.cobalt_image_big {
width:100%;
height:auto;
}
.cobalt_image_big img {
width:100%;
height:auto;
}
.cobalt_item_title {
background:#9A9941;
text-align: center;
padding:1px;
}
.cobalt_item_title h2 a {
color: #fff;
font-size: 50%;
font-weight: normal;
text-transform:lowercase;
padding: 0px 5px;
line-height:1em;
}
.img-polaroid {
background-color: none;
border: none;
box-shadow: none;
padding: 0px;
width:100%;
}
I set width:100% for the images, so they should just fit the div... (which they infact are doing in firefox and chrome)
Let's see if someone can help me to solve this mistery....
I have a 4 modules in homepage http://174.132.147.254/ ~sarteano/it/
displaying big images from an image field
the modules work just fine with firefox and chrome
but in IE10 the images are being resized and are mich smaller
(when you open the page with IE10 the images are ok until the page loads, then when it ends loading they get resized like this
here is the template code
and here is the css
I set width:100% for the images, so they should just fit the div... (which they infact are doing in firefox and chrome)