[Solved] The one time IE does me right and chrome does me wrong

[prd689]

I’m building a site for a machinery company and on their new products page I have a css driven “image-popup when text is hovered over” section. For some reason, Chrome isn’t using my custom style to define the image style. Instead, it’s using the default img styling. IE actually works good. Safari works fine. It’s Chrome that is giving me a headache. How can I tell chrome to look at my image styling? I’ve been beating my head over this for hours… Any help would be much appreciated.

Scene of the CSS kidnapping

The CSS I’m trying to get working is below.

`

newEquipHover {

    position: relative;
    padding: 9px;
    border: 0px dotted #999;
    background: #fff;
    margin-bottom: 20px;}
#newEquipHover a {
    display: inline;
    padding: 2px 9px 2px 9px;
    text-decoration: none;
    color: grey;
    background: none;
    font-size: 14px;}
#newEquipHover a:hover {
    color: #000;
    text-decoration: none;}
#newEquipHover a span {
    display: none;}
#newEquipHover a:hover span {
    display: inline;
    position: absolute;
    top: 0;
    left: 436px;
    padding: 15px 15px 5px 0;}

newEquipHover a:hover span img {

    width: 330px !important;
    height: 220px !important;
    border: 3px solid #f0ab00;
    -webkit-box-shadow: 0px 1px 30px rgba(50, 50, 50, 0.62);
    -moz-box-shadow: 0px 1px 30px rgba(50, 50, 50, 0.62);
    box-shadow: 0px 1px 30px rgba(50, 50, 50, 0.62);}

`

[Merri]

In Bootstrap there is:

@media all {
    img {
        height: auto;
        max-width: 100%;
        vertical-align: middle;
        border: 0;
    }
}

In their minified code. The thing that messes Chrome is max-width: 100%; as removing that rule fixes Chrome’s render. You may want to override it to none.

This is also one reason why I dislike using frameworks: bugs that can be hard to figure out.

Another suggestion I can give is to take !important away. If something doesn’t work then it is better to have a look at all the rules in use and not try to patch with !important.

[prd689]

@Merri thanks for the feedback!

@jurotek This got it working. Thanks so much!

[prd689]

@jurotek

Thanks for the advice. I’ll bet that helps my efficiency as well.

[apart]

Love this effect, wondering how did you do it ?

Did you go for when hover over link img opacity goes to 1 ?

[prd689]

@markomarkogame

Yep, just as @jurotek said. Glad you like it :)

[Author]

Posts