Rendering Problem with Switcher in IE

Question

hsmukunda 0 Newbie Poster

12 Years Ago

Hi

below is the html code for login switcher which is not rendering properly in Internet Explorer.

Please see the images attached and zipped folder contains html, css and Jquery libraries.

The whole code is posted where as to make it does not generate errors in firebug.

ATTACHED IMAGES OF RENDERING IN IE AND FIREFOX.

We can clearly see no rendering of space after html elements in internet explorer.

We are using JQuery for sliding of the sign in and register switchers.

Secondly in both IE and FF an login box gets overlapped when clicked sign in or register.
Looking for your valuable inputs.

<title>
	
</title><link rel="stylesheet" type="text/css" href="login.aspx_files/style_css.css" media="screen"><link rel="stylesheet" type="text/css" href="login.aspx_files/tabs-slideshow.css"><link rel="stylesheet" type="text/css" href="login.aspx_files/footer_css.css" media="screen"><link rel="stylesheet" type="text/css" href="login.aspx_files/footpanel.css" media="screen"><link rel="stylesheet" type="text/css" href="login.aspx_files/search.css"><link rel="stylesheet" type="text/css" href="login.aspx_files/style.css"><link rel="stylesheet" type="text/css" href="login.aspx_files/iecss.css">
    <script type="text/javascript" src="login.aspx_files/jquery-min.js"></script>
	<script type="text/javascript" src="login.aspx_files/script2.js"></script>
    <script type="text/javascript" src="login.aspx_files/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.button').getit({ speed: 150, delay: 200 });
        });
	</script>
</head><body>
   <form method="post" action="login.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">









    <div class="top-header">
	    <div class="main">
		    <div class="mainbutton clicknoclose" id="mainbutton">
				<a title="" href="#" class="button button6 hello22" rel="switcher1" id="button1">
					Sign in
				</a>
				<a title="" href="#" class="button7 button hello22" rel="switcher3" id="button1">
					Register
				</a> 
		    </div>
	    </div>
    </div>
    <div style="width: 296px; height: 310px; top: 50px; left: 697.5px; display: none;" class="tip hello22 clicknoclose .inactive101" id="tip1">
		<div style="display: none;" class="switcher1 switcher" id="switcher">
			<div class="sw_mid">
                <fieldset class="login_fieldset">
				    <legend class="login_legend">Sign In</legend>
					<p>
					    <label for="username1" class="username_label">Username:</label>
                        <input name="ctl00$usernameTextBox" id="usernameTextBox" class="swid_username" type="text">
                        <span id="usernameTextBoxRequiredFieldValidator" style="color: Red; font-size: 12px; visibility: hidden;">*</span>
					</p>
					<p>
					    <label for="passowrd1" class="username_label">Password:</label>
                        <input name="ctl00$passwordTextBox" id="passwordTextBox" class="swid_username" type="password">
                        <span id="passwordTextBoxRequiredFieldValidator" style="color: Red; font-size: 12px; visibility: hidden;">*</span>
					</p>
                    <input name="ctl00$loginButton" value="Sign in" onclick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$loginButton", "", true, "login", "", false, false))' id="loginButton" class="button8" type="submit">
                    <input id="remember_passwordCheckbox" name="ctl00$remember_passwordCheckbox" type="checkbox">
					<label for="remember_password">Remember Password</label><br>
					<a href="#" rel="switcher2" class="forgot linkdiv button9 hello22">forgot password?</a>
					<a href="#" rel="switcher3" class="forgot linkdiv button9 hello22">Register Now</a><br>
				</fieldset>
			</div>
		</div>
		<div style="display: none;" class="switcher2 switcher" id="switcher">
			<div class="sw_mid">
				<fieldset class="quick_registration_fieldset">
					<legend class="forgot_password_legend">Forgot Your Password?</legend>
					<p>
						<label for="username1" class="username_label">Your email ID:</label>
                        <input name="ctl00$fpEmailIDTextbox" id="fpEmailIDTextbox" class="swid_username" type="text">
                        <span id="fpEmailIDTextboxRequiredFieldValidator" style="color: Red; font-size: 12px; visibility: hidden;">*</span>
					</p>
                    <span id="fpEmailIDTextboxRegularExpressionValidator" style="color: Red; font-size: 12px; display: none;">Invalid Email ID</span><br>
                    <input name="ctl00$resetButton" value="Reset" onclick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$resetButton", "", true, "forgotPassword", "", false, false))' id="resetButton" class="button8" type="submit">
				</fieldset>
			</div>			
		</div>
		<div style="" class="switcher3 switcher active" id="switcher">		
			<div class="sw_mid">
				<fieldset class="quick_registration_fieldset">
					<legend class="forgot_password_legend">Register Now</legend>
					<p>
					    <label for="username1" class="username_label">Your email ID:</label>
                        <input name="ctl00$regEmailIDTextBox" id="regEmailIDTextBox" class="swid_username" type="text">
                        <span id="regEmailIDTextBoxRequiredFieldValidator" style="color: Red; font-size: 12px; visibility: hidden;">*</span>
					</p>
                    <span id="regEmailIDTextBoxRegularExpressionValidator" style="color: Red; font-size: 12px; display: none;">Invalid Email ID</span>
					<p>
						<label for="username1" class="username_label">Re-enter Your email ID:</label>
                        <input name="ctl00$repregEmailIDTextbox" id="repregEmailIDTextbox" class="swid_username" type="text">
                        <span id="repregEmailIDTextboxRequiredFieldValidator" style="color: Red; font-size: 12px; visibility: hidden;">*</span>
					</p>
                    <span id="regCompareValidator" style="color: Red; font-size: 12px; display: none;">Email ID Mismatch</span><br>
                    <input name="ctl00$regButton" value="Register" onclick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$regButton", "", true, "registration", "", false, false))' id="regButton" class="button8" type="submit">
				    <a href="#" rel="switcher1" class="forgot linkdiv button9 hello22">Login Now</a>
				</fieldset>
			</div>
		</div>
	</div>
    
   <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ScriptManager1', 'form1', ['tctl00$lsContentPlaceHolder$UpdatePanel1','lsContentPlaceHolder_UpdatePanel1'], [], [], 90, 'ctl00');
