1 Replies - 2989 Views - Last Post: 27 October 2009 - 04:05 PM

#1 nightscream  Icon User is offline

  • D.I.C Head

Reputation: 19
  • View blog
  • Posts: 237
  • Joined: 04-December 08

Opera input width problem

Posted 26 October 2009 - 02:16 PM

My css works in every new browser(firefox 3, ie7-ie8, chrome, safari) but the problem is with opera 10(maybe below also).
If I type something in my input box breaks into 2 lines, I can fix this with changing the width of the parent div but than my div isn't centered anymore.

images:
http://img39.imagesh...s/i/formhj.jpg/
http://img39.imagesh...i/formfire.jpg/

html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gen3</title>
<meta http-equiv="content-type" content="en-gb" />
<meta http-equiv="keywords" content="gen3, script" />
<meta http-equiv="description" content="This can be changed." />
<link href="themes/hamza/styles2.css" type="text/css" rel="stylesheet" />
<!--[if gte IE 7]>
	<link href="themes/hamza/styles-ie.css" type="text/css" rel="stylesheet" />
<![endif]-->
<script type="text/javascript" src="http://localhost/ptc-hamza/themes/hamza/js/ads_pb.php"></script>
<script type="text/javascript" src="http://localhost/ptc-hamza/themes/hamza/js/principal2.js"></script>
<script type="text/javascript" src="http://localhost/ptc-hamza/themes/hamza/js/cb.js"></script>
<script type="text/javascript" src="themes/hamza/js/jquery-1.2.6.js"></script>

<script type="text/javascript" src="themes/hamza/js/menu-jq.js"></script>
<script language="javascript" type="text/javascript">
//<![CDATA[
var cot_loc0=(window.location.protocol == "https:")? "https://secure.comodo.com/trustlogo/javascript/cot.js" :
"http://www.trustlogo.com/trustlogo/javascript/cot.js";
document.writeln('<scr' + 'ipt language="Javascript" src="'+cot_loc0+'" type="text\/javascript">' + '<\/scr' + 'ipt>');
//]]>
</script>
</head>
<body>
<div id="container">
<div id="navigation">
	<div>
	<ul>
		<li><a href="index.php">Home</a>
		</li>

		<li><a href="ads.php">Surf Ads</a></li>
		<li><a href="adver.php">Advertise</a>
		</li>
		<li><a href="#">Support</a>
			<ul>
					<li><a href="forum/">Forum</a></li>
					<li><a href="contact.php">Contact</a></li>

			</ul>
		</li>
		<li><a href="register.php">Register</a></li>
		<li><a href="login.php" class="active">Login</a></li>
	</ul>
	</div>
	<div class="clear"></div>
</div>

<div class="logo"></div>
<div id="content">
	<div class="head"><h1>Login</h1></div>
	<div class="tbox">
		<div class="left"></div>
		<div class="back"></div>
		<div class="right"></div>
	</div>
	<div class="inner login">

		<div class="error"></div>
		<div class="login_form">
			<form action="" method="post">
				<div><input type="hidden" name="token" value="3bafe4a82f268f9751597c7f131daeb370e4f86c" /></div>
				<div><label>Username:</label> <input type="text" name="login_username" onfocus="text=this" value="" /></div>
				<div><label>Password:</label> <input type="password" id="pwd" onfocus="text=this" name="login_password" /></div>
				<div><label>Sec. Password:*</label> <input type="password" id="pwd2" onfocus="text=this" name="login_password2" /></div>

				<div id="keyboard">
					<div style="margin-left: 20px;"><a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a><a>8</a><a>9</a><a>0</a></div>
					<div style="margin-left: 30px;"><a>q</a><a>w</a><a>e</a><a>r</a><a>t</a><a>y</a><a>u</a><a>i</a><a>o</a><a>p</a></div>

					<div><a onclick="capital()" id="caps">Caps</a><a>a</a><a>s</a><a>d</a><a>f</a><a>g</a><a>h</a><a>i</a><a>j</a><a>k</a><a>l</a></div>
					<div><a onclick="capital(1)" id="shift">Shift</a><a>z</a><a>x</a><a>c</a><a>v</a><a>b</a><a>h</a><a>n</a><a>m</a></div>

					<div id="space"><a>space</a></div>
				</div>
				<p class="border"></p>
				<div class="text">Enter the characters exactly as they appear</div>
				<div class="captcha"><label></label><img src="image.php" width="120" height="36" alt="captcha" /> <input type="text" name="code" /></div>
				<p class="border"></p>
				<div><input type="hidden" name="7" value="" /></div>

				<div class="buttons"><input type="submit" name="Login2" class="reply" value="Login" /> <a href="reset.php" class="bigbutton">Recover Password</a></div>
				<div class="clear"></div>
			</form>
		</div>
		<p class="border"></p>
		<p class="info"><small>*You can enable the secondary password feature in the password settings.</small></p>
	</div>

	<div class="bbox">
		<div class="left"></div>
		<div class="back"></div>
		<div class="right"></div>
	</div><br />
