IE wrong vertical element position - html

I have website www.stanosimkovic.sk and i have problem with vertical positioning right element with text on main page in IE browser. In another browsers it load correctly. Can somebody help me how to fix this issue.
I think problem is somewhere in CSS
.alignMiddle {
position: relative;
top: 50%;
transform: translateY(-50%);
}
But dont know how resolve it, because in Chrome Opera etc. its OK.

Depending of the version of IE, the transform property might not work. So what you have to do is add the vendors prefix. So it should look like this (-ms- is for IE) :
.alignMiddle {
position: relative;
top: 50%;
transform: translateY(-50%);
-ms-transform: translate(-50%);
-webkit-transform: translate(-50%);
-moz-transform: translate(-50%);
}
Hope it helps !

Related

(CSS) skew img frame without distorting image

I'm making a website that contains many skewed elements, like this:
This isn't too bad, there are CSS transforms that could skew it. But how about this:
The image isn't distorted, just the frame is cropped in a skewed way. What's the easiest/best way to do this?
I think this should work for you. As a Mark commented on, clip-path is a nice way to go. There are tools for getting just the right path such as Clippy. Once you've got the path, you drop it right into your code. In my demo, I used it on the div wrapping the image, rather than on the image itself. I did it this way to keep border effects—added via pseudo-class—on top of the image.
Demo: http://codepen.io/antibland/pen/eZKxNa
I ended up using the following. It creates a skewed parent, then unskews the child, centering it and making it big enough to fill the skew's stick-out bits.
HTML
<div class="skewed">
<img src="images/sad-kid.jpg">
</div>
CSS
div.skewed {
position: relative;
height: 140px;
transform: skew(-2deg) rotate(2deg);
-webkit-transform: skew(-2deg) rotate(2deg);
-moz-transform: skew(-2deg) rotate(2deg);
overflow: hidden;
}
div.skewed > * {
width: 110%;
position: absolute;
top: 50%;
transform: skew(2deg) rotate(-2deg) translateY(-50%);
-webkit-transform: skew(2deg) rotate(-2deg) translateY(-50%);
-moz-transform: skew(2deg) rotate(-2deg) translateY(-50%);
}
OUTPUT
This is similar to Andy Hoffman's method, but supports a greater number of browsers.

CSS Safari / mobile - Translate and min-height

I have site, which is fine on Chrome, Firefox and IE but on Safari (Win version) it does weird things.
First of all min-height of image is not working, even if it should be supported and I've got some troubles with positioning to vertical center.
.carousel .item img {
max-height: 50vh;
min-height: 200px;
margin: auto;
}
.ommo-main {
position: relative;
height: 50vh;
}
.ommo-text {
position: absolute;
top: 65%;
-webkit-transform: translate(0%,-65%);
-ms-transform:: translate(0%,-65%);
-webkit: translate(0%,-65%);
-moz-transform:: translate(0%,-65%);
-o-transform: translate(0%,-65%);
-webkit-transform: -webkit-translate(0%,-65%);
transform: translateY(-65%);
}
All code in bootply HERE.
And in mobile phone, one of my as easy as possible browsers (Javelin, Xiaomi Redmi 2), I've got this issue, but not sure if it's not just a cache.
Could anybody help me, please? Thanks a lot in advance.
Problem was with Safari on Windows, which is somehow not supporting VH and VW units, on MAC OS X it works fine.

Safari CSS Transition flickering

I have a problem with a webpage I'm working on. On Firefox it doesn't seem to have any problems.
I have 2 elements, horizontal scrolling, with background images and the transition between those 2 is made using CSS3, transformX(). At first these 2 elements overlay (so that you can see the background image of the 2nd element), when you click the right arrow the second element slides from right to left in front. When you click right the first element slides from left to right
When I go back to the first element, the second element flickers, like rearranging its position.
.first-container.first-container1 {
background: transparent url('../img/backgrounds/first1-background.jpg') no-repeat center center;
background-size: cover;
left: 0;
}
.first-container.first-container2 {
background: transparent url('../img/backgrounds/first2-background.jpg') no-repeat center center;
background-size: cover;
left: 100%;
}
.bs-first .first1 .first-container.first-container2 {
-webkit-transform: translateX(-8.5%);
-moz-transform: translateX(-8.5%);
-o-transform: translateX(-8.5%);
-ms-transform: translateX(-8.5%);
transform: translateX(-8.5%);
}
.first2 .first-container.first-container1 {
-webkit-transform: translateX(8.5%);
-moz-transform: translateX(8.5%);
-o-transform: translateX(8.5%);
-ms-transform: translateX(8.5%);
transform: translateX(8.5%);
z-index: 9;
}
I could really use a few hints on how i could solve this. Thank you!
You can try -webkit-backface-visibility: hidden; applied to the element that has applied the css transform.
In your case if you are using background images that it won't work so just create a class and apply it like:
.stop-flickering {-webkit-transform:translate3d(0,0,0);}
Also you can try:
-webkit-transform-style: preserve-3d;
In my case none of these methods worked :
-webkit-transform:translate3d(0,0,0);
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
I had an animation on an empty div to create bouncing circle and the solution was to use pseudo element :before and the flicker disappeared

Making checkbox bigger in size

I'm trying to make the checkbox bigger in size. The regular size is too small
Try CSS 'transform'
input[type=checkbox] {
-ms-transform: scale(2);
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
transform: scale(2); }
But it will not work on IE8.
http://www.w3schools.com/cssref/css3_pr_transform.asp
You can make use of the images to change the style of checkboxes.
You can also use the following CSS which has been tested in Chrome. But this won't work in Firefox:
input[type='checkbox'] {
width: 4em;
height: 4em;
}
For a demo visit: http://www.456bereastreet.com/lab/styling-form-controls-revisited/checkbox/
This is tough to achieve if you want to maintain cross-browser compatiblity.
You may want to consider an input replacement plugin such as this one.
http://blogs.digitss.com/javascript/jquery-javascript/jquery-fancy-custom-radio-and-checkbox/

Safari and Chrome, position of rotated text goes haywire

well, I normally find the answer to my questions here but this time I didn't so I will now ask my first one here! :)
I have some rotated text on my page and it is positioned using position:absolute, like below:
.rotate-box .rotate-text{
display: block;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
position: absolute;
left: -45px;
top: 170px;
}
<div class="rotate-box">
<span class="rotate-text">Rotated text</span>
</div>
This works fine on all browsers (with webkit) except for Safari and Chrome where the text is displayed about 90px lower than in the other browsers.
To prevent this I have added:
#media screen and (-webkit-min-device-pixel-ratio:0){
.rotate-text {top: 80px !important;}
}
Now the text is in the correct place in all browsers but this doesn't feel right to me... Am I missing something here?
I hate adding browser exception code, it tends to come back and bite you in the long run... :o
Regards,
Anders
Change this line:
-webkit-transform: rotate(90deg);
to
-webkit-transform: rotate(90deg) translate(-100px, 16px);
As you know, this line is only used by the webkit browsers (Safari, Chrome)
You'll probably have to play around with the exact px figures, but then you can get rid of the extra #media screen tag.
Look into transform-origin. Basically, you should be able to do transform-origin: 0 0; (with all the prefixes, of course), and it'll hook the rotate to the top left, which sounds like what you want.