On 24/04/2011 9:48 AM, J.B. Nicholson-Owens wrote:
I was playing with http://csstest.forestfield.org/fun-with-transitions/
and I noticed that in some browsers (Firefox 4.0, for example) the top
of the border around "Place a statue of Dr. Doom in a local park" moves
down as the hover transition takes effect. In Konqueror 4.5.5 this does
not happen. This version of Konqueror doesn't show the transition, but I
can see the hover and non-hover state and easily see the top edge of the
box not move.
Yes as the CSS currently stands.
Should the top of the box move down?
Is there a way I can stop the top of the box from moving without
absolutely positioning the element?
Yes.
I'd like to make the box height grow by increasing downward (moving the
bottom edge of the box) as Konqueror 4.5.5 does.
Thanks.
What is happening in FF is that the default margin-top (1em) of p.effect
is growing in height along with the font-size. Give this element an
absolute value of margin-top but not in ems. You can also make the CSS a
lot more simpler by using the shorthand 'transition: all 5s'. Here is
the CSS.
@font-face {
font-family: "League Gothic";
src: local("League Gothic"),
url("League-Gothic.otf");
}
p.effect {
text-transform: uppercase;
font-family: "League Gothic", Courier, sans-serif;
font-size: 200%;
color: black;
background-color: inherit;
margin-left: auto;
margin-right: auto;
margin-top:32px; /* <------------------ Add */
text-shadow: #ddd 10px 10px .5em;
border: 1px solid black;
-moz-transition: all 5s;
-webkit-transition: all 5s;
-o-transition: all 5s;
-khtml-transition: all 5s;
-ms-transition: all 5s;
transition: all 5s;
-moz-transition-timing-function: ease-out;
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
-khtml-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
p.effect:hover {
color: red; /* <------------------ all
transitional values */
text-shadow: #bbb 10px 10px 0.01em;/* <------------------ all
transitional values */
font-size: 400%; /* <------------------ all
transitional values */
}
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
