6

I am including an image in a fairly simple site but it isn't appearing. Inspection of the element style in Chrome shows a final (right at the top, after all inherited styles) style of

element.style {
  display: none !important;
}

Sure enough, if I unset that style the graphic's outline appears and the page height adjusts to accommodate it. But I don't know where this style is coming from - it looks like something is adding it dynamically. Here's the Django template that I'm using to create the page (the image in is <div class="secondary col">) :

{% load markup %}
<!doctype html>
<html lang="en">
    <head>
    <title>Holden Web: {{ flatpage.title }}</title>
    <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
    <link href="{{ STATIC_URL }}normalize.css" rel="stylesheet" type="text/css" />
    <link href="{{ STATIC_URL }}styles.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 9]>
                <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link href='http://fonts.googleapis.com/css?family=Comfortaa:700' rel='stylesheet' type='text/css'>

    </head>
    <body>
        <div class="bluebar"> </div>
        <header class="pageheader shadow">
            <h1><a href="/">Holden Web</a></h1>
            <div class="tagline">What you'll need to know tomorrow</div>
            <nav class="pagenav">
                <ul class="inline_list">
                    <li><a href="/">Home</a></li>
                    <li><a href="/projects/">Projects</a></li>
                    <li><a href="/partners/">Partners</a></li>
                    <li><a href="/training/">Training</a></li>                                                                  [13/1858]
                    <li><a href="/contact/">Contact</a></li>
                    <li><a href="/about/">About</a></li>
                    <li><a href="http://holdenweb.blogspot.com/">Blog</a></li>
                </ul>
            </nav>
        </header>
        <div class="content">
            <section class="secondary col">
            <div>
            <a href="http://www.jdoqocy.com/click-7520687-11258637" target="_top">
            <img src="http://www.awltovhc.com/image-7520687-11258637" width="200" height="200" alt="O'Reilly 50% Ebook Deal of the Day" border="0"/>
            </a>
            </div>
            {% block secondary %}
            {% endblock %}
            </section>
            <section class="primary col">
            {% block primary %}
            {{ flatpage.content|markdown:"safe" }}
            {% endblock %}
            </section>
        </div>
        <footer class="vcard">
                        <div class="secondary col">
                        </div>
                        <div class="primary col">
                                <h1>Holden Web, LLC</h1>
                                <p>Email: <a href='mailto:[email protected]' class="email">[email protected]</a>Phone: <span class="tel
">1.800.494.3119</span></p>
                                <nav>
                    <ul class="inline_list">
                        <li><a href="/">Home</a></li>
                        <li><a href="/projects/">Projects</a></li>
                        <li><a href="/partners/">Partners</a></li>
                        <li><a href="/partners/">Partners</a></li>
                        <li><a href="/training/">Training</a></li>
                        <li><a href="/contact/">Contact</a></li>
                        <li><a href="/about/">About</a></li>
                        <li><a href="http://holdenweb.blogspot.com/">Blog</a></li>
                    </ul>
                                </nav>
                                <p><a href="http://theopenbastion.com/">The Open Bastion</a></p>
                        </div>
        </footer>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    </body>
</html>

The first style file is normalize.css v3.0.1. styles.css is given below.

