Apparantly IE11 doesn't have a User Agent Style for <main> and therefor no display: block; on it. Why is there no User Agent Style? Is this a bug or on purpose?
Adding display: block; to the main element is enough, tho.
The main element is indeed not fully supported by IE11. Adding main { display: block; } to your CSS is the best solution for IE9+. You don't need to make conditional comments - since display: block; is the default behavior for main elements, it won't mess up anything.
Related
I have a div within a webpage I am trying to target with the following code to create a flexbox:
div.my-div-class {
display: flex;
flex-wrap: wrap;
}
div.my-div-class > label {
fl
Originally I had a problem with the User Agent Styles overriding the div and causing it to automatically display block. I fix that per this question by adding the following code:
div {
display: inherit;
}
Which I assumed, perhaps naively, that this would cause the div to "inherit" the styles of what I set to the class.
I check the console, and sure enough see:
div { display: inherit; }
instead of what was there before for the User Agent which was:
div {display: block;}
Which is what I assumed was messing with my style originally.
I tried !important to see if that would at least cause a change and it didn't.
So I'm thinking I don't fully understand the behavior of inherit or how to target this particular div correctly.
Can someone explain this a little bit? I should mention this div is wrapped in a form, and the HTML of that form is like below:
<div id="form-container">
<form id="form">
<div class="my-div-class" id ="the-target-div">
/*Rest of the HTML*/
</div>
</form></div>
Generally you don't really need to target the div tag, you should instead use a class.
If you are creating your own CSS and not using some library, such as bootstrap, it's a good idea to use a CSS reset to make sure you are writing CSS on a clean slate. This is a popular one.
To answer your question, the inherit property sets a css property to inherit the value from its parent. A div tag by default is a block level element, so setting anything to inherit below it will also set it to display: block.
Just target whatever you need to be flex with the class name, such as:
.my-div-class {
display: flex
}
It seems that you didn't copy all of your html code, cos it looks like it's broken in the middle.
If you want to target this particular div you should do it by refering to it's class or id. Property value "inherit" inherits ONLY the property from its parent element that it is set as a value to.
For example:
.parentElement {
display: flex;
background: yellow;
height: 200px;
width: 100%;
}
.childElement {
display: flex;
height: 100px;
width: 70%;
background: blue;
}
.childElement:hover {
height: inherit;
}
<div class="parentElement">
<div class="childElement">
</div>
</div>
In this example when we hover over the child element we are setting height value to "inherit" which inherits the value ONLY for height property, but the width for example doesn't change.
In short: if you want your div to inherit all styles his parents has you should set "inherit" as a value for every property it's parent has.
I have this style inside a PHP file that is applied to an Element
line-height: 120px;
display: list-item;
display: -moz-inline;
list-style: none;
I want that if browser is Chrome then display:list-item and if it is Mozilla then display: inline
The above style works well in Chrome, but in Mozilla it is applied as display: list-item
How to apply specific CSS rules to Chrome only?
Here's a bunch of methods, that actually can help you. Just set style for mozilla and then overwrite it by the Chrome hack. But abstracting from that solution: maybe show us some bigger part of code (or even jsfiddle) so we can help you style it properly without any hacks.
On a page I am having a webkit scrollbar which has been hidden using display: none css property.
#element::-webkit-scrollbar {
display: none;
}
In one of my app level css files I tried to override the above css rule, but I wasn't able to display the scrollbar
I tried changing the css but I couldn't the get exact scrollbar which would have been there if display: none property was not present.
#element::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
display: block;
}
#element::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
The above css made the scroll bar visible but it gave me ugly scroll bar (probably due the css rules I have used).
Is there a simple way in which I can display the webkit scrollbar which would been there if the display:none property was not present.
I can not change the display:none as it is being inherited by my app.
I can only over-ride that rule.
EDIT:
An exactly similar question was asked How to override "::-webkit-scrollbar" CSS rule and make scrollbar visible again, but it seems that also doesn't have an accepted answer.
Edit: Does not seem to work, as pointed out in the comments.
I was able to restore the scrollbars using
#element::-webkit-scrollbar {
display: unset;
}
If the display:none is what it's hiding it why don't you just overwrite the display instead of adding that other properties?
Try overwriting the display with the different values it can has:
https://developer.mozilla.org/en-US/docs/Web/CSS/display
you can do something like this
*:not(.excluded-element)::-webkit-scrollbar { display: none; }
reads as: apply it to everything except the .excluded-element
Using a GWT web app, Firebug says that the following HTML
<table class="drop-zone drop-zone-column-66 multi-zone">
...
</table>
is using this CSS.
.maximized-gadget .drop-zone.multi-zone, .configure-tab a {
display: block;
}
What CSS do I need to write so that this <table> will have style, display: none?
I made 2 attempts: [EDIT - updated .multi-zone and display:none]
.drop-zone .drop-zone-column-66 .multi-zone {
display: none;
}
and
.maximized-gadget .drop-zone.multi-zone, .configure-tab a {
display: none;
}
but Firebug still gives me the CSS shown at the top.
Please advise me.
Strictly speaking, all you should need is:
.maximized-gadget .drop-zone.multi-zone {
display: none;
}
provided that that rule comes after the original rule you gave above:
.maximized-gadget .drop-zone.multi-zone, .configure-tab a {
display: block;
}
Depending on what the structure of the rest of your document is and what you're trying to do, you may need to add some specificity to that rule.
The problem with your first attempt is that your rule would apply to an element with a class of multi-zone which is a descendant of an element of class drop-zone-column-66, which in turn is a descendant of an element of class drop-zone. What you want is to target an element that has all three of those classes set on it, which you can do by chaining those selectors:
.drop-zone.drop-zone-column-66.multi-zone {
display: none;
}
which should set you right (though if I remember correctly this won't work in older versions of IE).
Can I make DIV tag function as SPAN tag? i.e., removing line-break before and after the DIV tag.
Yes, use CSS
display: inline
DIVs are block level elements which means they have a default display:block - give it display:inline (which SPANs have) to override this. Please be a good programmer and do this with CSS not inline styles :)
As others have said, generally you can use display: inline; but beware of the beast...
Make sure you're aware of differences between browsers on display: inline; and display: inline-block; and when you might want to use which:
http://www.brunildo.org/test/InlineBlockLayout.html
http://www.brunildo.org/test/inline-block.html