Guest
23 May 2013 11:02

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)

Last Modified: 02 Mar 2014


Guest
23 May 2013 11:16

it seems that the problem is in this last class

.img-polaroid {

    background-color: none;

    border: none;

    box-shadow: none;

    padding: 0px;

    width:100%;

}

if I delete "width:100%" then images are displaied just fine in IE10 too

except that deleting that rule make my images no more responsive, so in some cases they don't fit well for some screen sizes

if anyone has a better solution is really welcome!


Sergey
Total posts: 13,748
23 May 2013 11:19

I could not reproduce it. I've opened your site in IE10 and it looks just fine.


Sergey
Total posts: 13,748
23 May 2013 11:21

You probably had to give hate for image frame rather than delete width.


Guest
24 May 2013 02:51

You probably had to give hate for image frame rather than delete width.

nope, not working, I will digga litlle deeper... IE10 is very much better than IE9 but still have problems if compared with chrome and firefox... why can't the microsoft guys just make a browser which works like the other ones?! :((

Powered by Cobalt