display: none; not working twice - html

Alright, I've been working with html/css for nearly a decade now, and for the life of me, I just can't seem to figure out why this won't work.
Initially, I was having trouble getting two separate divs to have display: none along with other properties, on page load. After troubleshooting I ended up with the conclusion that it was something wrong in the bootstrap files, so after over an hour of reducing, I simplified it to the following to remove all possible sources of error:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
#first {
display: none;
}​
#second {
display: none;
}
</style>
</head>
<body>
<div id="first" >abc</div>
<div id="second">123</div>
</body>
</html>
I saved this as test.html and opened it through firefox only to see:
123
I check with 'Inspect element', and sure enough, #first has the property "display: none" but #second doesn't.
I proceeded to check this with chrome and edge and got the same results.
I found that using
#first, #second {
display: none;
}
works as expected. However, I still need to add other properties to #second, thus, thinking myself clever:
#first, #second {
display: none; <!--Awesome!-->
}​
#second {
height: 100px; <!--nope-->
width: 100px; <!--nope-->
}
After much repetition in an effort to get any different result, I ended up trying something that has absolutely no reason to work what-so-ever, but at this point, I stopped caring.
I proceeded to open a new document, type out the entire original <style>...</style> (from first code block above) and copy it from the unsaved document and paste it over the faulty one.
Refreshed the page, saw nothing. Checked Inspect Element, sure enough, everything was there, just with "display: none"
So my question(s) after nearly 3 hours of troubleshooting, are:
What happened?
Why did it happen?
Extra info:
Windows 10 Home 64-bit
Application:
Visual Studio Code


There is a strange character in your CSS, which can be seen when pasting the code into jsfiddle:
Remove that, or paste the CSS below:
#first {
display: none;
}
#second {
display: none;
}
<div id="first">abc</div>
<div id="second">123</div>


I noticed that in your <style>, there are strange characters showing in the Firefox Style Editor, right after the closing } of #first {. I am guessing that this confused the browsers to not process #second at all.
Weird though that these characters (shown as ​ in Firefox) don't show up in my text editor either...
...replacing the line with the } with a newly typed one solved the problem however.


Been there!
I tried your examples by copying/pasting to a JSFiddle and in fact you have extraneous characters after the #first closure bracket.
Just get rid of that char, and you're done. Might be a good idea to check your text editor. I always enable invisible characters while coding, to prevent these type of issues.
What is actually happening is that the browser CSS processor dies after the #first closure bracket, and nothing after that is processed. Thats why #second does not seem to work.
https://jsfiddle.net/sbnyg2ev/
#first {
display: none;
}​ <--- just delete that char, is not a space.
#second {
display: none;
}

Related

Why does `display: none` not load background image?

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 :)

Rails: CSS not showing in inspector and not applying

I've got a weird error and it happens to me regularly.
I am doing some css for a project, and in the middle of it, some CSS just starts not being taken into account.
All the CSS file works fine, it's just one line or one class that just does not work nor appear at all in the inspector (usually when CSS is not working, the class appears but the code not working is crossed).
I've tried everything.
- Disabling the cache in network
- Emptying my cache
- Removing everything in my CSS file to keep just this one class (to make sure there is not a syntax error somewhere)
- Changing the name of the class to make sure it's not conflicting with anything.
- I've also checked in the source and I do see my line of CSS, so it's properly compiled!
When I check the inspector, there is just ZERO code applied for this class. Like it does not exist.
The weirdest thing is that if I change the name of the class, it's still not working. But if I add another class to another line, it does work.
It's just crashing for a particular line. The only way I can make it work, is by adding the CSS directly inlined in my HTML. But I don't want to do that, that's ugly.
It happened to me a lot of time, with different projects for a while.
Sometimes when I try with the exact same code 2 days later, it works. Sometimes not.
I even took a video to reproduce the whole bug because that's so weird, I can't find the solution. I've showed this error to good coder friends and they don't understand either...
Anyone had this before?
Here is the code, just in case
<div class="text-step">
<%= image_tag "pay_icon.png" , height: 40 %>
<h3>Pay by card</h3>
<p>Pay in less than 1 minute</p>
</div>
.text-step {
width: 45vw;
}
And here is what shows in the inspector:
element.style {
}
*, *::before, *::after {
box-sizing: border-box;
}
user agent stylesheet
div {
display: block;
}
Nothing for "text-step"...
EDIT: The CSS is inside a separate CSS file. With 100 lines of CSS in it. Everything works perfectly, except the line I copied.
That's why I was saying that I've tried to remove everything inside this file just to keep the one I copied (to check there is no syntax errors).
Sorry for the confusion I should have been clearer.
SOLVED: Hey. So, I've solved this mystery. That's actually a bit crazy. The space between my classname and my bracket was a non-breaking space. It happens on mac when you press space + alt at the same time. I probably do this without realising it sometimes... Found the solution somewhere online, but it was almost impossible to debug without knowing it as you can't tell the difference with the eye!
Thanks a lot

