HI my problem is why in Safari on Win margin-right is working but on Mac not? Its a bug or i have anything bad? Is any alternative how to resolve it?
my not working css
{
top:auto;
bottom:0px;
z-index:100;
margin:0 0 0 48%;
background-color:#fff;
background-image:url("../img/arr_up_blue.png");
-webkit-transition: .7s;
transition: .7s;
height:0;
border:0;
}
Related
Hello i am using this code to flip my block on my website:
.tegels {
/*position:relative;*/
width:25.2%;
height:37.4%;
overflow:hidden;
float:left;
margin-top:3.5vw;
margin-bottom:0px;
margin-left:4.8%;
margin-right:2%;
list-style-type: none;
display:inline-block;
}
.tegels figure {
margin:0;
padding:0;
position:relative;
cursor:pointer;
margin-left:-3vw;
width:100%;
}
.tegels figure img {
display:block;
position:relative;
z-index:10;
margin-left:3vw;
width:100%;
height:100%;
}
.tegels figure figcaption {
display:block;
position:absolute;
z-index:5;
margin-left:3vw;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:100%;
}
.tegels figure h2 {
font-family:Garamond, Georgia, serif;
color:black;
font-size:2.1vw;
text-align:center;
margin-bottom:1vw;
}
.tegels figure p {
display:block;
font-family:Garamond, Georgia, serif;
font-size:1.5vw;
line-height:1.7vw;
margin:0;
color:#fff;
text-align:center;
}
.tegels figure figcaption {
top:0;
left:0;
width:100%;
height:100%;
padding:2vw 1vw;
background-color:rgba(204,204,204, 0.5);
text-align:center;
backface-visibility:hidden;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
transform:rotateY(-180deg);
-ms-transform:all .01s;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.tegels figure img {
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.tegels figure:hover img,figure.hover img {
-webkit-transform:rotateY(90deg);
-moz-transform:rotateY(90deg);
transform:rotateY(90deg)
}
.tegels figure:hover figcaption,figure.hover figcaption {
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
transform:rotateY(0)
}
I searched for 3 hours for a solution but i couldn't find it. So that's why i am asking it on the best website forum of all time. Haha, thanks for your time to read this for me. My website is online at www.gester.nl. I looked for codes to target the internet explorer but it did'nt work with my version so i don't know where the problem is in my code.
Looks pretty much a bug in IE11 with windows 10 with backface-visibility and WebGL.
I have tested it in:
IE10 with Windows 8
IE10 with Windows 7
IE11 with Windows 8.1
IE11 with Windows 7
All they work properly
Please see the known issues from caniuse.
I haven't found a solution yet but you know what's the error about.
I have a simple menu that I built and that I'm trying add animations to. I added a slide on hover animation but when you hover over the item the slide animation goes over the text blocking it. I'm pretty sure its going to be an easy fix that I'm over looking but help would be appreciated. The issue is coming from these CSS classes I'm pretty sure:
.nav2Active{
font-size:16px;
font-weight:bold;
padding-top:10px;
padding-bottom:10px;
width:100px;
border-left:thin solid transparent;
background:transparent;
}
.nav2Active::before{
content:'';
background:red;
position:absolute;
height:30px;
width:0%;
-webkit-transition:width .3s ease-out;
-moz-transition:width .3s ease-out;
-ms-transition:width .3s ease-out;
z-index:0;
}
.nav2Active a{
color:#000;
text-decoration:none;
padding-left:10px;
}
.nav2Active:hover::before{
border-left:thin solid #F60;
width:100px;
}
.nav2Active:active{
background: #CCC;
border-left: #F60;
}
http://jsfiddle.net/pwfv33hs/
Hay its very easy do this :
.nav2Active:hover::before{
border-left:thin solid #F60;
width:100px;
z-index:-1
}
It's a z-index issue, you set a value for the pseudo element = 0.
.nav2Active::before{
z-index:0;
}
But all elements has the same value as default. In order to work you can set a -1 value. But I don't like to work with that negative values. I suggest this:
.nav2Active a{
position:relative;
z-index:1;
}
Check the UpdatedFiddle
This is my website http://aaronisdead.com/sites/dejatest/deja.html
When viewed in Chrome, it looks almost exactly what I want it to. In Firefox, all of the text is in the center of the page instead of the center of divs. There's also a problem with the filter that causes every div to appear black(a big problem when the entire site is pictures)
HTML Structure
<div id="container">
<div id="row">
<div class="cell A1"><img class="spacer" src="spacer.png"><div id="text">MIKEY<br/><p>SPINDRIFT KIOSK</p>DIGITAL COLLAGE</div></div>
<div class="cell A2"><img class="spacer" src="spacer.png"><div id="text">ERIC<br/><p>LIZ & RYAN HEMSWORTH</p>ALBUM DESIGN</div></div>
<div class="cell A3"><img class="spacer" src="spacer.png"><div id="text">MIKEY<br/><p>EPHEMERA</p>DIGITAL COLLAGE</div></div>
<div class="cell A4"><img class="spacer" src="spacer.png"><div id="text">ERIC<br/><p>REJJIE SNOW</p>SITE DESIGN</div></div>
</div>
This is just one row, there are three more with the exact same structure
CSS:
I've reduced a lot of the code into just the code for one row for simplicity reasons
.A1, .A2, .A3, .A4 {
position:relative;
}
.A1:before, .A2:before, .A3:before, .A4:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-webkit-transition: -webkit-filter .2s ease-in-out;
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(90%) brightness(30%); /* Google Chrome, Safari 6+ & Opera 15+ */
z-index: -1;
}
.A1:before {background-image:url('spindrift.jpg'); background-size:cover;}
.A2:before {background-image:url('daynnite.jpg'); background-size:cover;}
.A3:before {background-image:url('ephemera.jpg'); background-size:cover;}
.A4:before {background-image:url('rejjiesnow.jpg'); background-size:cover;}
.A1:hover:before, .A2:hover:before, .A3:hover:before, .A4:hover:before, {
-webkit-filter:none;
}
/* text hover */
div.cell:hover #text{
opacity:0;
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
#text{
opacity:1;
display:table;
position:absolute;
z-index:999;
color:#ffffff;
text-align:center;
width:100%;
top:44%;
left:0;
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
font:12px ProximaNovaRegular, sans serif;
text-decoration:none;
}
p {
font:16px ProximaNovaBold, sans serif;
margin:0;
padding:1 0 1 0;
}
/*Table rules*/
.container{
display:table-row;
width:100%;
}
.row{
display:table-row;
width:100%;
}
.cell{
position:relative;
display:table-cell;
width:700px;
height:auto;
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
html{
margin:0;
padding:0;
height:100%;
width:100%;
}
body{
height:100%;
width:100%;
margin:0;
padding:0;
background-color:black;
color:black;
}
/* hover */
div.cell:hover {
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
opacity:1.0;
}
I'm not sure what's causing this and I hate asking such a vague question here so I've included a lot of code..If .cell {display:table-cell;} is disabled, the site turns into something recognizable. I realize there's a grayscale filter that's not working on Firefox, but my main concern here is getting the text in the center of the divs.
Feel free to check out the source code on the actual site.
You should have a doctype tag first in your document. Right now you have nothing that tells the browser what HTML version you want to use, so it will use Quirks mode, which is basically to be compatible with the oldest browser that you can imagine.
Your HTML markup is invalid, at least for the HTML version used. You have <div> elements inside <a> elements, and that is only allowed in HTML 5. Unless you have a doctype tag that says that you are using HTML 5, the browser will try to fix the markup, for example by moving the div outside the a.
Your markup has other errors, for example elements nested wrong. You have elements nested like this:
<div>
<a>
<img>
<div>
</div>
</div>
</a>
As you see, the div and a ending tags are in the wrong order.
You have the style sheed completely outside the HTML document. It should be inside the <head> tag.
The <head> and <title> tags are missing. They are required elements in an HTML document.
Fixing these issues will give you the basics for getting a consistent result in different browsers.
Remove from your #text
position:absolute
I tested on FF28 and it works.
Let me know if this is what you want.
and your background its not showing in FF, try adding all Vendors in your background-image:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
You don't have a doctype so you are in 'quirks mode' and it's like 1995 all over again and no two browsers may look the same. All new web pages MUST have a doctype. Use this one:
<!DOCTYPE html>
That will put all browsers into 'standards mode'.
Unfortunately, because you didn't start out in standards mode, this may make your page move around a bit and look different than it does now but it must be done.
In addition, your markup is invalid cause you put your script tags outside of the html element. The html element is, essentially, the document itself and you can't do that.
For a complete list of all your errors, plug in your site link here. Right now, it shows 98 HTML errors alone.
I'm working on a transition onmouse hover an div. The effect should be a text merging from the top to the middle of the div while the div turns from square to circle. The problem is that if in FireFox the square to circle effect works but not the text droping down from top, this effect only works on Chrome and IE. Does anyone encounter this before and can someone tell me why this is happening?
The code of my buttons are below:
#navigation{
font-size:14px;
float:left;
left:0;
height:100%;
position:static;
width:65px;
margin-top:6.5%;
margin-left:10%;
}
#tab1{
float:left;
width:65px;
height:65px;
left:0;
transition:all 1s, all 1.1s;
-webkit-transition:all 1s, all 1.1s;
-moz-transition:all 1s, all 1.1s;
margin-top:40px;
box-shadow: 1px 1px 2px #000;
}
.tab1h{
width:65px;
height:65px;
visibility:none;
position: absolute;
opacity: 0;
vertical-align: middle;
text-align:center;
transition:all 1s, all 1.1s;
-webkit-transition:all 1s, all 1.1s;
-moz-transition:all 1s, all 1.1s;
}
#tab1:hover {
border-radius:50%;
overflow:hidden;
visibility:none;
}
#tab1:hover > .tab1h {
visibility:visible;
float:left;
opacity:1;
padding-top:20px;
}
<div id="navigationi">
<a href="index.html" >
<div id="tab1" style="background-color:#f5f4f0; font-size:14px;">
<div class="tab1h">
Home
</div>
</div>
</a>
</div>
So here is my html and css also here is a JSFiddle http://jsfiddle.net/MFcS5/.
Thanks,Victor
Removing overflow:hidden from #tab1:hover solves the problem. Here's a fiddle showing it working as intended in Firefox (as well as Chrome and IE).
It could be caused by this bug: "CSS transitions don't start due to frame reconstruction of ancestor or self..."; changing the overflow causes #tab1 to be redrawn at the same time as the transition is supposed to start, so its child .tab1h doesn't get to transition.
Background
I'm customising a tumblr theme (Source: hasaportfolio), and I am trying to change the size of one particular element.
This element, on :hover, is meant to transition opacity - "fade in". What is happening, however, is that once I change the pixel sizes the transitions refuse to work, and the newly appearing content does not appear at all.
HTML Code
The HTML code this is being applied to is as follows. I've commented it as well as I can.
<div class="post video featured"> <!-- wrapper, no css attached -->
<div class="box-featured">
<iframe src="http://player.vimeo.com/video/30284533" width="750" height="430" frameborder="0"></iframe>
<div class="box-caption-text-featured"> <!-- this div and content is "hidden" (0% opacity) until :hover -->
<h1>Paint</h1>
<p>I hate yogurt. It's just stuff with bits in.</p>
<p>You know how I sometimes have really brilliant ideas? You've swallowed a planet!</p>
</div><!-- box-caption-text-featured -->
# <!-- this a is the "trigger" for the transition. Normally it would link to the post permalink -->
</div><!-- box-featured -->
</div><!-- post -->
I also have another copy of this code, the only difference is that it is without the -featured at the end of each class definition. This is so I can see if the code works at its 'original' size (which it does).
CSS Code
The original code for running these boxes follows:
.box { float:left; width:250px; height:130px; overflow:hidden; margin:5px; position:relative; background-color:#F7F5F5; vertical-align:middle; padding:-5px 0 0 0; }
.box-caption, { width:220px; height:130px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:99; background-color:transparent; filter:alpha(opacity-0); opacity:0; display:inline-block; padding:0px 15px; text-indent:-2000px; }
.box-caption-text { color:#fff; width:220px; height:130px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:95; font-size:12px; line-height:16px; background-color:transparent; filter:alpha(opacity=0); padding:0px 15px; opacity:0; display:inline-block; -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.box:hover .box-caption { display:inline-block; background-color:transparent; }
.box:hover .box-caption-text { opacity:.85; filter:alpha(opacity=85); background-color:#ff9711; }
My changed code is as follows. The only things I have changed are the width and height pixel values.
.box-featured { float:left; width:750px; height:430px; overflow:hidden; margin:5px; position:relative; background-color:#F7F5F5; vertical-align:middle; padding:-5px 0 0 0; }
.box-caption-featured { width:750px; height:430px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:99; background-color:#f00; filter:alpha(opacity-0); opacity:0; display:inline-block; padding:0px 15px; text-indent:-2000px; }
.box-caption-text-featured { color:#fff; width:750px; height:430px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:95; font-size:12px; line-height:16px; background-color:transparent; filter:alpha(opacity=0); padding:0px 15px; opacity:0; display:inline-block; -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.box:hover .box-caption-featured { display:inline-block; background-color:transparent; }
.box:hover .box-caption-text-featured { opacity:.85; filter:alpha(opacity=85); background-color:#ff9711; }
Have I just missed something dumb, or is there an issue in this code that prevents what I'm trying to do?
Example Page
There's an example of what I'm taking about over here.
What i'm thinking at this point is that you need to change it to:
.box-featured:hover