//]]>
</script>

<div id="contentArea">
        

    <div id="lsContentPlaceHolder_UpdatePanel1">
	
            <div class="placeholderContents">
                <div id="errorLabelDiv">
                    <span id="lsContentPlaceHolder_loginErrorLabel" style="display: inline-block; color: rgb(241, 53, 27); background-color: rgb(253, 244, 134); border: 1px solid Red; font-size: small; height: 20px; width: 460px;">The provided Username / Password is Incorrect.</span>
                </div>
                <div id="loginBox">
                    
                    <span style="text-align: center; display: block; float: left; margin-left: 5px; font-size: 20px; margin-top: 5px; color: rgb(83, 83, 83);"><img alt="" src="login.aspx_files/Lock%2520Icon.jpg" height="20px">&nbsp;</span><br>
                    <br><hr>
                    <br>
                    <label style="text-align: center; display: block; float: left; margin-left: 30px; font-size: 15px; margin-top: 5px; color: rgb(83, 83, 83); margin-right: 25px;">Username</label>
                    <input name="ctl00$lsContentPlaceHolder$usernameTextBox" id="lsContentPlaceHolder_usernameTextBox" style="height: 20px; width: 250px;" type="text">
                    <br><br>
                    <label style="text-align: center; display: block; float: left; margin-left: 30px; font-size: 15px; margin-top: 5px; color: rgb(83, 83, 83); margin-right: 29px;">Password</label>
                    <input name="ctl00$lsContentPlaceHolder$passwordTextBox" id="lsContentPlaceHolder_passwordTextBox" style="height: 20px; width: 250px;" type="password">
                    <br><br>
                    <span style="margin-left: 30px;"></span>
                    <span style="display: inline-block; color: rgb(83, 83, 83); font-size: 12px; height: 15px;"><input id="lsContentPlaceHolder_rememberMeCheckBox" name="ctl00$lsContentPlaceHolder$rememberMeCheckBox" type="checkbox"><label for="lsContentPlaceHolder_rememberMeCheckBox"> Remember Me for next Login</label></span>
                    <br><br>
                    <span style="margin-left: 30px; margin-right: 130px;"><a href="#" style="font-size: 13px;">Forgot Password?</a></span>
                    <input name="ctl00$lsContentPlaceHolder$loginButton" value="Sign in" id="lsContentPlaceHolder_loginButton" type="submit">
                    <br><br>
                    <span style="margin-left: 30px; font-size: 13px; color: Gray;">Not yet Registered?</span>
                    <a href="#" style="margin-left: 5px; font-size: 13px;">Register now for Free</a>
                </div>
            </div>
        
</div>

</div>
<!--footer starts-->


        <!-- footer ends-->
<!-- foot panel menu bar at bottom-->






</form>
</body></html>

CSS contetns are

body {
width: 990px;
height:968px;
background-color:white;/* #E9E9E9;*/
margin:0 auto;
}

#login{
	width:990px;
	height:50px;
	background-color:#E9E9E9;
}
#masthead{
	width:990px;
	height:90px;
	background-color:green;
}
#menu{
	width:990px;
	height:50px;
	background-color:transparent;
}

#tab{
	width:650px;
	height:300px;
	margin-top:60px;
	background-color:green;
	float:left;
}
/*#quick-search{
	width:330px;
	height:400px;
	margin-top:-330px;
	margin-right:3px;
	float:right;
	background-color:red;
	
}*/



