Click here to Skip to main content
15,868,000 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
In my site http://probuzzweb.co.uk/ I have a weird problem in that my slide out login bar using CSS3 Transition works in all browsers (except IE of course) does something weird in Opera: The slide in/slide out transition works, but it leaves a trail when it slides back in. I am using this css for the positioning etc. of the tab:

CSS
#tabtext, #tabtextie{
	position:			fixed;
	text-transform:		uppercase;
	padding:			5px;
	border-radius:		25px 25px 0 0;
	color:				#ccc;
	background-color:	#242424;
	text-align:			center;
	cursor:				pointer;
}
#tabtext{
	height:				20px;
	width:				150px;
	margin:				65px 120px;
}
#tabtextie{
	margin:				0 185px;
	padding:			5px;
	height:				20px;
	width:				150px;
}
#tab{
	position:			fixed;
	width:				185px;
	height:				400px;
	color:				#ccc;
	background-color:	#242424;
	left:				0;
	margin:				0 auto;
	margin-top:			-200px;
	top:				50%;
	padding-left:		20px;
	border-radius:		0 0 25px 0;
	z-index:			2;
}
#tab:hover{
	left:				200px;
}


And this is the css for the actual transition:

CSS
#tab{
	transition:				.5s linear;
	-webkit-transition:		.5s linear;
	-o-transition:			.5s linear;
	-moz-transition:		.5s linear;
}
#tab:hover{
	transition:				.5s linear;
	-webkit-transition:		.5s linear;
	-o-transition:			.5s linear;
	-moz-transition:		.5s linear;
}


And this is the html:

HTML
<section id="tab">
				<!--[if gt IE 8]><!--><div id="tabtext">Login/Register</div><!--<![endif]-->
				<!--[if lt IE 8]><div id="tabtextie">Login/Register</div><![endif]-->
				<h3>Login</h3>
				<form action="default.php" method="post">
					<label for="Lname">Your Username:</label>
					<input type="text" id="Lname"><br>
					<label for="Lpass">Your Password:</label>
					<input type="password" id="Lpass"><br><br>
					<input type="submit" value="Submit">
				</form>
				<br>
				<h3>Register</h3>
				<form action="default.php" method="post">
					<label for="Rname">Your Username:</label>
					<input type="text" id="Rname"><br>
					<label for="Rpass">Your Password:</label>
					<input type="password" id="Rpass"><br>
					<label for="Rpass2">Password again:</label>
					<input type="password" id="Rpass2"><br><br>
					<input type="submit" value="Submit">
				</form>
			</br></br></br></br></br></br></br></br></section>


If you run my site http://probuzzweb.co.uk/ in any browser it works fine...apart from opera. Run it and you'll see what I mean. It's bizarre and I can't figure out how to fix it.

Any help would be greatly appreciated. Thanks.
Posted

1 solution

Hey there,

add
CSS
-o-transform: translate(0px);

on too:
CSS
#tab:hover{
	transition:				.5s linear;
	-webkit-transition:		.5s linear;
	-o-transition:			.5s linear;
	-moz-transition:		.5s linear;
	 -o-transform: translate(0px);
}


no worries
Jrop
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900