Q1. Under Google Chrome, when mouse points at the right side mon, the blue border line shows, how to solve this problem also? (other browser does not present any problem)
Q2. I browse under microsoft IE11, far right side ’s contact menu being cut off half, other browser looks normal, how to solve this problem ?
my web: http://vicky.bixone.com/ecoxx/
if this is the problem you are facing https://prnt.sc/p6n4k1
it is because of outline, you can add this code to your css for solving the issue
for only this issue
.navbar-button.show-info:focus {
outline: none;
}
and for 2nd question you need to add cross browser support https://www.screencast.com/t/QRHl1s83H
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
its Outline Apply below css.
*:focus {
outline: none;
}
Related
I was trying to modify this card from a grid plugin for wordpress, and there's an element that previously was a "read more" anchor element, and trying to save some time i decide it to use it as the green button from the picture below, but the problem is that is only showed in a hover state.
The url is the following one: http://uai.compite.cl
Is there any way to apply a rule for the not hover div? i tried the :not(:hover) but it doesn't seem to work in this case.
Thank you for the help
a.tg-link-button {
opacity: 1 !important;
-webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1) !important;
-moz-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1) !important;
-ms-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1) !important;
-o-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1) !important;
transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1) !important;
}
I just added !important so it overrides the regular setting.
If i understood correctly you need the hover effect to be on every news div visible without hovering.
Just add on your css
.quito .tg-light .tg-media-button,
.quito .tg-light .tg-link-button {
opacity:1;
}
I've done this in CSS.
It works great in Google Chrome after adding:
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
But in FireFox it looks like this:
See source here
I tried several things and searched a lot. I don't know what to do to get rid of those borders FireFox creates. Most stuff I find is about transition, which I don't use. Any ideas would be very much welcome.
References:
- CSS3 transform rotate causing 1px shift in Chrome
- -webkit-transform rotate - Pixelated images in Chrome
- CSS transition effect makes image blurry / moves image 1px, in Chrome?
Adding translateZ(1px) before the rotation rule seems to remove those artifacts:
transform: translateZ(1px) rotate(-45deg);
See this question.
I have an unordered list with a few list items that act as flip cards using CSS 3D transforms. I want them to flip via clicks on links/anchor elements inside of the list items, and these links fill up the entire list item as well.
The list items look and act fine in their default non-flipped state, but once I click one and it flips, the clickable link area on the back side of it is only on the top half of the list item. When I inspect in Chrome, the link area is still filling up the entire height of the list item, so I'm not sure what is going on.
Fiddle: http://jsfiddle.net/chucknelson/B8aaR/
Below is a summary of the transform properties I'm using on various elements (see fiddle for detail):
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 100% 1.5em;
-webkit-transform: rotateX(180deg);
Note that I'm testing in Chrome 28 on Windows, and I'm just using -webkit prefix items in the fiddle. I also apologize for any messy CSS or markup, this problem had me iterating a bit. Any help in understanding what is happening is greatly appreciated!
Update 8/11/2013:
I was having this same problem with a 2D transforms on list items (just flipping the item, no front/back). Adding #thirtydot's translateZ(1px) transform in the CSS for the <a> tag fixed that one too. So it looks like the issue is related to the z-axis...but only on part of the link. Maybe this is a bug in browsers?
This problem may be the result of a webkit rendering bug, but the solution was to tranlsate the link's Z-axis by 1px - this seemed to push the link layer up and have it fully clickable.
To fix the 3D transform (via the fiddle from #thirtydot http://jsfiddle.net/thirtydot/YCGjZ/7/), some javascript was required:
setTimeout(function() {
flipTarget.find('div.back a').css('-webkit-transform', 'translateZ(1px)');
flipTarget.find('div.back a').css('transform', 'translateZ(1px)');
}, 600);
When using a 2D transform, adding translateZ in the CSS class worked:
.flipped {
border-top: 1px solid black;
background-color: #555;
-webkit-transform: rotateX(180deg);
}
.flipped a {
color: #eee;
text-decoration: line-through;
-webkit-transform: scaleY(-1) translateZ(1px); /* the fix */
}
It seems that android decides to overlay inputs when they are focused with another input...
Because of this it is destroying layouts, for example if you view this image
There are only TWO inputs in the DOM so i'm not sure where or how android is manipulating this input to draw it on the screen.
So what I am trying to do is remove the floating input which is drawn on the screen for no apparent reason.
I used the following code from this question:
input[type=text]
{
-webkit-user-modify: read-write-plaintext-only;
-webkit-backface-visibility: hidden;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
However i noticed passwords would still have an overlay, so to fix this i chagned the input field from a Password field to a text field and applied the following css:
input.passwordField {
-webkit-text-security: disc;
}
Disable Android browser's input overlays?
some designs on the Apple's user's webpage show a photo that is tilted slightly, like at a 5 or 10 degree angle. while this is no big deal, it does make the webpage totally different from "all the rest".
is it true that currently using HTML or CSS, this can't be done yet?
like the big photo in the middle:
alt text http://img7.imageshack.us/img7/383/phototilt.png
(the program lets you choose photos and then create the page (html and jpg) dynamically for you)
CCS 3 will offer this possibility, but it's still not cross-browser and you cannot do it with traditional HTML + CSS... yet.
Websites having a tilted image do it by rotating it in, say, Photoshop and making its background transparent. That's the whole trick there's to it.
Tip: save that picture to your HD and see by yourself. That's probably just an squared image with transparent background, or maybe it has the current background cut nicely to fit there.
You can do it, but only in Firefox 3.5+ and Safari 3.2+ (and recent webkit based browsers). Both provide browser specific CSS extensions for skew: -moz-transform and -webkit-transform respectively.
Here's a nice example that builds a 3d looking cube out of divs: (from http://www.fofronline.com/2009-04/3d-cube-using-css-transformations/)
<div class="cube">
<div class="topFace">
<div>
Content
</div>
</div>
<div class="leftFace">
Content
</div>
<div class="rightFace">
Content
</div>
</div>
And CSS:
.cube {
position: relative;
top: 200px;
}
.rightFace,
.leftFace,
.topFace div {
padding: 10px;
width: 180px;
height: 180px;
}
.rightFace,
.leftFace,
.topFace {
position: absolute;
}
.leftFace {
-webkit-transform: skewY(30deg);
-moz-transform: skewY(30deg);
background-color: #ccc;
}
.rightFace {
-webkit-transform: skewY(-30deg);
-moz-transform: skewY(-30deg);
background-color: #ddd;
left: 200px;
}
Yes, with CSS3 you can:
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
Supported by all the modern browsers and IE9+.
See CSS transform on MDN for more information.
To my knowledge you can not do that. Are you sure the image you are thinking of isn't tilted in Photoshop or similar and just added to the page like that?
You can use Apple specific CSS attributes (soon to be ratified, and then they'll remove the webkit prefixes for them) to do this and animation effects, but it will only show up in Safari and Chrome right now. Still, they look quite pretty and CSS is simple to do.
Right now it's probably just done in Photoshop, and nicely anti-aliased there as well, so that it has a consistent cross-browser appearance.
We are doing something similar at work, we have to do it on the fly.
You can't do it with just html/css, however we are using an image library through a php script to generate them automatically, and then make the background transparent.
Use a PHP GD Library. Makes things so much easier.
No. You can't.
Tilting images and text is still JavaScript juju.
Edit: Or, at least, you couldn't with CSS2. Starting with CSS3, there's the transform property, which includes rotations.