.main {
	width: 30%;
	height: 100%;
	float: right;
	background-color: transparent;
}

.mainbutton {
	width: 100%;
	height: 100%;
	background-color: transparent;
}

.button6 {
	position: absolute;
	text-align: center;
	margin: 5px 0 0 40px;
	width: 60px;
	height: 10px;
	font-family: Arial;
	color: #ffffff;
	font-size: 15px;
    padding: 10px;
	text-decoration: none;
	-webkit-border-radius: 2px;
    -moz-border-radius: 2px;
	-webkit-box-shadow: 0px 1px 3px #666666;
	-moz-box-shadow: 0px 1px 3px #666666;
	text-shadow: 1px 1px 3px #666666;
	background: #406fa8;
	text-align: center;
}

.button6:hover {
  	background: #445a75;
}
.button7 {
	position: absolute;
	text-align: center;
	margin: 5px 0 0 170px;
	width: 60px;
	height: 10px;
	font-family: Arial;
	color: #ffffff;
	font-size: 15px;
	padding: 10px;
	text-decoration: none;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-box-shadow: 0px 1px 3px #666666;
	-moz-box-shadow: 0px 1px 3px #666666;
	text-shadow: 1px 1px 3px #666666;
	background: #406fa8;
	text-align: center;
}

.button7:hover {
  	background: #445a75;
}

.tip 
{
	width:300px;
	margin:auto;
	position: absolute;
	display: none;
	color: #ffffff;
	padding-top: 0;
	font-size: 24px;
	text-decoration: none;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0px 5px 15px #000000;
	-moz-box-shadow: 0px 5px 15px #000000;
	box-shadow: 0px 5px 15px #000000;	  /* for semi transparent background .. */
    background-color: rgba(150,150,150,0.5);
}
	
.switcher1 
{
	height: 315px;
	width: 296px;
	margin: auto;
	padding: 0;
}
.switcher2 {
	height: 200px;
	width: 296px;
}
.switcher3 {
	height: 310px;
	width: 296px;
}

.sw_mid {
	width: 100%;
	height: 100%;
	background-color: #ffffff; 
}
	
#tip1 .switcher{
	display:none;
	background: #fff;
}
	
#switcher.active {
	display: block;
}
	
.button8 
{
	position: relative;
	left: 0px;
	top: 10px;
	font-family: Arial;
	color: #666666;
	font-size: 18px;
	padding: 9px;
	text-decoration: none;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-box-shadow: 0px 1px 3px #666666;
	-moz-box-shadow: 0px 1px 3px #666666;
	text-shadow: 1px 1px 3px #d1c1d1;
	border: solid #c3c7d6 1px;
	background: #c3c7d6;
}
	
.button8:hover 
{
	background: #b2b7cc;
}
	
