I'm chucking together a quick splash page for users visiting my website in IE8 or below. I'm using Modernizr's .lt-IE9 class to target the document, then using this CSS (with the help of SASS) to hide my main content and show an 'IE-Warning'.
.lt-ie9 {
body {
background:none;
}
.container {
display:none;
}
footer {
display:none;
}
.ie-warning {
display:block;
text-align:center;
}
}
Everything is working except for the display:none; on the footer element, which is of course a HTML5 element. I'm at a loss as to why it won't hide, it's not showing in the inspector or being overwritten by anything else.
Related
I am new to HTML, CSS and Javascript. I am learning things. WHile learning, I came to a problem how to print only a textarea from HTMl while printing using CSS only.
#media print {
* { /* the asterix denotes every element */
/* belt and braces */
display:none;
visibility:hidden;
height:0;
overflow:hidden;
}
textarea {
display:block;
visibility:visible;
height:inherit;
overflow:visible;
}
}
Could someone just give a run down? Like if you had buttons and images, and a footer or something? Does it all go into one Media Query or is it separated? I'm very confused.
Just as #Berdesdan said, Media queries set up specific styling so that your website can relate to screen sizes, etc.
For me, it depends on how long the classes in each section of my Style Sheet is. I usually have lots of classes for my header, footer and other section of my site. So I just add a Media Query under each section of my CSS. For instant;
/* Header Styles */
.header { width:100%; }
.header ul { }
.header ul li { }
.header ul li a {}
#media (min-width:768px){
.header { width:80%; }
}
/* Footer Styles */
.footer { width:100%; }
.footer ul { }
.footer ul li { }
.footer ul li a {}
#media (min-width:768px){
.footer { width:80%; }
}
In this way, I can edit each section and their media query together, one after another. Basically, you can have as many media queries in your CSS file as you want. No limit.
I hope this explains. Try checking out resources in the w3schools.com link and other resources on Media Queries.
Media queries set up specific css rules at certain 'flags'.
They can be related to the screen, to set up specific css rules when some-one prints a document, or for screenreaders.
Read more on the following links.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://www.w3schools.com/css/css3_mediaqueries.asp
Here is the JsFiddle
I have a css rule depending on the display status of a neighbor:
#top:not([style*="display: none"]) + #bottom {
color:red;
}
When I hide the '#top' div using javascript, the color changes since the css rule is no longer valid.
This is not the case in Internet Explorer and Edge ! Am I doing something wrong or is this just a bug in Microsofts browsers ?
I would avoid that approach, as it's somewhat fragile. Instead, explicitly toggle a class on a parent element or #top, and make your CSS changes based on that:
body.toggled #bottom {
color:red;
}
body.toggled #top {
display: none;
}
$("#btn").click(function() {
$('body').toggleClass('toggled');
});
Demo
look at this fiddle. I want that anchor will change its background-color when I click on the parent div. It works only if I click beside anchor. But if I moove cursor on the anchor and then click, nothing happens. It only works fine in firefox and chrome.
<div class="test">
link me
</div>
.test
{
background:Gray;
}
.test:active a
{
background:Red;
}
For consistency around all browsers i would put the active pseudo on the anchor tag instead.
.test a {
background:Gray;
display:block;
}
.test a:active {
background:Red;
}
See Fiddle
some class and pseudo not support by Opera try in this way, may this solve your problem.
.test
{
background:Gray;
}
.test:active a
{
background:Red;
}
.test a:active
{
background:Red;
}
I'm familiar with the :hover psuedo class and using it for elements as well as the typical link setup we're all used to. What I am trying to do however is create a situation where hover over one element would change properties of another. For instance if I were to hover over .block1, #block2 would become visible. I would think the .css would look like something this...
.block1:hover div#block2
{
visibility:visible;
}
but that's getting me nowhere. Thoughts? I know that I could probably use javascript to make this happen (make elements appear and disappear) but I would love to find a pure css solution to this.
The element you want to change has to be a child element of the one you are hovering over.
Example CSS:
#navButton div.text {
display:none;
}
#navButton:hover div.text {
display:block;
}
This will make the text div display if you hover over the element with id="navButton".
Otherwise, use a JQuery solution:
CSS:
#navButton div.text {
display:none;
}
.hover {
display:block;
}
Javascript:
$("#navButton").hover(
function () {
$("#navButton div.text").addClass("hover");
},
function () {
$("#navButton div.text").removeClass("hover");
}
);
Edit:
You can also do this for sibling elements in CSS if the hovered element precedes the element you want to modify. Like so:
#navButton + div.text {
display:none;
}
#navButton:hover + div.text {
display:block;
}
OR
#navButton ~ div.text {
display:none;
}
#navButton:hover ~ div.text {
display:block;
}
If that second element is a descendent of the first, then it will work.
jsFiddle.