How to override css img properties?


Tags: css,html5,design,override

Problem :

I have noticed weird conflict between twitter bootstrap (2.2.1) and ad-gallery in Internet Explorer.

Turns out this lines in bootstrap.min.css causing a problem and images don't show up:

img{max-width:100%;width:auto\9;height:auto;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;}

when i remove these two everything works normally:

width:auto\9;height:auto;

But instead of removing those i am trying to override those properties but none of this worked so far:

.ad-gallery img{width:default;height:default;}
.ad-gallery img{width:none;height:none;}
.ad-gallery img{width:auto;height:auto;}

How to override these properties ?

btw. there isn't any problems with google chrome and mozilla firefox. You can check the example with original bootstrap min css file from here, which is not working.

Here is the working example with modified bootstrap-modified.min.css from here.



Solution :

As observed, the parent div (which has a class ad-image) of the img has the following in-line styles:

    left: 230px;
    top: 160px;
    width: 0px;
    height: 0px;

This is actually the cause why your img also has the width and height of zero.

Oh, I know you didn't place those styles because it has a different value in Chrome (or in FF). So, where is the problem coming? Yeah, right, it is from the JavaScript.

I checked the plugin that you used jquery.ad-gallery.js and made some debugging.

I found out that the plugin is computing the dimension and position of the ad-image container using the dimension of the img. The dimension of the img is acquired using the dimension of the preloaded (cached) image.

The problem with IE is that it's returning back zero-value dimensions for the image causing its parent, which height and width are computed using it, to also have zero-value dimensions.

Try to check if you can solve this JS issue. I believe that once this is solved, your issue will also be solved without additional CSS styles.

As a work-around, add the following rule to your css:

    .ad-image {
        left: 0 !important;
        top: 0 !important;
        width: inherit !important;
        height: inherit !important;
    }

    CSS Howto..

    How to have one div overlap two other divs?

    How do I fix the navigation menu in Firefox and Internet Explorer?

    If contains 'string' - set css “visibility:hidden;” - how to?

    How to make a 3 column layout fill 100% width using pixel metric on 2 columns?

    How are media queries counted in IE's CSS selectors limit?

    CSS showing and hiding childs and parents

    How to make image fit in div using Jquery

    How to make css background-image a fluid image work in IE

    How to make input+label in a form appear one by one?

    How add symbol in CSS for element?

    Speechbubble tooltip in CSS - how to move the arrow

    How do you implement CSS without to have clear:both on float left and float right

    drupal themes: how do I include several css files / js files on my theme's .info file?

    HTML and CSS: How to play video on website [closed]

    How to hide table row overflow (take 2)

    How to use external css file to style a javafx application

    How to create smooth headlines with HTML and CSS?

    How to override CSS? [closed]

    how can i add class to errorsummay without remove header message

    How to maintain hover state even when mouseout of main drop down link

    How to display a div over other containts of an html page?

    How to prevent right-to-left text appearence while using arabic language?

    [HTML][CSS] How to change opacity of background-image but not the text on it?

    How to layout images in a grid? [closed]

    how to make the text in a div to not overflow its width

    How to add a border-bottom similar to Yahoo! when you scroll the page?

    How do I put an image on top of an image without using absolute positioning?

    CSS: How to prevent div from overlapping parent height or parent border

    how to target IE 6 AND IE7 in css

    How to call external CSS in presence of inline and internal?