body{font:62.5% arial, helvetica, sans-serif;min-width:815px;background-color:#f6f6ef}
.pageheader{font-size:1.4em;background-color:#f6f6ef;padding:0 2em;height:10em;border-bottom:1px solid #eae7d1}
.pageheader h1{margin:0;position:relative;top:1em;display:inline-block}
.pageheader h1 a{background:transparent url(images/logo.png) no-repeat left top;display:block;text-indent:-9999em;height:225px;width:207p
x}

/*logo flip*/
.pageheader h1 a:hover{
-webkit-transition-delay:.5s;
-moz-transition-delay:.5s;
-webkit-transform-style:preserve-3d;
-webkit-transition: -webkit-transform 1.7s;
-webkit-transform:rotateX(360deg);
-moz-transform:rotateX(360deg);
-moz-transform-style:preserve-3d;
-moz-transition-duration: 1.5s;
}

.tagline{font-size:2em;font-weight:bold;color:rgba(0,0,0,.1);
    font-family:"Gill Sans","Gill Sans MT","Trebuchet MS",sans-serif;
    text-shadow:1px 1px 3px rgba(0,0,0,.1);
    margin:-6em 0 0 30%;
    -moz-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;
    }
.tagline:hover{color:rgba(0,0,0,.2);text-shadow:3px 3px 4px rgba(0,0,0,.2);}
h1,h2,h3,.h1,.h2,.h3,.inline{font-family:"Gill Sans","Gill Sans MT","Trebuchet MS",sans-serif;color:#444}
.content div section p strong {font-weight:bold;font-size:18px}                                                                 [28/1894]
.content a {color:#449}
.content a :hover{color:#66c}
h1{margin:.5em 0 .25em}
h2{margin:.6666em 0 .3333em}
h3{font-size:16px;margin:7px 0 5px}
.content{font-size:1.3em;background-color:#fff;padding:0 2em;z-index:10}
.content p{line-height:1.7142;margin:.5em 0}
.content ul{list-style-position:outside;padding-left:1em;list-style-type:none}
.pagenav{margin:.6em 0 0 30%}
.pagenav a{font-size:1.0714em;color:#4646e9;font-weight:bold;text-transform:uppercase;text-decoration:none;text-shadow:1px 1px 2px rgba(0
,0,0,.2);
-moz-transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
}
.pagenav a:hover{
text-decoration:underline;
/* just a little too much
font-size:110%;
-moz-transform:scale(2);
-webkit-transform:scale(2);
-moz-text-size-adjust: 120%;
-webkit-text-size-adjust: 120%;*/
}
ul.inline_list{list-style-type:none;padding:0;margin:0}
ul.inline_list li{display:inline;margin-right:1em}

.col{padding:1em 0}
.secondary{line-height:1.6;float:left;width:25%;overflow:hidden;padding-top:11em}
.primary{font-size:1.0769em;line-height:1.6;width:60%;margin-left:30%;max-width:700px;padding-bottom:3em}

footer{font-size:1.3em;clear:both;background-color:#f6f6ef;padding:.5em 2em;border-top:1px solid #092694;height:14em}
footer .primary{padding-top:0;padding-bottom:0}
footer .primary nav{margin-top:.5em}
.bluebar{
background-image: linear-gradient(bottom, #092794 0%, #5475EE 100%);
background-image: -o-linear-gradient(bottom, #092794 0%, #5475EE 100%);
background-image: -moz-linear-gradient(bottom, #092794 0%, #5475EE 100%);
background-image: -webkit-linear-gradient(bottom, #092794 0%, #5475EE 100%);
background-image: -ms-linear-gradient(bottom, #092794 0%, #5475EE 100%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, #092794),
    color-stop(1, #5475EE)
);
}
footer p{margin:.5em 0}
.bluebar{height:20px}
footer h1{font-size:1.2em}
.email{margin-right:1em}
.shadow{box-shadow:1px 1px 2px rgba(0,0,0,.2)}
.footnav ul{list-style-type:none;position:absolute;top:-6em;left:27em}
.hw{border-bottom:1px solid #eee;padding-bottom:3em}
.hw,.tob{margin:3em 0}

Clues from the clueful will help me get moving again.

5
  • what is the name of your image? (from the path)
    – Dominic
    Jul 17, 2014 at 16:14
  • 1
    usually an element.style like that is something inserted "inline" My guess is that it is being injected by one of the scripts for some reason... hard to tell as I don't think we have all the pieces to this puzzle. Perhaps a link to the broken site?
    – Phlume
    Jul 17, 2014 at 16:17
  • 1
    do you happen to have ad blocking software running on your local machine? Jul 17, 2014 at 16:19
  • You can use google chrome dev and set a breakpoint on node modifications to check whats making the change Jul 17, 2014 at 16:25
  • It was AdBlocker - hoist by my own petard! Thanks, all.
    – holdenweb
    Jul 18, 2014 at 12:58

2 Answers 2

19

This is likely a result of an ad blocking software running on your local machine.

3
  • really it solved my problem. till now i am thinking some virus is in my file.
    – TarangP
    Aug 22, 2018 at 19:06
  • In my case was uBlock Origin. If that is your case, just go to Dashboard > My Filters and remove the filter that is hiding your elements. I was about to abandon Chrome :) Thank you @Korem!!
    – Miguel
    May 24, 2019 at 20:01
  • Just spent about 1.5 hours trying to figure out where the heck that display: none style was coming from and yeah, turned out to be Opera's built-in ad blocker. Incredibly this was only affecting one PNG image out of about 20, all from the same image collection! Thanks!
    – zigojacko
    Oct 9, 2019 at 14:27
-1

For myself I have renamed the picture.

pic_300_600.png : not working

pic300_600.png : it works

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.