I have a pre element with the following styles:
pre {
background: #555;
background-image: -webkit-linear-gradient(#555 50%, #505050 50%);
background-image: -moz-linear-gradient(#555 50%, #505050 50%);
background-image: -ms-linear-gradient(#555 50%, #505050 50%);
background-image: -o-linear-gradient(#555 50%, #505050 50%);
background-image: linear-gradient(#555 50%, #505050 50%);
background-position: 0 0;
background-repeat: repeat;
background-size: 4.5em 4.5em;
color: #fff;
font-size: .8em;
line-height: 2.25;
margin: 0 -2.25em 2.25em;
overflow: auto;
padding: 2.25em;
}
Why, when scrolling the pre element, is the right padding being ignored? I don't want long lines to wrap, I want this behavior (it is not expected behaviour based on the specification, but seems to work in webkit): http://jsfiddle.net/joshnh/Ly5kz/
Here is a link to a live example: http://joshnh.com/2012/08/14/making-a-pure-css-featured-image-slider/#step1
That's not quite how padding works. If your content is being forced past the edge of the box it will continue on without being covered by the background. Padding is room around the inner section of the box. All text that fits in the box will have x amount of space between it and the box edge.
In order to have a padding-like matte/box/border you'll need to have a wrapper div that has the border and padding and add your other styles to the pre.
http://jsfiddle.net/ktJ3g/
pre elements are white-space:nowrap by default, you need to set some sort of wrap attribute. Here are your options: http://www.w3schools.com/cssref/pr_text_white-space.asp
Try white-space: pre-wrap; - Also, I think your kind of abusing the lang attribute by using it to identify the content as containing html or css. I believe it should be used to indicate the language encoding of the content, i.e. en_US, fr_FR, etc
A note for prism.js-based <pre> elements:
You can use the normalize-whitespace plugin:
import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
https://prismjs.com/plugins/normalize-whitespace/
https://github.com/PrismJS/prism/tree/master/plugins
Related
I have some rules for my div "Border" It works in all other browsers but not in IE 10.
Anybody have any idea why this could be happening?
Thank you.
.border {
background: white;
border: 8px solid transparent;
-moz-border-image: -moz-linear-gradient(top left, white 50%, #3a4ed5 100%);
-webkit-border-image: -webkit-linear-gradient(top left, white 50%, #3a4ed5 100%);
border-image: linear-gradient(to bottom right, white 50%, #3a4ed5 100%);
border-image-slice: 1;
}
.border {
background-color: white;
display: block;
height: 50px;
width: 150px;
text-align: center;
transform: skewX(-15deg);
}
<div class="border">
<div>
You said that you have the meta tag set to emulate IE10.
Border images are not supported by IE10, only IE11. (You can confirm here: http://caniuse.com/border-image/embed/.)
So if you set IE11 to emulate IE10, it will stop supporting border images.
To resolve the problem, you need to remove the IE10 emulation. The best thing to do here is to explicitly tell IE to use it's best available mode. This can be done as follows:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Simply swap out your existing meta tag for this one, and the border image problem will be solved.
However, before you make that change you should check to confirm if there is any other reason why your site might have wanted to be in IE10 mode. I'm guessing there isn't any reason, but it's worth checking.
I'm attempting to use repeating-linear-gradient to zebra-stripe a code block. To that end, I specified an explicit line-height in the code block and alternated the color at intervals of that value.
It works great for a few lines, but the text and stripes eventually stop lining up. Does anyone know why this is and whether it can be fixed?
pre {
font-family: monospace;
font-size: 12px;
line-height: 1.4em;
background: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 1.4em,
#ddd 1.4em,
#ddd 2.8em);
}
<pre>Here
I
will
write
many
lines
of
text
and
the
spacing
starts
out
quite
well
but
eventually
the
lines
and
stripes
get
messed
up
and
this
makes
me
sad.</pre>
From w3.org:
On a block container element whose content is composed of inline-level
elements, 'line-height' specifies the minimal height of line boxes
within the element.
The keyword here being "minimal". If the font-size is large enough it will increase the spacing of your lines to more than your defined line-height.
To illustrate, here is your snippet with a smaller font-size:
pre {
font-family: monospace;
font-size: 10px;
line-height: 1.4em;
background: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 1.4em,
#ddd 1.4em,
#ddd 2.8em);
}
<pre>Here
I
will
write
many
lines
of
text
and
the
spacing
starts
out
quite
well
and
the
lines
and
stripes
don't
ever
get
messed
up
and
this
makes
me
happy. :-)</pre>
Or here with a larger line-height:
pre {
font-family: monospace;
font-size: 12px;
line-height: 2em;
background: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 2em,
#ddd 2em,
#ddd 4em);
}
<pre>Here
I
will
write
many
lines
of
text
and
the
spacing
starts
out
quite
well
and
the
lines
and
stripes
don't
ever
get
messed
up
and
this
makes
me
happy. :-)</pre>
Basically I'm trying to simulate Photoshop's image overlay thing using images and CSS for a menu.
There are 2 versions of the menu background image: one is the normal state (pink), and one the active state (blue). The entire menu is wrapped in a DIV with the normal (pink) image as background.
How can I make it so each active menu link uses the corresponding slice of the blue image?
Like this:
My code so far
Do you think this is possible with CSS?
CSS Only solution for modern browsers:
ul {
background-color:#ff00ff;
background-image: -moz-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
background-image: -webkit-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
background-image: -o-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
background-image: -ms-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
background-image: radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
height:50px;
width:400px;
margin:0;
padding:0;
border-radius:25px;
overflow:hidden;
}
li {
width:100px;
height:50px;
float:left;
}
li:hover {
background-color:rgba(0,0,255,0.2);
}
Click to see a working demo: http://jsfiddle.net/AlienWebguy/ZLg4B/
If you need to support older browsers and can't use css3, there is a number of ways to do this. One of them:
You can cut out the blue image of the entire thing (you can actually make it wider)
then
li.active {
background: url('path/to/yourImage.png') no-repeat -50px 0;
/* 50px or however wide that rounded tip is */
}
li.active.first {
background-position: left top;
}
li.active.last {
background-position: right top;
}
/* you'll need to add 'active', 'first' and 'last' classes accordingly. */
Are you ever going to have links at the rounded parts? If not, you could just take a pixel-wide slice of the blue image and set that to the :hover state background with repeat-x.
There are definitely other ways to do this but this is the most straightforward IMHO.
Edit: After seeing your fiddle, perhaps this isn't the case. I would consider using JavaScript to calculate appropriate x-offsets for each link, and using a slice of the overlay image in that way. Or you could just make the first link a "special case" and use a generic different-color background for the rest of the links.
i have html code
<pre>
line 1
line 2
line 3
</pre>
how can i put some css style to the "lines" inside <pre>, without adding other wrapper into it?
what i mean is something like
pre lines{ color: red}
i'm having difficulties on finding the css selector for that. Thanks in advance.
You can use this little CSS3 trick, with gradients. This will create automatically, without extra spans, a "zebra" effect:
background: #555;
background-image: -webkit-linear-gradient(#555 50%, #505050 50%);
background-image: -moz-linear-gradient(#555 50%, #505050 50%);
background-image: -ms-linear-gradient(#555 50%, #505050 50%);
background-image: -o-linear-gradient(#555 50%, #505050 50%);
background-image: linear-gradient(#555 50%, #505050 50%);
background-position: 0 0;
background-repeat: repeat;
background-size: 4.5em 4.5em;
Try different CSS "line-height" so that the text appears correctly.
see: http://www.dte.web.id/2012/03/css-only-zebra-striped-pre-tag.html#.UUoV6lugkoM
If you want add color to all lines in pre, just add
pre {color: red;}
But if you want to add color to some lines, you need extra markup:
<pre>
<span>Line1</span>
line2
<span>Line3</span>
</pre>
pre span {color: red;}
I have a general rule which gives all DIVs a background image.
I have one div (with id='a') which I don't want it to have the background image.
What css rule do I have to give it?
Try:
div#a {
background-image:none
}
div#a {
background-image: none;
}
div#a {
background-image: none !important;
}
Although the "!important" might not be necessary, because "div#a" has a higher specificity than just "div".
div#a {
background-image: url('../images/spacer.png');
background-image: none !important;
}
I use a transparent spacer image in addition to the rule to remove the background image because IE6 seems to ignore the background-image: none even though it is marked !important.
Since in css3 one might set multiple background images setting "none" will only create a new layer and hide nothing.
http://www.css3.info/preview/multiple-backgrounds/
http://www.w3.org/TR/css3-background/#backgrounds
I have not found a solution yet...
When background-image: none !important; have no effect.
You can use:
background-size: 0 !important;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.5, #fff));
background-image: -webkit-linear-gradient(center top, #fff 0%, #fff 50%);
background-image: -moz-linear-gradient(center top, #fff 0%, #fff 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
background-image: linear-gradient(to bottom, #fff 0%, #fff 50%);
for older browsers.. if you have defined css in some framewokrk.css like select2.css in IE9 background-image: -webkit-gradient etc. and you want it via another .css rewrite with "background-image: none !important" not works. I used same color to color gradient like page background color.
If your div rule is just div {...}, then #a {...} will be sufficient. If it is more complicated, you need a "more specific" selector, as defined by the CSS specification on specificity. (#a being more specific than div is just single aspect in the algorithm.)
HTML :
<div id="a" class="mydiv"></div>
CSS:
div#a {
background-image:none;
}
Another Way:
div:not(#a) {
//all rules goes here
//add image here
//div with id a not effected by these rules
}
Multiple (not pseudo)
div:not(#a):not(#b):not(#c) {
//all rules goes here
//add image here
//div with ids not effected with these rules
}
Doesn't this work:
.clear-background{
background-image: none;
}
Might have problems on older browsers...
Replace the rule you have with the following:
div:not(#a) { // add your bg image here //}