Just trying to give the main content div on a site a border on the left and right side of the div. Rather than have separate divs for each border, I thought to use the border-left-image capability in CSS3 to make it happen. My code is as follows:
#content {
background-color: #7FC3F4;
height: 100%;
width: 900px;
border-left-width: 30px;
border-left-image: url(../images/border_left_gradient.png);
border-right-width: 30px;
border-right-image: url(../images/border_right_gradient.png);
margin-right: 10%;
margin-left: 10%;
}
Of all the Google searches I've done, I have to yet to come up with an explanation as to why this code isn't valid. Some results return numeric values to be placed after the url, however regardless of what combination of numbers I try, no dice.
Thoughts?
border-image is now supported in all the major browsers (2014-05-22)
Demo with a single border-left-image
Demo with different left and right images.
The demos now need a minimum of Chrome 15, Safari 6, Firefox 15, IE 11 or Opera 15.
It is not actually possible to do this with separate image files, but you can slice a single image on the left and right. See the border-image page on MDN which shows some good examples or CSS Tricks for a comprehensive summary of how the other slicing options work.
Note: if you need earlier browser support please ask as a previous version of my answer did work with Chrome 12, Safari 5.0.3, Firefox 4 and Opera 10 but I have updated it now that new browsers support prefix-free CSS3.
Edit: Firefox now requires an additional property setting - border-style: solid (see CSS - New Firefox-release doesn't show Border-Image anymore)
Good solution : Chrome AND Firefox compatibility :
http://jsfiddle.net/Yas34/954/
missing border-style: solid to current "good answer"
For one your url is bogus (..images?). for a second have you checked your browser supports the property? last I checked, which wasn't that long ago, nobody supported it (well maybe webkit nightlies).
Related
I am making some animation and graphics libraries to work with html. For some things clipping is needed and since the elements are generated dynamically, clip-path (mostly polygon) is added dynamicaly in elements'a style property :
el.style.clipPath = 'polygon(..)';
Firefox (76) works just fine, however Chrome (83) (and Opera as well) dont respect the clip-path property (on chrome element inspect it is not even shown on element's style properties as present)
It was supposed to be a bug in Chrome prior to v.64 but wherever I looked it says latest chrome (and webkit browsers in general) have full support for clip-path and polygon in particular.
Note: It is not an issue to test with url of svg path to be used a clip mask, but I would like to avoid svg, I would like to keep it pure html/css (however if i rememeber correctly not even svg inline url works with chrome when I was pulling my hair trying to figure out why it doesnt work as expected).
I have also tried adding with browser prefix (ie el.style.WebkitClipPath = 'polygon(..)') but nothing changed.
Test example should display a triangle (doesnt work on Chrome, at least my latest Chrome 83.0.4103.61 64bit windows):
var test = document.getElementById('test');
test.style.clipPath = 'border-box polygon(0px 0px, 200px 100px, 0px 200px)';
#test{
position:relative;
width: 200px;
height:200px;
background: #ff0000;
padding: 0;
margin: 0;
border: 2px solid #00ff00;
box-sizing: border-box;
overflow: hidden;
}
<div id="test"></div>
What am I missing? Does chrome support clip-path with polygon, or not?
To sum up the comments by #TemaniAfif in an answer so it stays:
If border-box is removed from clip-path, eg:
test.style.clipPath = 'polygon(..)';
then it works in Chrome too. However as per the latest spec on MDN, the following is valid combination and should be supported (support for Chrome on that page is green as grass):
/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);
The clip-path assumes a box model anyway, and it is imperative in certain cases that user sets the assumed box-model, for clipping, explicitly, so that is why combined values are supported. But it seems it is not so for Chrome (and Opera as far as I have tested).
So this is only a workaround untill full support of the feature is provided.
text-align-last is supposed to work in all modern browsers. Im using Chrome 38 and this css property doesn't seem to work - in Deverloper Tools, it strikes out this line.
Any ideas why it would happen? Maybe a Chrome 38 bug? I've found out that it was some kind of an issue in past version of Chrome.
[October 30, 2016 Edit: I'm pretty late with this, but if anyone still finds this answer, text-align-last is supported since Chrome 47, released in December 2015]
It has not been implemented in Chrome. There is a bug set to RESOLVED FIXED, but there does not seem to be any information about an actual fix having been implemented. MDN info says that there is support from Chrome 35 but links to this bug.
In dev tools in Chrome 38 the declaration is struck-out but a tooltip text says that the property value is invalid. In Chrome 40 this has been fixed: the tooltip says that the property name is invalid (meaning that it is not recognized/supported by the browser). Enabling “Experimental Web Platform Features” does not seem to help. So the property remains unimplemented.
Edit: As noted in the question now, Chrome supports the feature from version 47, and browser support is good (though not perfect) otherwise, too, see http://caniuse.com/#feat=css-text-align-last
Baseline positioning varies in browsers. That is why text-align-last in Chrome is behaving different. Explained here with possible fix
http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text
HTML
<div>
<span class="letter">T</span>
<span class="strut"></span>
<div>
CSS
div {
width: 100px;
height: 100px;
border: thin black solid;
}
.letter {
font-size: 100px;
line-height: 0px;
background-color: #9BBCE3;
}
.strut {
display: inline-block;
height: 100px;
}
Summary
1. Inline images use the bottom edge of the image as the baseline
2. So add an empty inline-block strut to the div to position the baseline for the entire line.
I have a dropdown list in my application whereby in order to center it I must add padding-top 10px while on Mozilla Firefox but on google chrome it does not need the padding. How can I target the select list to set this browser specific. I was hoping I could have done something like the following:
select {
-moz-padding-top: 10px;
-webkit-padding-top: 0px;
}
Any ideas of how I could get round this? Fiddle of problem shown below, if you check this in Chrome and then Firefox, I want it so that text is always in middle
http://jsfiddle.net/uHDa6/
Note: the first part of this answer is now obsolete, as this feature has been removed from Firefox. For the real answer, read on from "However".
The answer to your question is: yes, it's possible to put Mozilla-specific CSS in a stylesheet. (Not in an inline style attribute.)
In this case, you would write
#-moz-document url-prefix() {
select {padding-top:10px;}
}
which is simply the Mozilla-prefixed version of the #document rule, that is not recognised by other browsers.
However, the actual solution to the problem of the mismatched text position is to not set the height, but only the padding of the select. No hacks.
style="font-size: 14px; padding: 11px 0 11px 5px;"
That has the desired effect in all browsers. See new fiddle.
I like to know if is possible to specify the border drawing style (not border-style) with CSS (I need that works at least on webkit).
Well, I have an element like div.border and it have four-side border 5px silver solid. But depending of class addition, like div.border.red-mark, it will receive a border-left: 15px red solid. I need that the rendering style be rectangular and not adaptative to line width (or angled to a point).
To clarify, take a look at this example. And I need get something like that. But I can't modify the HTML structure, like I did on second example; I really can use only CSS for that.
Is it possible?
You could use CSS pseudo-content to achieve a fake border, like this:
.red-mark:before {
content: '';
display:block;
width: 15px;
position: absolute;
top: -15px;
left: -15px;
bottom: -15px;
background: red;
}
See: http://jsfiddle.net/MnPka/1/
The minus positions are because 0 starts within the border. You may be able to change this behaviour by setting box-sizing though support for that isn't that great yet - http://caniuse.com/#search=box-sizing
The :before solution offered by Josh Davenport is probably the best answer here, but just for completeness, I should also mention border-image.
border-image is a relatively new CSS feature that allows you to specify an image for each of the border edges and corners. This would enable you to design your border exactly as you want it.
Your example would be a pretty trivial case for it; as I said the other answer is probably better for you; but for more complex cases, it's a great little feature to have in your toolbox.
You can read more about it here at the MDN.
The one thing to note (as mentioned on the MDN link above) is browser compatibility. It will work in most current browsers, but not in any current IE versions (IE10 or earlier), and may have issues in older versions of other browsers. However, you specified you were particularly looking for a Webkit solution, and it has been supported in webkit browsers for ages, so it should be okay.
I have a page which displays just fine, in Firefox and Chrome. However, it has the content pushed past the bottom of the sidebar (as if I had a clear) in Internet Explorer 8 (I haven't tested any other IE versions). Does anyone know how to fix this?
The page is located here
Thanks,
Lemiant
You're missing the doctype for you page. Without it, IE will revert to quirks mode, which is essentially IE 5.5's rendering engine.
What you're observing is IE incorrectly computing widths for your elements, see here for a description on how IE 6 and older versions implement width.
For some reason that remains a mystery to me, IE thinks the #content element is wider than it should be.
This code did the trick for me:
#content {
line-height: 18px;
margin-right: 250px;
width: 550px;
width: 497px\9;
}
This makes all browsers use the width of 550px, and IE (all versions), 497px, which seems to be tha maximum it accepts. Hacky, but it works :D
EDIT: You're missing a !doctype. This might be the cause.