I'm giving an answer here based on the info you've provided, will edit if more info is given.
If you're using the code like you pasted it, then it doesn't work because it's invalid HTML. In order to have it render correctly it needs to be:
<style type="text/css">
.text-step {
width: 45vw;
color: red;
}
</style>
<div class="text-step">
<!-- commenting the below since it's not HTML -->
<!-- <%= image_tag "pay_icon.png" , height: 40 %> -->
<h3>Pay by card</h3>
<p>Pay in less than 1 minute</p>
</div>
Something every dev learns is that the machine is never wrong. If you think the browser is playing tricks on you, it isn't. Browsers are battle-tested, especially for simple tasks such as parsing HTML and CSS, the problem will be with your code.
to make sure there is not a syntax error somewhere
When you want to test this sort of weird behavior, the best way to do it is to run an "independent" test. Open up something like jsBin or Codepen and add the code that is giving you trouble. That way you can test the code itself without and discard other possible issues (your compiler, the site you're using, your caching system, God knows what else).

Try to use like this way :
<style>
.text-step {
width: 45vw;
}
</style>
<div class="text-step">
<img src="pay_icon.png" style="height: 40%">
<h3>Pay by card</h3>
<p>Pay in less than 1 minute</p>
</div>

SOLVED: Hey. So, I've solved this mystery. That's actually a bit crazy. The space between my classname and my bracket was a non-breaking space. It happens on mac when you press space + alt at the same time. I probably do this without realising it sometimes... Found the solution somewhere online, but it was almost impossible to debug without knowing it as you can't tell the difference with the eye!

You can use this code
body {
margin: 0;
padding: 0;
}
*, *::before, *::after {
box-sizing: border-box;
}
div {
display: block;
margin: 0 auto;
}
.text-step {
width: 45vw;
background-color: #dddddd;
padding: 15px;
}
<div>
<div class="text-step">
<%= image_tag "pay_icon.png", height: 40 %>
<h3>Pay by card</h3>
<p>Pay in less than 1 minute</p>
</div>
</div>

Why did my <h1> disappear?

I was editing my styles.css on a WordPress site to remove the title on a particular page. To do this I used the following code:
.post-name .entry-title { display: none; }
This removed the title like I expected. I then enter the following code to remove a border that was after the header:
.post-name .entry-header::after { border-bottom: none; }
This bit of code didn't work. I then removed both pieces of code that I added to try and start from scratch. Now when I view the page, my title is still missing, but the bottom border stayed. I tried clearing my browser's cached images and files, but that didn't work.
What could have caused the title to be permanently missing and why didn't the second bit of code work (I also check my specificity and the above ::after code took priority)?
Thank you!

that is odd.
try making it re-appear by
.post-name .entry-title { display: block; }

URL fragment messes up CSS

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?

HTML5 div styles not working

My page (which uses HTML5) works fine with no doctype but when I add the HTML5 doctype then the styles on the <div>s don't seem to work (specifically, one <div> which is supposed to be aligned 20 pixels from the left isn't aligning... another <div> which is supposed to have a height of 90% reverts to the default height... and another <div> which I've changed the line spacing and character spacing seems to use the default line spacing and character spacing). Styles on the <span>s work just fine though... it only seems to be the <div>s that have the problem. I've changed <div> to <section>... still doesn't work. I've tried inline styles, then switched to a style sheet... neither way seems to work. I threw in some display:block; (not sure what that does) but it didn't seem to do anything.
And by the way, nothing's wrong with the code. I ran it through a validator and it's got no errors at all.

You have an error in your CSS
.indented {
display: block;
left: 20;
position: relative;
}
Should be:
.indented {
display: block;
left: 20px;
position: relative;
}
Note that you must specify a unit value for the value of 20 - otherwise it may be ignored (which is what is causing your problem!)