Discuss "same markup diff results in .Net" in the HTML & CSS Help forum.

Shem · #1 (**permalink**) July 1st, 2008, 09:42 AM

i'm going to post the output of both pages...

classic asp:

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ST FRAMEWORK ADMIN</title>
</head>
<link rel="stylesheet" href="../css/tools.css" type="text/css" media="screen" />

<body>
<div id="stage">
<div class="login">
<div class="login_form">
<img alt="Login" src="../img/login.gif"/>
<form id="login" name="login" method="post" action="/stframework/views/login.asp">

<div class="form-block">
<div class="inputlabel">Email</div>
<div><input type="text" size="15" class="inputbox" name="useremail"/></div>
<div class="inputlabel">Password</div>
<div><input type="password" size="15" class="inputbox" name="userpass"/></div>
<div align="left"><input type="Submit" value="Login" class="button" name="submit"/></div>
</div>
</form>
</div>
<div class="login-text">
<div class="ctr"><img width="64" height="64" alt="security" src="../img/security.png"/></div>
<p>Welcome to STFramework</p>
<p>Use a valid email and password to gain access to the administration console.</p>

</div>
<div class="clr"/>
</div>
</div>
</body>
</html>

ASP.NET:

Code:

<!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 id="Head1"><title>
	Contact Person Manager
</title><link href="css/layout.css" rel="stylesheet" type="text/css" media="screen" /></head>
<body>
    <form name="form1" method="post" action="Default.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEzMDAyMjE5MzFkZGXON2RxIwlIbtaJdsd6J5Wc5oaB" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>

<script src="/keithdesign/WebResource.axd?d=m0OPwy47iEN3q4sLw2sSow2&amp;t=633498298449218750" type="text/javascript"></script>


<script src="/keithdesign/WebResource.axd?d=l12KMheJoN9u0Z-Wmcvp6637E_PV7U8unOFbhwdo-gM1&amp;t=633498298449218750" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>

        <div id="stage">
            <div class="login_form">
            
                <img id="Login" src="images/login.gif" style="border-width:0px;" />
                <div class="form-block">

                    <div class="inputlabel">
                        <!--<span id="Label1">Username</span>-->
                        Username
                    </div>
                    <div>
                        <input name="usrname" type="text" id="usrname" />
                        <span id="RequiredFieldValidator1" style="color:Red;visibility:hidden;">Please fill in your username</span>
                    </div>
                    <div class="inputlabel">

                        <!--<span id="Label2">Password</span>-->
                        Password
                    </div>
                    <div>
                        <input name="psswrd" type="password" id="psswrd" />
                        <span id="RequiredFieldValidator2" style="color:Red;visibility:hidden;">Please fill in your password</span>
                    </div>
                    <div align="left">
                        <input type="submit" name="Button1" value="Login" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;Button1&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="Button1" />

                    </div>
                </div>
                
                <div class="login-text">
					<div class="ctr">
					    <img id="security" src="images/security.png" style="border-width:0px;" />
					</div>
					<p>Welcome to STFramework</p>
					<p>Use a valid email and password to gain access to the administration console.</p>

				</div>
				<div class="clr" />

            </div>
        </div>
    
<script type="text/javascript">
//<![CDATA[
var Page_Validators =  new Array(document.getElementById("RequiredFieldValidator1"), document.getElementById("RequiredFieldValidator2"));
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
var RequiredFieldValidator1 = document.all ? document.all["RequiredFieldValidator1"] : document.getElementById("RequiredFieldValidator1");
RequiredFieldValidator1.controltovalidate = "usrname";
RequiredFieldValidator1.errormessage = "Please fill in your username";
RequiredFieldValidator1.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
RequiredFieldValidator1.initialvalue = "";
var RequiredFieldValidator2 = document.all ? document.all["RequiredFieldValidator2"] : document.getElementById("RequiredFieldValidator2");
RequiredFieldValidator2.controltovalidate = "psswrd";
RequiredFieldValidator2.errormessage = "Please fill in your password";
RequiredFieldValidator2.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
RequiredFieldValidator2.initialvalue = "";
//]]>
</script>

<div>

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBALLkdqRCALv/+iWAQKDk4UYAoznisYGsrQXA1AdeNLXmRN5u9o32o28o/k=" />
</div>

<script type="text/javascript">
<!--
var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
    ValidatorOnLoad();
}

function ValidatorOnSubmit() {
    if (Page_ValidationActive) {
        return ValidatorCommonOnSubmit();
    }
    else {
        return true;
    }
}
// -->
</script>
        </form>
</body>
</html>

both got the same css, but getting a wacked out result in the .Net version
Shem

jmurrayhead · #2 (**permalink**) July 1st, 2008, 09:50 AM

Shem,

Let's start off by not using div's for input labels. Use the .Net Label control:

Code:

<asp:Label ID="lblUserName"
     AssociatedControlID="txtUserName"
     Text="Username:"
     runat="server" />

If you need to style the text a little, just apply the CssClass property:

Code:

<asp:Label ID="lblUserName"
     AssociatedControlID="txtUserName"
     CssClass="yourclass"
     Text="Username:"
     runat="server" />

Also, it might help if you post a screen shot of the classic ASP version and the .Net version so we know what to look for.

Shem · #3 (**permalink**) July 1st, 2008, 10:02 AM

some screen shots

jmurrayhead · #4 (**permalink**) July 1st, 2008, 10:15 AM

Let's try this a bit differently...

Code:

<div class="loginform">
    <div class="floatleft">
 
    </div>
    <div class="floatright">
 
    </div>
    <div class="clr"></div>
</div>

Above, the classes 'floatright' and 'floatleft' are obviously floated left and right, respectively. The class 'loginform' will have a set width that is large enough for the to floated divs to stay side-by-side.

See if you can plug in the ASP.Net controls to this and style the classes to look like your form.

Shem · #5 (**permalink**) July 3rd, 2008, 03:45 AM

got the prob sorted, just re-wrote the thing, and as suggested, simplified
it ALOT

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Create History Table / Outcome results	Rebelle	Database Design Help	9	July 1st, 2008 08:33 AM

Discuss "same markup diff results in .Net" in the HTML & CSS Help forum.

HTML & CSS Help - Discuss HTML, DHTML, XHTML and Cascading Style Sheets (CSS) here. Get tips on how to design your web site.