Animated button position shows different in firefox, crome and in IE. Can anybody help me?

HTML & CSS
1

<div class="btn-position3">
Animated button position shows different in firefox, crome and in IE. Can anybody help me?

following are codes HTML & css

HTML

		<div class="back">
				<a href="http://nilahomes.in/" target="_blank"><div class="button_base b07_3d_double_roll">
					<div>VIEW WORK</div>
					<div>VIEW WORK</div>
					<div>VIEW WORK</div>
					<div>VIEW WORK</div>
				</div></a>
			</div>
			</div>

CSS

.btn-position3 {
	-webkit-position:relative;
	-moz-position:relative;
	position:relative;
	left: 50%;
    top: 8%;
    z-index: 500;
}

.preserve-3d {
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}



.back {
    height: 200px;
    background-color: transparent;
    box-sizing: border-box;
    counter-increment: bc;
    padding: 0px 5px 5px 5px;
}

.back:before {

    position: absolute;
    padding: 10px;
}
2

Hi @aruninssyssol and a warm welcome to the forums.

They may be showing different because there is a problem in your HTML, maybe an extra closing div tag? Check that the HTML validates and that there is nothing odd in there. As far as I can tell that HTML you posted is not correct and that is a very possible reason for your problem.

Otherwise it may help posting some screenshots so that we can see the actual difference…
What is the difference between them?

Andres

3 Likes
3

The code you supplied does not produce an animated button and therefore we can’t help with your problem.

Please post a working example and we will be able to sort you out straight away :slight_smile:

Note that pre-fixes were never required for position:relative.

	-webkit-position:relative;
	-moz-position:relative;
	position:relative;

Just use position:relative.

position:relative;

If you are animating using position:relative then it would instead be more performant to use transform:translate instead.

Note that your top:8% on btn-position3 may not work the same cross browser unless the parent has a fixed height. Percentage top should resolve to auto if the containing block has no height defined. It looks like Firefox will apply the percentage if that class is applied to the button-base element but Chrome will not apply it because the wrapping anchor has no height defined. Firefox is incorrect in its behaviour here.

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.