.button9 
{
	bottom: 0px;
	position: relative;
	left: 80px;
    color: #0E79C9;
	font-family: Arial;
	font-size: 17px;
	padding: 10px;
	text-decoration: none;
	text-shadow: none;
}
	

	.swmid_username_label,.swmid_password_label {
		height: 20%;
		width: 40%;
		float: left;
	}
	
	.swmid_username,.swmid_password {
		width: 60%;
		height: 20%;
		float: left;
	}
	.sw_mid .username_label { 
		font-family: 'Droid Sans Mono', arial, serif; 
		margin: auto;
		color: #666666;
		font-size: 16px;
	}
		
	
	.sw_mid fieldset {
		border: none;
	}
	.sw_mid legend[class=login_legend] {
		width: 100%;
		float: left;
		font-size: 24px;
		font-weight: bold;
		background-color: #F0F0F0;
		background: #FFC489; /* old browsers */
		background: -moz-linear-gradient(top, #FFC489 0%, #F7EFDC 74%); /* firefox */
		
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFC489), color-stop(74%,#F7EFDC)); /* webkit */
		
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFC489', endColorstr='#F7EFDC',GradientType=0 ); /* ie */	    border-bottom: 1px solid #FFFFFF;
	    border-top: 1px solid #D9D9D9;
	    margin: 5px 0;
	    padding: 2px 0 2px 5px;
	    text-align: left;
	    text-shadow: 1px 1px 1px #FFFFFF;
	    color: #666666;
	    -moz-border-radius: 2px 2px 2px 2px;
	}
	
	.sw_mid p {
		-moz-border-radius: 5px 5px 5px 5px;
	    -moz-box-shadow: 0 0 3px #AAAAAA;
	    background-color: #F4F4F4;
	    border: 1px solid #FFFFFF;
	    clear: both;
	    float: left;
	    margin: 5px 0 5px 0;
	    padding: 5px 0 5px 0;
	    width: 100%;
	}
	
	.sw_mid p input {
		width: 80%;
		margin-top: 5px;
		-moz-box-shadow: 0 0 4px #AAAAAA;
	    background: none repeat scroll 0 0 #FFFFFF;
	    border: 1px solid #DDDDDD;
	    color: #555555;
	}
	
	.sw_mid p a[class=tooltip_icon] {
		background-image: url('images/info_8x16.png');
		float: left;
		width: 10%;
	}
	.sw_mid input[type=checkbox] {
		position: relative;
		margin: 10px 1px 10px 15px;
		top: 10px;
	}
	
	.sw_mid label[for=remember_password] {
		font-size: 12px;
		color: #666666;
		top: 8px;
		position: relative;
	}
	
	.sw_mid a[rel=switcher2] {
		top: 20px;
		left: -10px;
		margin-bottom: 5px;
		position: relative;
		
	}
	.sw_mid  a[rel=switcher2]:hover {
		text-decoration: underline;
	}
	.sw_mid a[rel=switcher3] {
		position: relative;
		top: 45px;
		left: -150px;
		margin-bottom: 5px;
		padding: 0;
	}
	.sw_mid a[rel=switcher3]:hover {
		text-decoration: underline;
	}


	/* styling for the forgot password div.. */
	.switcher2 fieldset {
		border: none;
	}	
	
	.sw_mid legend[class=forgot_password_legend] {
		width: 100%;
		float: left;
		font-size: 24px;
		font-weight: bold;
		background-color: #F0F0F0;
		background: #FFC489; /* old browsers */
		background: -moz-linear-gradient(top, #FFC489 0%, #F7EFDC 74%); /* firefox */
		
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFC489), color-stop(74%,#F7EFDC)); /* webkit */
		
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFC489', endColorstr='#F7EFDC',GradientType=0 ); /* ie */	    border-bottom: 1px solid #FFFFFF;
	    border-top: 1px solid #D9D9D9;
	    margin: 5px 0;
	    padding: 2px 0 2px 5px;
	    text-align: left;
	    text-shadow: 1px 1px 1px #FFFFFF;
	    color: #666666;
	    -moz-border-radius: 2px 2px 2px 2px;
	}
	
	/* styling for the register div .. */
	.switcher3 fieldset {
		border: none;
	}	
	
	.sw_mid legend[class=quick_registration_legend] {
		width: 100%;
		float: left;
		font-size: 24px;
		font-weight: bold;
		background-color: #F0F0F0;
		background: #FFC489; /* old browsers */
		background: -moz-linear-gradient(top, #FFC489 0%, #F7EFDC 74%); /* firefox */
		
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFC489), color-stop(74%,#F7EFDC)); /* webkit */
		
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFC489', endColorstr='#F7EFDC',GradientType=0 ); /* ie */	    border-bottom: 1px solid #FFFFFF;
	    border-top: 1px solid #D9D9D9;
	    margin: 5px 0;
	    padding: 2px 0 2px 5px;
	    text-align: left;
	    text-shadow: 1px 1px 1px #FFFFFF;
	    color: #666666;
	    -moz-border-radius: 2px 2px 2px 2px;
	}

	.sw_mid  a[rel=switcher1] {
		position: relative;
		top: 55px;
		left: -90px;
		margin-bottom: 5px;
		padding: 0;
	}
	.sw_mid a[rel=switcher1]:hover {
		text-decoration: underline;
	}
#templateContainer
{
    height:900px;
    width:100%;
    border:1px solid gray;
}
#contentArea
{
    width:100%;
    /*height:700px;*/
    background-color:White;
}
.placeholderContents
{
    height:350px;
    background-color:White;
    padding:50px 0px 0px 270px;
}
#errorLabelDiv
{
    text-align:center;
    margin-bottom:5px;
    height:20px;
    width:460px;
}
#loginBox
{
    position:absolute;
    border:1px solid #949494;
    height:250px;
    width:450px;
    padding:0px 5px 0px 5px;
    background-color:transparent;
}
.placeholderDiv
{
    height:700px;
    width:100%;
}

Any idea why it is rendering differently when clicked on Sign or Register Button.

thanks.

web-design

This attachment is potentially unsafe to open. It may be an executable that is capable of making changes to your file system, or it may require specific software to open. Use caution and only open this attachment if you are comfortable working with zip files.

Desktop.zip (40.12 KB)

2 Contributors
1 Reply
131 Views
1 Day Discussion Span
Latest Post 12 Years Ago Latest Post by twiss

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

twiss 155 Veteran Poster · Answer 1 · 2011-06-11T12:38:45+00:00

Internet Explorer doesn't support this box shadow thing. Give it a border (black 1px) at least. Also, it's nicer if you give it background:#FFF;