vertical-align and inline-block behaving annoyingly different in chrome and firefox
According to web standard only inline elements can be "vertically aligned" in spite that some browsers, like chrome, still align them. Note that it is the element that is aligned and not its contents!
So if you apply it to a <span>
the <span>
becomes aligned with the surrounding text and not whatever is inside it within in.
ispo lorem <span> text </span> due carpe diem
adding span {vertical-align:top; border: 1px solid black}
makes <span> text </span>
(whole box) become higher than the rest of the text and not push the text
to the ceiling of the box <span>
.
The core issue here is that Firefox is very literal when it comes to web standard whilst Chrome adds a few implicit features like this one.
For more details click here.
EDIT: apparently if you use vertical-align:top
ONLY on the <a>
it also works.
DIV alignment differs on Chrome and Firefox
Try
#linkbarinternal, #linkbar > a {
vertical-align: middle
}
or
#linkbarinternal, #linkbar > a {
vertical-align: middle
display: inline-block;
}
Specified cast is not valid. ListView and Linq
Without seeing more of the code or database structure, it will be hard to come to a great solution. Seeing the ForumThreadPostDetails table and generated LinqToSql class would be ideal.
Are the ThreadId and PostId both 'BigInt's in the database?
Do the types match up between the properties within IForumThreadPost and ForumThreadPostDetails (and does the details class inherit from this interface, if it even is an interface)?
Have any changes been made to the ForumThreadPostDetails table in the database (fields changing type, etc)?
Why are you calling .AsEnumerable() on your table?
Why does adding float:left to my css make my link unclickable?
The usual reason is that there's a transparent layer on top. It's normally caused when a box is wider than you think and has a transparent border/padding. Use CSS to apply a temporary border to all items and you'll check whether it's the case.
Update #1
div, span, p{
border: 1px solid red;
}
Update #2
I can see that #QuestionEditLink
and #QuestionHistoryLink
are floating. That means that they no longer use space in the page flow. So when you display #AskingUser
next it starts at the same point and, being the last one on the page, it gets displayed on top of the two other boxes.
Your layout appears to be fully vertical. I presume you don't need any float: left
at all.
BTW, you have lots of duplicate IDs.
How to recreate perspective-origin effect by transforming child elements?
So here we go, as shown by vals, perspective is respected when using transform:translate
to position the faces on the stage, so I figured that the trick is to position the cuboid wrappes in the center of the stage, apply perspective using the perspective()
function, and then translate the faces positions accordingly.
Here's an example, it works fine (fine as in as expected) in IE10/11 and Chrome, in Firefox there's a lot of flickering when the faces of the individual cubes intersect each other, and in Safari (for Windows) the faces are clipped when they intersect (tough it looks like this is actually the correct behaviour, and Firefox, Chrome and IE are wrong. update Let me take that back, actually it looks like Safari is doing it wrong since only elements in the same 3d rendering context are ment to intersect). However, the main goal was IE compatibiilty, and even though it's a an annoyingly large amount of extra CSS, it's working, so...
http://jsfiddle.net/EDzXM/
Code for the jsfiddle example
HTML:
<div class='wrapper'>
<div class='front'>Front</div>
<div class='back'>Back</div>
<div class='top'>Top</div>
<div class='bottom'>Bottom</div>
<div class='left'>Left</div>
<div class='right'>Right</div>
</div>
<div class='wrapper'>
<div class='front'>Front</div>
<div class='back'>Back</div>
<div class='top'>Top</div>
<div class='bottom'>Bottom</div>
<div class='left'>Left</div>
<div class='right'>Right</div>
</div>
<div class='wrapper'>
<div class='front'>Front</div>
<div class='back'>Back</div>
<div class='top'>Top</div>
<div class='bottom'>Bottom</div>
<div class='left'>Left</div>
<div class='right'>Right</div>
</div>
<div class='wrapper'>
<div class='front'>Front</div>
<div class='back'>Back</div>
<div class='top'>Top</div>
<div class='bottom'>Bottom</div>
<div class='left'>Left</div>
<div class='right'>Right</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.wrapper {
position: absolute;
left: 50%;
margin-left: -120px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.wrapper:nth-child(1) {
z-index: 1;
}
.wrapper:nth-child(2) {
z-index: 2;
}
.wrapper:nth-child(3) {
z-index: 1;
}
.wrapper:nth-child(4) {
z-index: 0;
}
.top, .front, .back, .bottom, .left, .right {
position: absolute;
width: 240px;
height: 400px;
color: #fff;
font-size: 40px;
font-weight: bold;
text-align: center;
line-height: 400px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-animation-duration: 25s;
animation-duration: 25s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.top, .bottom {
height: 300px;
line-height: 300px;
}
.left, .right {
width: 300px;
}
.front, .back {
-webkit-transform-origin: 50% 50% -150px;
transform-origin: 50% 50% -150px;
}
.top, .bottom {
-webkit-transform-origin: 50% 50% -200px;
transform-origin: 50% 50% -200px;
}
.left, .right {
-webkit-transform-origin: 50% 50% -120px;
transform-origin: 50% 50% -120px;
}
.front {
background-color: #ff0000;
}
.back {
background-color: #00cc00;
}
.top {
background-color: #0000ff;
}
.bottom {
background-color: #cccc00;
}
.left {
background-color: #00cccc;
}
.right {
background-color: #ff00ff;
}
.wrapper:nth-child(1) .front {
-webkit-animation-name: rotate-front-0;
animation-name: rotate-front-0;
}
.wrapper:nth-child(1) .back {
-webkit-animation-name: rotate-back-0;
animation-name: rotate-back-0;
}
.wrapper:nth-child(1) .top {
-webkit-animation-name: rotate-top-0;
animation-name: rotate-top-0;
}
.wrapper:nth-child(1) .bottom {
-webkit-animation-name: rotate-bottom-0;
animation-name: rotate-bottom-0;
}
.wrapper:nth-child(1) .left {
-webkit-animation-name: rotate-left-0;
animation-name: rotate-left-0;
}
.wrapper:nth-child(1) .right {
-webkit-animation-name: rotate-right-0;
animation-name: rotate-right-0;
}
.wrapper:nth-child(2) .front {
-webkit-animation-name: rotate-front-1;
animation-name: rotate-front-1;
}
.wrapper:nth-child(2) .back {
-webkit-animation-name: rotate-back-1;
animation-name: rotate-back-1;
}
.wrapper:nth-child(2) .top {
-webkit-animation-name: rotate-top-1;
animation-name: rotate-top-1;
}
.wrapper:nth-child(2) .bottom {
-webkit-animation-name: rotate-bottom-1;
animation-name: rotate-bottom-1;
}
.wrapper:nth-child(2) .left {
-webkit-animation-name: rotate-left-1;
animation-name: rotate-left-1;
}
.wrapper:nth-child(2) .right {
-webkit-animation-name: rotate-right-1;
animation-name: rotate-right-1;
}
.wrapper:nth-child(3) .front {
-webkit-animation-name: rotate-front-2;
animation-name: rotate-front-2;
}
.wrapper:nth-child(3) .back {
-webkit-animation-name: rotate-back-2;
animation-name: rotate-back-2;
}
.wrapper:nth-child(3) .top {
-webkit-animation-name: rotate-top-2;
animation-name: rotate-top-2;
}
.wrapper:nth-child(3) .bottom {
-webkit-animation-name: rotate-bottom-2;
animation-name: rotate-bottom-2;
}
.wrapper:nth-child(3) .left {
-webkit-animation-name: rotate-left-2;
animation-name: rotate-left-2;
}
.wrapper:nth-child(3) .right {
-webkit-animation-name: rotate-right-2;
animation-name: rotate-right-2;
}
.wrapper:nth-child(4) .front {
-webkit-animation-name: rotate-front-3;
animation-name: rotate-front-3;
}
.wrapper:nth-child(4) .back {
-webkit-animation-name: rotate-back-3;
animation-name: rotate-back-3;
}
.wrapper:nth-child(4) .top {
-webkit-animation-name: rotate-top-3;
animation-name: rotate-top-3;
}
.wrapper:nth-child(4) .bottom {
-webkit-animation-name: rotate-bottom-3;
animation-name: rotate-bottom-3;
}
.wrapper:nth-child(4) .left {
-webkit-animation-name: rotate-left-3;
animation-name: rotate-left-3;
}
.wrapper:nth-child(4) .right {
-webkit-animation-name: rotate-right-3;
animation-name: rotate-right-3;
}
@-webkit-keyframes rotate-front-0 {
0% {
-webkit-transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
}
100% {
-webkit-transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
}
}
@-webkit-keyframes rotate-back-0 {
0% {
-webkit-transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
}
100% {
-webkit-transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
}
}
@-webkit-keyframes rotate-top-0 {
0% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
}
}
@-webkit-keyframes rotate-bottom-0 {
0% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
}
}
@-webkit-keyframes rotate-left-0 {
0% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
}
}
@-webkit-keyframes rotate-right-0 {
0% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
}
}
@-webkit-keyframes rotate-front-1 {
0% {
-webkit-transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
}
100% {
-webkit-transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
}
}
@-webkit-keyframes rotate-back-1 {
0% {
-webkit-transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
}
100% {
-webkit-transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
}
}
@-webkit-keyframes rotate-top-1 {
0% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
}
}
@-webkit-keyframes rotate-bottom-1 {
0% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
}
}
@-webkit-keyframes rotate-left-1 {
0% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
}
}
@-webkit-keyframes rotate-right-1 {
0% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
}
}
@-webkit-keyframes rotate-front-2 {
0% {
-webkit-transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
}
100% {
-webkit-transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
}
}
@-webkit-keyframes rotate-back-2 {
0% {
-webkit-transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
}
100% {
-webkit-transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
}
}
@-webkit-keyframes rotate-top-2 {
0% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
}
}
@-webkit-keyframes rotate-bottom-2 {
0% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
}
}
@-webkit-keyframes rotate-left-2 {
0% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
}
}
@-webkit-keyframes rotate-right-2 {
0% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
}
}
@-webkit-keyframes rotate-front-3 {
0% {
-webkit-transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
}
100% {
-webkit-transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
}
}
@-webkit-keyframes rotate-back-3 {
0% {
-webkit-transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
}
100% {
-webkit-transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
}
}
@-webkit-keyframes rotate-top-3 {
0% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
}
}
@-webkit-keyframes rotate-bottom-3 {
0% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
-webkit-transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
}
}
@-webkit-keyframes rotate-left-3 {
0% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
}
}
@-webkit-keyframes rotate-right-3 {
0% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
-webkit-transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
}
}
@keyframes rotate-front-0 {
0% {
transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
}
100% {
transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
}
}
@keyframes rotate-back-0 {
0% {
transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
}
100% {
transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
}
}
@keyframes rotate-top-0 {
0% {
transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
}
}
@keyframes rotate-bottom-0 {
0% {
transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
}
}
@keyframes rotate-left-0 {
0% {
transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
}
}
@keyframes rotate-right-0 {
0% {
transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
}
}
@keyframes rotate-front-1 {
0% {
transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
}
100% {
transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
}
}
@keyframes rotate-back-1 {
0% {
transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
}
100% {
transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
}
}
@keyframes rotate-top-1 {
0% {
transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
}
}
@keyframes rotate-bottom-1 {
0% {
transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
}
}
@keyframes rotate-left-1 {
0% {
transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
}
}
@keyframes rotate-right-1 {
0% {
transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
}
}
@keyframes rotate-front-2 {
0% {
transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
}
100% {
transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
}
}
@keyframes rotate-back-2 {
0% {
transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
}
100% {
transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
}
}
@keyframes rotate-top-2 {
0% {
transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
}
}
@keyframes rotate-bottom-2 {
0% {
transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
}
}
@keyframes rotate-left-2 {
0% {
transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
}
}
@keyframes rotate-right-2 {
0% {
transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
}
}
@keyframes rotate-front-3 {
0% {
transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
}
100% {
transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
}
}
@keyframes rotate-back-3 {
0% {
transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
}
100% {
transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
}
}
@keyframes rotate-top-3 {
0% {
transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
}
}
@keyframes rotate-bottom-3 {
0% {
transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
}
100% {
transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
}
}
@keyframes rotate-left-3 {
0% {
transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
}
}
@keyframes rotate-right-3 {
0% {
transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
}
100% {
transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
}
}
Accessibility: recommended alt-text convention for SVG and MathML?
After some digging, I found some somewhat official recommendations. Unfortunately, most are not functional at this point in time. Both the browsers and the screen readers have a lot of to implement before Math and SVG can be considered accessible, but things are starting to look up.
Disclaimer: the below recommendations are what I have gleaned over the past few months of coding. If something is dead wrong, please let me know. I will try to keep this up to date as browsers and AT software progresses.
MathML
Recommendation
Use role="math"
along with an aria-label
on a surrounding div
tag (see docs). The addition of tabindex="0"
allows screen readers to focus specifically on this element; this element's aria-label
can be spoken using a special key shortcut (such as NVDA+Tab
).
<div role="math" tabindex="0" aria-label="[spoken equivalent]">
<math xmlns="http://www.w3.org/1998/Math/MathML">
...
</math>
</div>
Limitations/Considerations
- Sketchy screen reader support on
aria-label
(and less importantlyrole="math"
).
Update: Relevant NVDA tickets regardingaria-label
here and here. - Wrapping in
div
orspan
tag seems unnecessary sincemath
is a first-class element in HTML5. - I found very little referencing the MathML
alttext
tag.
Update: this appears to be a DAISY-specific addition, described here.
References
- http://www.w3.org/TR/wai-aria/roles#math
- http://lists.w3.org/Archives/Public/public-pfwg-comments/2008JanMar/0008.html
- http://www.w3.org/TR/wai-aria-practices/#math
SVG
Recommendation
Use top-level <title>
and <desc>
tags together with role="img"
and aria-label
on the root SVG tag.
<svg role="img" aria-label="[title + description]">
<title>[title]</title>
<desc>[long description]</desc>
...
</svg>
Limitations/Considerations
- As of February 2011, IE 9 beta reads all
<title>
and<desc>
tags, which is probably undesirable. However, NVDA, JAWS, and WindowEyes will read thearia-label
when the element also containsrole="img"
. - If loading an SVG file (that is, not inline in HTML), the root-level
<title>
tag will become the browser page's title, which will be read by the screen reader.
References
- http://lists.w3.org/Archives/Public/www-svg/2010Oct/0029.html
- http://lists.w3.org/Archives/Public/public-html/2010Jun/0127.html
- http://www.w3.org/TR/wai-aria/roles#img
- http://www.w3.org/TR/wai-aria/roles#namecalculation
Related Topics
Center Wrapped Items in a Space-Between Flexbox
How to Change Font-Size of a Tag Using Inline CSS
Mvc Bundling and Relative CSS Image When Website Is Deployed to an Application
Why Does Firefox Treat Helvetica Differently from Chrome
How to Make Tinymce's Modal Dialogs Responsive
Angularjs: with Ng-Animate & Ng-View, How to Make a 3D Cube Rotation Effect
Efficient and Inefficient CSS Selectors (According to Google, Pagespeed ...)
Em Vs Px and Cross Browser Compatibility
How to Use CSS3: :Selection Without Changing The Default Color and Background Color
CSS Sprite Techniques, CSS Background or Img's Clip
CSS - Smooth Button Gradient Color Transition on Hover
How to Avoid Line Breaks After ":Before" in CSS
How to Target The First and The Last Element Per Row in a Flex Layout
Difference Between Variable Fonts and Regular Fonts
Absolute Positioned Item in a Flex Container Still Gets Considered as Item in Ie & Firefox