In the following fiddle, I am trying to find out why the div where the checkbox is placed is bigger than the content itself (which is only the image of an empty checkbox). I am trying to accomplish the same as seen on the fiddler but without the overlapping of the white background over the border of the underlying .
I think the problem is related to this css style:
.selectable-content label:after {
background: white;
color: #9fc5e8;
content:"\f096";
position:absolute;
}
You'll have to play with some of the bottom values in your media queries, but your white background was due to default line-height on the label.
http://jsfiddle.net/xtm9D/11/
Added:
.selectable-content > label {
padding-top: -5px;
font-family:'FontAwesome';
font-size: 32px;
cursor: pointer;
line-height:26px;
}
Messed around with your media queries as well.
The element created by :after contains the character, but also has a white background. As this element later in the DOM and positioned at the bottom-right of its parent, it will overlap the background.
This could be fixed by creating a translucent picture of the actual image, and removing the white color from the CSS.
Try setting the line-height. When I add the line
line-height: 31px
to
.selectable-content > label {...
the problem is resolved. I initially set line-height: 32px, but there was still a pixel of white. You are going to need to find a consistent way to position the element and set the line-height in relation to the checkmark character to resolve the overflow.
Related
According to MDN, outline should work on the ::selection pseudoelement, yet it doesn't seem to when tested on both chrome and ff.
::selection {
background-color:red;
outline:2px dashed blue;
}
My cool text, select me!
I'm creating a text editor and basically it just annoys me how tight fitting the selection background color is. I want to expand it a few pixels and outline would be the right attribute for the job but it doesn't work?
I think the MDN is wrong or not updated, because if we refer to the specification:
The highlight pseudo-elements can only be styled by a limited set of properties that do not affect layout. The following properties apply to the highlight pseudo-elements:
color
background-color
cursor
caret-color
text-decoration and its associated properties
text-shadow
stroke-color, fill-color, and stroke-width
The outline isn't listed which explain why it's not working. Also I don't think you can control the hightlighting area. As explained in the same specification:
For text, the corresponding overlay must cover at least the entire em box and may extend further above/below the em box to the line box edges. Spacing between two characters may also be part of the overlay area, in which case it belongs to the innermost element that contains both characters and is selected when both characters are selected.
We already have the em box which is trivial and your best luck is to have more in case the line box is higher but it will not behave the same cross browser.
Here is a basic example where I use a pseudo element with a big font-size to increase the height of the line-box and I align it in the middle. In this case the selection will cover more than the text but of course this will also affect the layout which is probably not needed and will not work with all the browser.
The below example works on Chrome and doesn't on Fiferfox
p:after {
content: "";
font-size: 30px;
vertical-align: middle;
}
p::selection {
background-color: red;
}
<p>My cool text, select me!</p>
Another important thing is that all the properties applied inside that area cannot overflow it. We know that with text-shadow we can place the shadow far from the text but with the selection it won't be possible because it cannot overflow the hightlighting area:
p {
text-shadow:0 10px 0 red;
}
p::selection {
background-color: red;
text-shadow:0 -10px 0 blue;
}
<p>My cool text, select me!</p>
Notice how the blue text-shadow is partially visible like we have applied overflow:hidden to the red area. So even if you are able to style the selection with outline it's basically impossible to control its dimension which is what you need here.
I think your best option is to rely on JS to create dynamic element or wrap selected text to easily style them. With the CSS, you can only apply some hack that will affect your layout.
Outside the first line, the other line is valid with line-height. As you can see:
div {
line-height:30px;
}
div::selection {
background: yellow;
}
<div>text<br />text<br />text</div>
So, I did a Javascript trick that added the first line for us. I'm also giving font-size: 0px for the first line. So our problem is solved. As you can see:
let a = document.querySelectorAll(".a");
a.forEach(function(par){
par.insertAdjacentHTML('afterbegin','needed text<br />')
})
// for an unseen first line.
.a {
line-height:50px;
}
.a::selection {
background: yellow;
}
.a::first-line {
font-size:0px;
line-height:0px;
}
<div class="a">text</div>
I have been researching and working so hard to fix such a strange problem. I have a div that is supposed to hold some text. This div should be able to resize with that text, so that if there are two lines of text the div gets taller, etc. All that seems to work fine, but for some reason there's some sort of padding added to the top of the text and to the bottom of the text. I can't find what is causing that padding, and I really want to make the div fit the text more compactly. Here is an image of what i'm talking about:
http://i.imgur.com/ZblaLJX.png
The light blue box should be shorter in height so it fits the text more closely. Here is my CSS code for this div:
.captionCSS {
max-width:70%;
margin-top:10px;
margin-bottom:20px;
padding-left:5px;
padding-right:5px;
padding-top:0px;
padding-bottom:0;
background-color:#aef7f8;
overflow:hidden;
color:black;
}
I have messed around with all of the margins and paddings, setting them to zero and then setting them back again and nothing seems to work. The line height is inherited from another div and is 18px, while the font size is 12px, and i tried decreasing the line height but it didn't have any effect on the top and bottom padding/gap.
Also, when the text takes up two lines, it get a bit worse in that there is an extra bit of padding on the side, which i want to get rid of:
http://i.imgur.com/Ecdxdtq.png
So yeah, that's my issue. Ideally I would like a 5px gap from the edge of the div to the top of the text, so if there is anyway to do that please let me know! Thanks so much for your help!
You might try the following.
If your code looks similar to this:
<p>Some text with <span class="captionCSS">highlighted text</span>.</p>
apply the following CSS rules:
p {
background-color: gray;
padding: 5px;
}
.captionCSS {
max-width:70%;
padding: 0 5px;
background-color:#aef7f8;
display: inline-block;
line-height: 1.00;
}
If you set display: inline-block to the caption wrapper, then the line height value will have some effect.
line-height: 1.00 forces the line height to be the same size as the font-size for the element. If you set the value to be less than 1, you will get a tighter fit but you may also clip ascenders and descenders of certain characters depending on the font.
See demo at: http://jsfiddle.net/audetwebdesign/2cyaF/
Without the HTML I can't be sure, but my first guess is that the text has a parent block level element that already has styling rules. (ex: <hX> or <p>)
You can clear those styles through css by doing something like this:
h1,h2,h3,p{
padding:0;
margin:0;
}
Here are some example cases using your style: http://jsfiddle.net/JTrWL/
I want to use background image and color for the same element
but id doens't work even I use the css like this question
here's my css
http://jsfiddle.net/xdkwB/
Your CSS is working correctly, both the image and background colour sit within the one container so because they're the same colour, you can't actually see the arrow.
The best way to solve this is to use an outer div that wraps your header element, like so:
<div class="outer"><h1></h1></div>
And then style with appropriate CSS:
div {
float: right;
width: 198px;
background-image:url(http://s14.postimage.org/nitv9x7ct/top_Arrow.png);
background-position: 0px;
background-repeat: no-repeat;
margin-top:21px;
}
h1{
color:white;
font-size: 170%;
font-weight: normal;
font-family: arial;
width:189px;
height:33px;
line-height: 33px;
background-color: #b21f23;
float:right;
}
So to clarify, the outer div is slightly larger and contains the background image aligned to the left and then the header fills all remaining space with the background colour.
I don't think you can get your desired result with just one element styling.
You would either need to have the background-image outside of the element, which is not possible.
Or you would need the background-color to not fill all of the element, which is also not possible
The best option IMO, would be to have two elements with a background-image in the first, and background-color in the second
http://jsfiddle.net/xdkwB/11/
Example with text:
http://jsfiddle.net/xdkwB/13/
Example floated right:
http://jsfiddle.net/xdkwB/14/
try this
background: url(http://s14.postimage.org/nitv9x7ct/top_Arrow.png) no-repeat left center #b21f23;
this will add the background image and everything else will be your background color
You've set the background colour to the same colour as the image. So it's there, you just can't see it because it blends in.
You're arrow is the same color as te background. You can positioning the background with background-position and with a negative left value it become outside the box:
I have been struggling to find out why this rollover is not behaving as it should in IE8.
Go here: http://baked-beans.tv in IE8, you'll see that the rollover only works on the lower half of the thumbnails.
Btw, this is not activated by an <a> tag but by a :hover for the <div>.
What I can't figure out is why it works on only the lower half of the div, below the image, but not on the image (the image is not z-indexed so thats not the issue)
As soon as I change the background-color to anything else besides transparent, it works 100%. So this just blows my mind... why the bottom half, but not the top half, and only when I set bg-color to transparent?! Gotta love Internet Explorer.
This works as it should on every other browser (the entire square acts as a rollover)
Here's the CSS:
.cat_rollout {
position: absolute;
float:left;
top:0;
left:0;
min-height:274px;
min-width:274px;
font-size: 0;
background-color: transparent;
}
.cat_rollout:hover {
background-image: url(images/rollover.png);
min-width:254px;
min-height:242px;
padding-left: 20px;
color: white;
font-size: 21px;
font-weight: normal;
line-height: 24px;
padding-top: 34px;
}
Try faking a background image or setting it to a blank.gif instead of making it transparent.
background:url(blank.gif);
See http://work.arounds.org/issue/22/positioned-anchor-not-clickable-ie6/
The problem is that for some time (a week? two weeks?) IE has changed the way it interprets background-color. It seems that you cannot say, that the color is transparent, rather the whole background. So you should change background-color: transparent into background: transparent. Very nasty.
The same problem has been witnessed, where hovering on a transparent element's blank area doesn't make css rules related to hover take effects. The problem is fixed with giving the element the following style.
background-color: rgba(0, 0, 0, 0.001);
You could also try changing the hover selector to :
.thumb_container:hover .cat_rollout {...}
so that the parent containment div is the element reacting to the hover.
You can use an 1x1 transparent gif as a datauri if you'd rather.
background-image:url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);
Up to you which one you'd prefer, this works and is an alternative to the selected answer.
I'm having a strange issue with some #font-face text where there is some strange padding (or at least vertical space) included with the text. It is causing problems because I want to text to be positioned a certain way but can't have it overlapping other things. Here is a picture of what is occurring:
As you can see when the text is selected, the text overlaps some of the navigation bar above it. I have tried adjusting the line height and padding, margins, anything I can think of. Here is the relevant CSS, does anybody have a suggestion as to how I can get the height of the line to be around the height of the actual text.
*{ margin: 0; padding: 0; }
h1#logo { font: 350px/.95 'Bebas Neue'; color: #DDD; text-align: center; margin: 1px 0; }
EDIT: Here is a live example of the problem: http://codezroz.com/stuff/hello.html
never seen the /.95 syntax before, but after a few tests now i belive it works like:
line-height = 0.95 * font-size = 332.5
so i think that's your problem, the font is taller than the line
adding overflow: hidden; on the H1 should be enough
Well, applying overflow: hidden to h1#logo stopped the selection highlight from bleeding into areas that were outside the element.
Also remember that you can use the :selection pseudo-element to change the color of the selected text.