I have a slick slider carousel where I have images and a caption. If captions are short and in one line the navigation arrows are perfectly aligned vertically. However, if captions take up more that one line the navigation arrows comes down and it looks a bit strange.
The issue here is that the arrows have a css top: 50% and they get aligned with the container. But in my situation I would like them to be vertically aligned only with the images not with the images+caption. So, independently of how much content I would have bellow each image on each slide the arrows would always be vertically aligned with only the image. Is this possible at all?
I have different widths for borders applied to a div, and only Firefox shows thin seams when the div is rotated to any angle using CSS3 Transition Rotate. These thin seams change slightly depending on angle.
If the borders are the same width, Firefox behaves nicely.
The div is not using an image, just a colored background, but the content seems irrelevant for the border of different widths issue I'm having.
Unfortunately the area behind the border is going to be reserved so I'm not able to use another div as a wrapper.
Here's a jsFiddle of an example to be seen in Firefox that has this issue. There are no issues in Chrome.
Status Update: Updated jsFiddle to show border-style prior to border-color per CSS rule but no change.
I wonder if this issue is because border-image property, which I am not using, allows up to eight images, one for each border slice. That said, if there were border-corner-color properties then that would solve the issue when using Rotate.
I have made a solution using :before in CSS: jsFiddle example.
I added this code:
#thinLinesInFirefox:before {
content: '';
display: block;
width: 201px;
height: 201px;
position: absolute;
top: -105px;
left: -120px;
border-top: 104px;
border-right: 110px;
border-bottom: 115px;
border-left: 119px;
/* Define border-style before border-class per CSS rule. */
border-style: solid;
/* Define boder-color */
border-color: black;
z-index: -1;
}
Basically, it overlays the same square using :before, except I have decreased the border-top and border-left by 1 pixel, and then increased the width and height by 1 pixel so that the 'real' div underneath appears to be the same size.
Because of the different borders, the seams are in slightly different positions, so what is underneath doesn't show.
Those look like antialiasing artifacts from painting the border in several separate pieces. Each piece is being rotated, so its edges get antialiased, with the result that some pixels at the join are partially transparent (because they're the result of painting two partially-transparent pixels on top of each other).
There is no problem on this testcase in Chrome because at corners it paints the borders under each other. Of course that causes non-opaque borders to be totally broken in Chrome; see http://snook.ca/archives/html_and_css/safari-transparent-borders
And if you were to make the border colors slightly different, you'd get seams in WebKit too. See http://jsfiddle.net/YVCeX/ (it shows seams in the div's background color, whereas Firefox optimizes away background painting under opaque borders, which is why you're seeing red seams, not blue ones.
There's really no good way to handle this, in general, without turning off antialiasing for border edges and having jaggy borders when rotated.
I have a rotating div that contains a number of divs around its edge. I'd like to give the illusion of the child divs always staying right side up. To do this I tried rotating the child divs in reverse ( transform:rotate(-360deg); ) but they seem to always go in the same direction as the parent div.
Is there a way have the child divs always appear right side up?
Here's a Fiddle: http://jsfiddle.net/J7xyB/
Solved it
Courtesy of http://lea.verou.me/2012/02/moving-an-element-along-a-circle/
http://jsfiddle.net/cswkd/
I have noticed a problem with CSS3 rounded corners. They contain inner elements perfectly but when the container has a position:relative applied to it they no longer contain elements. I have set up 2 fiddles to explain.
This has the container set to position:relative
http://jsfiddle.net/abqHE/12/
This one isn't.
http://jsfiddle.net/abqHE/11/
You can see that we have a rounded container only when position is not applied. The problem is that we need to use positioning. Any ideas how to fix this.
Marvellous
Is there any way to combine zoom property with values different from 1 and filter?
For example, zoom: .5 on block with AlphaImageLoader make transparent areas become black. Assigning background color fix this problem but I need it to be transparent...
Or maybe there is any way to scale with background images in IE6?..
After struggling about two days with this problem,
I found, that there is several reasons, causing transparent areas on child element become black:
zoom > 1 or < 1 on parent block;
position: relative or absolute on parent element;
negative left or top on child element;
clip on child element;
filter on the same element.
I didn't tested much, but in my case applying "filter: alpha(opacity=100);" to parent block helps to get rid of transparency bug.
Maybe this will be useful to somebody...