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.
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.
Demo
http://people.mywot.com/dean/tour/ie6test.html
I have narrowed down this problem into the test case above. You'll spot it right away if you load it up in IE6.
The problem
When hovering over the anchor in IE6, all descendent elements which are meant to become visible become visible, but as soon as you hover out, all styling remains but the text disappears. This results in a "ghost box" and quite an interesting (but undesired effect).
I've searched for a few hours this morning to try and find out which IE6 bug this is, but I'm out of ideas.
P.S. Ignore the transparency of the PNG's. I just haven't included the pngfix on this demo.
Hover states in IE6 have some silly bugs unfortunately.
http://reference.sitepoint.com/css/pseudoclass-hover covers most of them which should allow you to experiment with what might be wrong.
EDIT: You may have to resort to javascript to overcome this one unfortunately.
Some commenters are forgetting that there are a number of clients (eg: UK local government) that still almost exclusively use IE6. Pity those of us who have to still ensure it is taken into consideration!
Yes, 100% of webmaster hate the devil IE6, but we're here to answer the question, not to discuss how bad IE6 is, right?
And for the question, this is my answer : (Edited line 42 & 43 in your demo code)
...
.screenshot a.bubble .description { position: absolute; min-width: 200px; bottom: -8px; background: none; display: none;
}
.screenshot a.bubble:hover .description { display: inline; background: #efefef; }
...
I don't know how, but IE6 cannot hide the div with css property "background" not set to "none". That's all what cause the problem. Anyway, I hate IE6.
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).
I've looked all over this site and the rest of the internet, but can't figure out why this is happening. My page displays fine in all browsers but IE8 (though, technically, I haven't checked earlier versions of IE). Even in IE8, it sometimes displays correctly (which makes no sense to me).
Here's the page: http://www.thedudehatescancer.com/testsite/past-results.shtml
Sometimes the social network and footer information moves up the screen and overlays the bottom portion of the main page content, and sometimes it stays at the bottom of the page, where it belongs.
style sheets are under the same root.
main: stylesheet.css
IE hacks: stylesheet-iehacks.css
I can't figure it out. My guess is I'm doing something stupid, but I wish I knew what it was. Any help would be very much appreciated!!
The main problem is that you are using display:inline-block.
The easy fix for this problems is to add zoom:1 to anything that is using inline-block.
This adds the hasLayout property in ie
For Example;
#networkswrap {
background: url("images/bg-gray2.jpg") repeat scroll 0 0 transparent;
border-bottom: 3px solid #989896;
display: inline-block;
height: 60px;
overflow: visible;
width: 100%;
zoom:1
}
It looks like your site is using several CSS properties that have the potential to cause problems in IE.
It certainly has issues in IE7 and your use of <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> should cause IE8 to use the IE7 rendering engine.
Initially, I thought it might be the hasLayout problem due to your use of display: inline-block. I tried implementing a fix for that but it made no difference.
I think the problem you are experiencing is due to your use of min-height. I tried applying a min-height hack and it seemed to work.
#mainwrap{
min-height:600px;
height:auto !important;
height:600px;
}
Worthy site by the way; my mum had AML.
I hope this helps,
Mark
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.