I am having a hard time to wrap my head around this quiz question:
On page load, will mypic.jpg get downloaded by the browser?
#test1 {
display: none;
}
#test2 {
background-image: url('http://www.dumpaday.com/wp-content/uploads/2017/01/random-pictures-116.jpg');
visibility: hidden;
}
<div id="test1">
<span id="test2"></span>
</div>
The answer is no. Why is that? Trying above doesn't load the image. But loading happens when I switch to display: block;
Does that have something with element space to be preserved using hidden visibility?
I am also confused because the previous question says display: none does load the background image although not in this case with a hidden descendant, and this thread talks about browsers are getting smarter and prevent the loads. So where is the truth?
So I found this interesting because I didn't know about that. To conclude the image won't load if the item or one of its parents settings is display: none. Is it because browsers get smarter? I don't think so. I tried the following:
#test1 {
display: none;
}
<div id="test1">
<img src="http://www.dumpaday.com/wp-content/uploads/2017/01/random-pictures-116.jpg"/>
</div>
In the Network tab of the developer-tools you can see that the image gets loaded. So it differs from your example. My thought is that display: none does not draw the element (fact) and so no style will be applied to itself or one of its childs (thought). Basically background-image: url('...'); won't be executed because there is no need in applying the style to this element because it won't draw anyway.
I hope this helped you understand :)
Related
Seems that hiding a element can be done 500 ways. I'm looking what what is best for browser compatibility standards, and possibly even performance...
This is what I wish to hide:
<li class="header-menu-user"><a class="header-user" href="/Settings/User/UserProfile">User Settings</a></li>
What I have tried in the past is for another scenario in which I did a display:none on a li with a data- attribute etc..
I just tried to do this and it is not working (not hiding it)
.header-user {
display: none;
}
There are many ways but one of these two usually is appropriate:
display: none;
Will hide the element, meaning surrounding elements will ignore it as if it were not in the DOM, even though it is and you can still target it.
opacity: 0;
Will essentially make the element transparent, not visible but it still occupies space in various layout models.
You can hide a specific <a> tag like this:
li.header-menu-user a[href^="/Settings"] { display: none; }
With just using CSS Display:none; would be the way to go. The only performance impact this is really having is that you are still sending all the content that is hidden to the client browser. If you want to improve performance perhaps consider removing the content on the server side if that is an option for you.
I've been trying to apply a simple background image to a div. It seems like such a simple problem but after hours of searching through many threads on Stack and other sources, and trying many of the solutions, i'm still looking at an empty div.
I've verified that the asterisk.png file exists and renders when called by itself from an tag.
Here is the HTML
<div class="element"></div>
Here is the CSS
.element{
background-image: url('images/asterisk.png');
background-repeat: repeat-x;
width: 400px;
height: 50px;
}
Im hoping someone can point out the simple error I'm making here ... Thanks!
It should work, check in inspector if any other styles are not added to this element.
Something may make your element display: inline in this case, yes BG will be not visible, change it to display block or inline-block
Fixed it. I was incorrectly linking to the image file. 'images/asterisk.png' vs '../images/asterisk.png'.
My apologies ... I guess I had been staring at the screen for way too long and just needed to rest!
Thanks everyone.
Context: making printable invoices to generate in a browser.
It's common in making printable webpages to use an #media print rule to change the way the content looks for a printed page. Ideally, because I'm printing only a small part of the page, I'd like to hide everything and then display the contents of a particular element.
Structure is something like this:
<body>
<div id="topMenu">...lots of elements...</div>
<div id="sideMenu">...lots more...</div>
<div class="tools">...some tools...</div>
<div class="printing">...some elements I want to print...</div>
<div class="tools">...more stuff I don't want to print...</div>
</body>
Stuff I've tried:
Ideally, I'd like to do something like
body * {
display: none;
}
.printing, .printing * { /* Both parts are needed to make it display */
display: block !important;
}
But this won't work because some elements need to be inline and some need to be block. I've played with some different values for display from MDN and can't find one that easily resets the value to its original. display: initial seems to be treated like inline.
The suggestion in CSS: "display: auto;"? seems to only work for JS.
Of course, it is possible to explicity "hide" the stuff I don't want printed rather than display the stuff I do want, but it seems to me that it should be possible to go the other way.
In this question How to only show certain parts with CSS for Print? suggests body *:not(.printable *) {display:none;} but notes (as backed up on the w3 negation page ) that this is not yet supported.
I note that the w3 draft and the display-outside page seem to recommend using an unknown (to webkit) box-suppress property to preserve the display value while not displaying the element.
My questions:
What is the best way to hide everything and target certain elements for display when they don't all share a common display property?
What exactly does box-suppress do?
Since you specifically tagged this CSS3, try using CSS3!
body>:not(.printing) {
display: none;
}
This should work for the example you gave. I hope it works for your real-world application!
To answer your auxiliary question, as of October 2014, box-suppress is a possible future replacement for display:none that will hopefully make it easier to both hide and remove elements from the flow without worrying about changing its display type (as opposed to visibility still keeps it in the flow, and position:absolute which still keeps it visible). I don't think it's currently supported so I'd stay away from it for now. If you want to know more, see http://w3.org/TR/css-display
You cannot use display for this purpose. See Display HTML child element when parent element is display:none
However, you can use visibility, as long as you use absolute positioning for the hidden content:
body, body * {
visibility: hidden;
position: absolute;
}
.printing, .printing * {
visibility: visible;
position: relative;
}
If you don't use any absolute or fixed elements, you can use an alternative way of hiding elements.
Instead of using display: none to hide your elements, try using:
body * {
position:absolute;
top: -999999px;
left: -999999px;
}
To set it back use:
.printing, .printing * {
position: initial;
/* OR */
position: static;
}
I am going to have to link to an external website as I am having trouble reproducing this issue in JSFiddle.
For some reason accessing my page with an URL fragment corresponding to an ID that exists on the page appears to pull up certain areas of the document, the behaviour is not reproduced with a non-existant ID. There is no JavaScript on the page which could be causing this behaviour.
This behaviour is consistent in the following (so is unlikely to be a browser bug):
Google Chrome 31
Firefox 21
Internet explorer 8
Live view (accessed: 19/12/13) Issue resolved - see graphic below:
This is the page as it should look: http://sixplusfour.co.uk/encyclopedia/
This is the page with the named anchor: http://sixplusfour.co.uk/encyclopedia/#pagelist
The error is shown side by side in the following image:
Does anyone know what could be causing this behaviour?
My guess is that the :after pseudo-class of #pagelist is causing this. I have no clue why this is happening but the display doesn't seems to load properly.
This pseudo-class seems like a quick fix. You might want to delete this pseudo-class and fix the real problem. Try to add a overflow: hidden to your wrapper so its floated contents keeps in the flow:
.col-group {
margin-left: -1em;
margin-right: -1em;
zoom: 1;
overflow: hidden; /*new line*/
}
I can not test it on reload, but this should work.
Update
The real problem is probably because the the base-line is shifting based on its font. It contains a dot as content. Now this is still not clear why this happens when redirecting. However i suggest to you a empty content for this:
.col-group:after {
display: block;
visibility: hidden;
height: 0;
clear: both;
content: ""; /* removed dot */
}
This should work without modifieng too much.
If you set overflow: auto; on #container you start to see why the problem occurs. The contents of #container are actually taller than their container. When the URL fragment is in place, the browsers are scrolling within #container to reach it.
(I haven't yet figured out exactly why, but hopefully this will point you in the right direction.)
It is probably linked to a :focus or :hover selector.
I see this code in your style.css :
.pagenav li a:focus {
outline: #114d74 solid 1px;
outline-offset: -1px;
padding-left: 0.5em;
}
Couldn't this be a different value of padding or outline that makes things change?
It's an easy question and I've done it several times before, but for some reason, it's not working this time. I have an image and when a user hovers it, a description should show.
HTML:
<div class="description custom">
<a class="description_help_text" href="">
<img src="../../misc/help.png">
<span>Bla bla bla.</span>
</a>
</div>
CSS:
div.description a.description_help_text span {
display: none;
}
div.description a.description_help_text a:hover span {
display: block;
}
But for some reason, it's not working. I'm guessing some kind of stupid syntax I'm overlooking right now.
And a second question, is it possible to use a a-tag without linking it? So a user can click on it as much as he wants, but with no actions from the browser?
I think the latter CSS block should be
div.description a.description_help_text:hover span {
display: block;
}
For the links without action I recommend using
link
Your CSS should work fine, so my guess is that you have a parent class somewhere which is affecting it. Try looking through the ascendent styles in Firebug.
Re. your second question, you can supply no href value to an anchor element, but this may still cause the page to jump when the link is clicked, and IIRC it is not valid HTML. An alternative is to link to javascript:void(0);, although this is rather ugly IMO.
The only way to fully prevent any link behaviour is to create a link handler for the element in javascript and place event.preventDefault(); within it.
This seems to work for me: http://jsfiddle.net/qVK6f/
to answer your second question at least, try:
click