I want to modify the margin of paper-card elements, so I simply created a style html file. here's the relevant code:
paper-card {
max-width: 400px;
vertical-align: top;
margin: 10px;
--paper-card-header-color: var(--paper-pink-a200);
}
Both header color and vertical-align are being applied properly, but margin and max-width are being ignored (Chrome dev console says that these values have been overriden for some reason).
What am I doing wrong?
You need to use the --paper-card mixin to apply the style like below
.with-margin {
--paper-card:{
margin: 10px;
}
}
<paper-card class="with-margin"></paper-card>
Working jsbin: http://jsbin.com/xoxewe/edit?html,output
Related
While I was writing a css for a website, I found that some portions of my css did not work as intended. What happened was that within a selector with the highest specificity, when I tried to adjust the width or margins of an element, it did not change. However, within the same selector, other properties could be adjusted without problem.
e.g.:- take this selector
.get-touch {
text-decoration: none;
margin: auto;
margin-top: 35px;
color: #fff;
width: 200px;
}
This is applied to a button, and I wanted to increase its width.
Even if I change the width to 500px, the width will not change whatsoever. However. any modifications to other properties will be reflected on the browser.
Here, I have attached the file to my particular css file which brings the problem:- https://drive.google.com/open?id=0B1CjX_FVqdRjWGRkS3NLOG9tTEE
How can this occur, and what can I do to prevent such problems?
.get-touch {
display: inline-block; /* Add this */
text-decoration: none;
margin: auto;
margin-top: 35px;
color: #fff;
width: 200px;
}
As you have mentioned that the button size is not changing even after giving it width, it means you are applying your CSS on an inline element and thus the browser can't render its box-model.
Adding a display:inline-block property will make it work.
I am trying to create a header for a website where the title of the site is displayed over an image. I set it up to use a div class element with a background image. However, I can't figure out why the background image in this div class element I created is not displaying.
After inspection I've found out that the css style rules associated with the div class element are being stripped of the element when I render it (in Firefox and Chrome, haven't tried IE).
I have the css setup like this:
.text-over-image {
width: 960px;
height: 100px;
background-image: url("http://www.lupenet.org/wp-content/themes/Lupenet/images/header.jpg");
margin-left: auto ;
margin-right: auto ;
}
h8 {
position: absolute;
top: 20px;
left: 400px;
width: 960px;
}
h8 span {
color: black;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
padding: 10px;
}
h8 span.spacer1 {
padding:0 5px;
}
And the html looks like this:
<div class="text-over-image;" >
<h8><span style="position:absolute;">La Unión Del Pueblo Entero<span class='spacer1'></span>
<br><span class='spacer1'></span>"Celebrando el Pasado y Viendo Hacia el Futuro"</span></h8>
</div>
After realizing there was a problem, I set the height and width attributes of the element .text-over-image in case the div was just being rendered too small to view the image, but the background image still didn't display. When I inspected the element using firebug, I found out the div element .text-over-image does not show any background image attribution at all. In fact, all css style rules are stripped from that div element.
I even tried copying the css and html of another website that does exactly what I'm trying to do, but when I do it, the same thing happens (style rules are stripped from that div element). However, the css style rules are not stripped from the other elements.
Remove the ; from your class:
<div class="text-over-image;">
It should be just <div class="text-over-image">
jsFiddle example
I read your css and after that I just came to this point! There is no legal h8 element in HTML.
So I guess the issue is the usage of h8, try replacing it with h6.
My question is: is this a bug or intended behavior, should I report this on the bugtrackers for the browsers, or simply find a css fix?
Here is a fiddle with the minimum amount of code needed to reproduce this behavior: http://jsfiddle.net/tjVvp/8/
I have tested this in Firefox and Chromium. The issue relies on the combination of the <p> element and the fieldset css code:
fieldset {
padding: 0;
margin: 0;
border: 0;
}
If <p> is removed, the issue does not appear. In that case, the page is rendered identical in both Firefox and Chromium.
If the <p> element is present, but without the CSS code for the fieldset element, both Firefox and Chromium will render the page identically.
They need to be both present at the same time, or the issue does not occur.
If the css code for the fieldset element is present, that is when the pages are rendered differently, as can be seen in the fiddle.
It gets even more complicated: the issue only occurs when all 3(margin, padding and border) are set to a value. If you remove one of the declarations, the browsers will render the pages identically. It doesn't matter which combination is left, only when all 3 properties are declared will the difference occur. And then only if the <p> element is present.
So, repeating my question from the top of this text: is this a bug or intended behavior, should I report this on the bugtrackers for the browsers, or simply find a css fix?
I think what you're referring to might be the default margin of <p>. If you inspect the <p> tag you can see the margins on either side:
Also note that the margin on the top is being applied not to <p> itself to one of its ancestors, this is called margin collapsing.
References
CSS 2.1 Spec - Collapsing margins
Try this one, I try it on fiddle and it's working fine.
fieldset, p, label {
padding: 0;
margin: 0;
border: 0;
}
header {
display: block;
width: 100%;
height: 40px;
background-color: red;
}
legend {
margin: 2px 0px;
padding:0px 10px 0 0;
float: left;
}
I'm trying to have a block-level input-append, where the input bar takes up all the space other than the button.
I got this working with a <button> or <span>, but once I switched the tag to an <input>, I started having styling issues again. However, the <input> tag is required.
I've include a Fiddle - HERE
I got it to work by doing this:
.input-append {
display: table;
width: 100%;
}
.add-on {
display: table-cell;
height: auto !important;
}
.input-bar {
display: table-cell;
width: 100%;
border-right-style: None;
}
.well{
padding-right: 58px;
}
I removed the nested selectors as you can't do that in regular CSS. (With Sass and LESS you can though).
I added "height: auto !important" to the ".add-on" selector. Although it's generally regarded not best practice to use "!important".
I added padding-right to the well of 58px which is the width of the GO! button, 39px, plus the well padding of 19px.
Edit: As #nicefinly pointed out, the height of the GO! button was still off. In Chrome I didn't see anything wrong, but in Firefox I could definitely see the height problem.
So, with all of his changes, I would also add that when modifying the well and add-on classes for example, this would change all the places where those standard Bootstrap classes are used and this is probably not want you want.
Instead, I would create separate classes for all of these custom classes so they work in this specific case and elsewhere it works as intended. For example, "add-on-button", "well-with-button", etc.
#CoderDave pointed me in the right direction with his suggestion - JSFiddle of #CoderDave's answer
However, I then noticed that the height was somewhat off. Instead, I set the button height manually - JSFiddle of my workaround
.input-append {
display: table;
width: 100%;
}
.add-on {
display: table-cell;
height: 30px !important;
}
.input-bar {
display: table-cell;
width: 100%;
border-right-style: None;
}
.well{
padding-right: 58px;
}
BUT THEN...
Testing in Chrome gave me strange results (not necessarily in the fiddle, but in my local environment). Therefore, instead of padding, I used the margin-left and margin-right where
margin-left = 17px on the input .add-on
and
margin-right = -55px on the .input-bar
However... After that, I noticed that the z-index was causing the .input-bar to block out the GO! button when the bar was in focus (i.e. I clicked into it).
Therefore, I set z-index
z-index: -1 for the well
z-index: 1 for the .input-bar
z-index: 2 for the .add-on
FINAL JSFIDDLE HERE!
This seems like a pretty hacky solution. If anyone has a better solution, please share.
I have a container with two basic elements. A header and the body. In the header div I want a 50px by 50px image and a user name next to it, but I can't seem to get the username to display inline. What am I doing wrong? http://jsfiddle.net/FqW9d/14/
Add a float: left to both elements. Like:
#story-teller-head-contain img{
float: left;
/* your other styling */
}
#story-teller-head-contain h1 {
float: left;
/* your other styling */
}
Add a float left to the image and the div containing the name, I have updated your jsFiddle here http://jsfiddle.net/FqW9d/15/
can you use inline-block instead inline for the div with username or float bot img and `div.
Demo with inline-block: http://jsfiddle.net/FqW9d/16/
Demo with float: http://jsfiddle.net/FqW9d/17/
Inline display can be a bit of a pain. The cross browser way to do it is like this..
/* Older version of FF */
display: -moz-inline-stack;
/* newer versions of FF and Webkit */
display: inline-block;
/* trigger the correct behaviour in IE */
zoom:1;
/* IE */
*display: inline;
You need to declare the style sin that order.
As everyone else is saying make the image and persons name float: left;
http://jsfiddle.net/FqW9d/20/
By the way, i really like the set up you did here. So i messed with your source some:
http://jsfiddle.net/FqW9d/22/
You've got the following structure (I've added an image url so we can see that element):
<div id="story-teller-head-contain">
<img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG"/>
<div id="client-name">
<h1> Matt Morris </h1>
</div>
</div>
The div elements and h1 are all block-level elements by default. However, all you need to do is float: left the img and #client-name elements, and they will flow left to their width (which you declare), without forcing the next element to flow beneath.
#story-teller-head-contain img {
float: left;
height: 50px;
width: 50px;
}
#client-name {
float: left;
height: 50px;
width: 200px;
}
#story-teller-head-contain h1 {
margin: 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: 'helvetica neue', arial, sans-serif;
font-size: 12px;
color: #3B5998;
}
http://jsfiddle.net/FqW9d/21/
So you're not really looking for display: inline, which will attempt to display the element's as "inline text" is displayed (such as this paragraph text); what you want is for the img and #client-name elements to not "force clear after". Your display: inline is what is allowing the h1, which is a block-level element, to disrupt your display, since it is overriding the display: inline of the parent element.
In fact, if you inspect with Firebug or Chrome Console, you'll see the above computes as float: left and display: block, even though display: block has not been explicitly declared.
See:
http://www.w3.org/TR/CSS2/visuren.html#floats
http://www.alistapart.com/articles/css-floats-101/
http://www.quirksmode.org/css/clearing.html
http://css-tricks.com/all-about-floats/
I feel its better to use -
img{
float:left;
}
#client-name{
display: table-cell;
zoom:1;/*For IE only*/
}
You don't have to specify widths like in float method. It will automatically accommodate text with varying length.
I have updated your code - http://jsfiddle.net/FqW9d/27/
But I think your structure & css could be much more simpler. Since I don't know about the purpose, left it untouched.