</div>

<script type="text/javascript">
//<![CDATA[
var text;

var keyboard = document.getElementById('keyboard');
var a = keyboard.getElementsByTagName('a');
var caps = 0;
for(i=0; i<a.length-1; i++) {
	if(a[i].innerHTML != "Caps" && a[i].innerHTML != "Shift") {
		a[i].addEventListener('click', keyclick, false);
	}
}

function keyclick(e) {
	if(text==null) { text = document.getElementById('pwd'); }
	if(e.target.innerHTML == "Space") { 
		text.value += " ";
	}else {
		if(caps > 0) {
			text.value += e.target.innerHTML.toUpperCase();
		}else {
			text.value += e.target.innerHTML;
		}
		if(caps == 2) {
			caps = 1;
			capital();
		}
	}
}
function capital(shiftbut) {
	if(caps == 1 || shiftbut == 0 || caps == 2) {
		for(i=0; i<a.length-1; i++) {
			a[i].style.textTransform = "lowercase";
		}
		caps = 0;
	}else {
		for(i=0; i<a.length-1; i++) {
			a[i].style.textTransform = "uppercase";
		}
		caps = 1;
		if(shiftbut == 1) { caps = 2; }
	}
}
//]]>
</script>
<div id="foot">
	<p class="fleft"> 2009 - 2010 Caerus International LTD</p>

	<p class="fright"><a href="terms.php">Terms of Service</a> | <a href="privacy.php">Privacy</a> | <a href="news.php">News</a> | <a href="faq.php">FAQ</a></p>
</div>
</div>
<a href="http://www.instantssl.com" id="comodoTL">SSL</a>
<script language="Javascript" type="text/javascript">
COT("https://buxtro.com/cot_evssl.gif", "SC3", "none");

</script>
</body>
</html>



this is the css of that page
/*	-	Form	-	*/
#content form label {
	width: 135px; height: 26px;
	display: inline-block;
	color: #575757;
	font-size: 15px;
	vertical-align: middle;
}
#content form input, #content form textarea {
	background: url(images/input_back.jpg) repeat-x;
	width: 261px; height: 26px;
	margin: 10px 0 20px 0; padding: 10px 0 0 9px;
	border: 1px solid #dedede;
	vertical-align: middle;

	color: #6f6f6f;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}
#content form input.bigbutton, #content form input.reply { height: 38px; padding: 0; border: 0; display: inline-block; cursor: pointer; }
#content form input.reply { width: 100px; margin-left: 10px; border-right: 1px solid #dedede; }
#content form textarea {
	background: url(images/textarea_back.jpg) repeat-x;
	height: 164px;
	margin: -5px 0 0;
	border: 1px solid #dedede;
	vertical-align: top;
	
	font-size: 13px;
	line-height: 18px;
}
#content form .text, #content form .ftext { margin: 10px 0 0; text-align: center; font-size: 13px; }
#content form .ftext { margin: -10px 0 0; }
#content .captcha { margin: 10px 0 15px 0; }
#content .captcha img { border: 1px solid #dedede; vertical-align: middle; }
#content .captcha input { width: 85px; margin: 0 0 0 53px; }
#content .buttons { margin: 0 auto; }
#content .info { border-top: 1px solid #dedede; margin: 0 20px; padding: 25px 0 15px; text-align: center; }
#content .info small { font-size: 11px; }
/*	-	End Form	-	*/

/*	-	Registration 	-	*/
#content .register .reg_form, #content .login .login_form { width: 535px; margin: 0 auto; }
#content .register .reg_form form a, #content .login .login_form form a { color: #575757; }
#content .register .reg_form p.border, #content .login .login_form p.border { margin-bottom: 20px; border-bottom: 1px solid #e5e5e5; }
#content .register .buttons { width: 240px; }
#content .register .terms, #content .login .terms { margin: 0 auto; width: 320px; }
#content .register .terms label,#content .login .terms .label { width: 275px; padding: 10px 0; vertical-align: top; }
/*	-	End Registration 	-	*/

/*	-	Login	-	*/
/* See alos Registration */
#content .login .buttons { width: 305px; }
#content .login .buttons input { float: left; }
#content .login .buttons a.bigbutton { margin: 10px 0 0 10px; float: left; }



Is This A Good Question/Topic? 0
  • +

Replies To: Opera input width problem

#2 nightscream  Icon User is offline

  • D.I.C Head

Reputation: 19
  • View blog
  • Posts: 237
  • Joined: 04-December 08

Re: Opera input width problem

Posted 27 October 2009 - 04:05 PM

I'm asking for some kind of opera only hack.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1