Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Error displaying page in FireFox 2

Status
Not open for further replies.

Gixonita

IS-IT--Management
Oct 17, 2005
103
US
Hi all (I Tried posting in the ASP.NET forum, but I was probably in the wrong one, my apologies if I'm still not in the correct one),

I'm using visual studio 2003 (c#) to create a simple aspx login page. The layout of the page is:

------------------------------
| User: Passwd: |
| |
------------------------------

So I have (in pseudo code)

<div with top of frame image> </div>
<div with side of frame image>
<form>User,Passwd...</form>
</div>
<div with bottom of frame image></div>

After I build the project and run it in Explorer everything works perfectly. If I run the same page with FF then I get

------------------------------
| |
------------------------------
User: Passwd:

I don't understand why it doesn't respect the divs in FF, does anybody have an idea of why this is hapening?

Thanks in advance,

Luis Torres
 
Sorry about the "speculation" :)

Here is the code:

HTML:
Code:
<%@ Page language="c#" Codebehind="Default.aspx.cs" AutoEventWireup="false" Inherits="JudgeReports.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
	<HEAD>
		<title>Judge Reports</title>
		<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
		<meta content="C#" name="CODE_LANGUAGE">
		<meta content="JavaScript" name="vs_defaultClientScript">
		<meta content="[URL unfurl="true"]http://schemas.microsoft.com/intellisense/ie5"[/URL] name="vs_targetSchema">
		<LINK href="StyleSheet1.css" type="text/css" rel="stylesheet">
	</HEAD>
	<body ms_positioning="GridLayout">
		<h1 align="center">Judge Reports Login Page</h1>
		<div class="top-frame"></div>
		<div class="side-frame">
			<form id="Form1" method="post" runat="server">
				<div class="login">
					<br>
					<asp:Label Runat="server" id="lblUser">User:</asp:Label>
					<asp:TextBox Runat="server" ID="txbUser"></asp:TextBox>
					<asp:Label Runat="server" id="lblPassword">&nbsp;&nbsp;&nbsp;&nbsp;Password:</asp:Label>
					<asp:TextBox Runat="server" ID="txbPassword" TextMode="Password"></asp:TextBox>
					&nbsp;&nbsp;&nbsp;&nbsp;
					<asp:Button Runat="server" ID="btnLogin" Text="Login"></asp:Button>
					<br>
					<br>
					<asp:RequiredFieldValidator Runat="server" ID="rfvUser" ControlToValidate="txbUser" ErrorMessage="User Required!!!"></asp:RequiredFieldValidator>
					<asp:RequiredFieldValidator Runat="server" ID="rfvPassword" ControlToValidate="txbPassword" ErrorMessage="&nbsp;&nbsp;&nbsp;&nbsp;Password Required!!!"></asp:RequiredFieldValidator>
					<asp:Label Runat="server" ID="lblError" ForeColor="red"></asp:Label>
				</div>
			</form>
		</div>
		<div class="bottom-frame"></div>
	</body>
</HTML>

StyleSheet:
Code:
body
{
	text-align: center;
}

.top-frame 
{	
	width: 750px;
	height: 7px;
	background-image: url(Images/TopFrame.gif);
	background-repeat: no-repeat;
	background-position: bottom;
	padding-top: 5px;
	padding-bottom: 5px;
}

.bottom-frame 
{	
	width: 750px;
	height: 7px;
	background-image: url(Images/BottomFrame.gif);
	background-repeat: no-repeat;
	background-position: top;
	padding-top: 5px;
	padding-bottom: 5px;
}

.side-frame 
{	
	width: 750px;
	height: 3px;
	background-image: url(Images/SideFrame.gif);
	background-repeat: repeat;
}

.login
{
	padding-left:10px;
	padding-right:10px;
	padding-top:10px;
}

Thanks
 
After I load the page ( and then view the source this is what I get:

Explorer

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
	<HEAD>
		<title>Judge Reports</title>
		<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
		<meta content="C#" name="CODE_LANGUAGE">
		<meta content="JavaScript" name="vs_defaultClientScript">
		<meta content="[URL unfurl="true"]http://schemas.microsoft.com/intellisense/ie5"[/URL] name="vs_targetSchema">
		<LINK href="StyleSheet1.css" type="text/css" rel="stylesheet">
	</HEAD>
	<body ms_positioning="GridLayout">
		<h1 align="center">Judge Reports Login Page</h1>
		<div class="top-frame"></div>
		<div class="side-frame">
			<form name="Form1" method="post" action="Default.aspx" language="javascript" onsubmit="if (!ValidatorOnSubmit()) return false;" id="Form1">
<input type="hidden" name="__VIEWSTATE" value="dDwxNDA1NTI2OTI7Oz7qIIOpybO6bhtYECT4EqWN4b2XBw==" />
	
<script language="javascript" type="text/javascript" src="/aspnet_client/system_web/1_1_4322/WebUIValidation.js"></script>


				<div class="login">
					<br>
					<span id="lblUser">User:</span>
					<input name="txbUser" type="text" id="txbUser" />
					<span id="lblPassword">&nbsp;&nbsp;&nbsp;&nbsp;Password:</span>
					<input name="txbPassword" type="password" id="txbPassword" />
					&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="submit" name="btnLogin" value="Login" onclick="if (typeof(Page_ClientValidate) == 'function') Page_ClientValidate(); " language="javascript" id="btnLogin" />
					<br>
					<br>
					<span id="rfvUser" controltovalidate="txbUser" errormessage="User Required!!!" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;visibility:hidden;">User Required!!!</span>
					<span id="rfvPassword" controltovalidate="txbPassword" errormessage="    Password Required!!!" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;visibility:hidden;">    Password Required!!!</span>
					<span id="lblError" style="color:Red;"></span>
				</div>
			
<script language="javascript" type="text/javascript">
<!--
	var Page_Validators =  new Array(document.all["rfvUser"], document.all["rfvPassword"]);
		// -->
</script>

			
<script language="javascript" type="text/javascript">
<!--
var Page_ValidationActive = false;
if (typeof(clientInformation) != "undefined" && clientInformation.appName.indexOf("Explorer") != -1) {
    if (typeof(Page_ValidationVer) == "undefined")
        alert("Unable to find script library '/aspnet_client/system_web/1_1_4322/WebUIValidation.js'. Try placing this file manually, or reinstall by running 'aspnet_regiis -c'.");
    else if (Page_ValidationVer != "125")
        alert("This page uses an incorrect version of WebUIValidation.js. The page expects version 125. The script library is " + Page_ValidationVer + ".");
    else
        ValidatorOnLoad();
}

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

		</form>
		</div>
		<div class="bottom-frame"></div>
	</body>
</HTML>

FireFox:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
	<HEAD>
		<title>Judge Reports</title>
		<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
		<meta content="C#" name="CODE_LANGUAGE">
		<meta content="JavaScript" name="vs_defaultClientScript">
		<meta content="[URL unfurl="true"]http://schemas.microsoft.com/intellisense/ie5"[/URL] name="vs_targetSchema">
		<LINK href="StyleSheet1.css" type="text/css" rel="stylesheet">

	</HEAD>
	<body ms_positioning="GridLayout">
		<h1 align="center">Judge Reports Login Page</h1>
		<div class="top-frame"></div>
		<div class="side-frame">
			<form name="Form1" method="post" action="Default.aspx" id="Form1">
<input type="hidden" name="__VIEWSTATE" value="dDwxNDA1NTI2OTI7Oz7qIIOpybO6bhtYECT4EqWN4b2XBw==" />

				<div class="login">

					<br>
					<span id="lblUser">User:</span>
					<input name="txbUser" type="text" id="txbUser" />
					<span id="lblPassword">&nbsp;&nbsp;&nbsp;&nbsp;Password:</span>
					<input name="txbPassword" type="password" id="txbPassword" />
					&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="submit" name="btnLogin" value="Login" onclick="if (typeof(Page_ClientValidate) == 'function') Page_ClientValidate(); " language="javascript" id="btnLogin" />
					<br>

					<br>
					&nbsp;
					&nbsp;
					<span id="lblError"><font color="Red"></font></span>
				</div>
			</form>
		</div>
		<div class="bottom-frame"></div>
	</body>

</HTML>
 
Try taking the height: 3px; line out of .side-frame in your stylesheet. Does that help?
 
Wow, it worked perfect, thanks :). I noticed another issue that maybe you could help me out with.

I modified the css file to look like

Code:
body
{
	text-align: center;
}

.top-frame 
{	
	width: 750px;
	height: 7px;
	background-image: url(Images/TopFrame.gif);
	background-repeat: no-repeat;
	background-position: bottom;
}

.bottom-frame 
{	
	width: 750px;
	height: 7px;
	background-image: url(Images/BottomFrame.gif);
	background-repeat: no-repeat;
	background-position: top;
}

.side-frame 
{	
	width: 750px;
	background-image: url(Images/SideFrame.gif);
	background-repeat: repeat;
}

.Judge
{
	margin:0px;
	padding:0px;
}

If it is run in Explorer everything is centered and whenever I resize the window everythig gets centered again. In FF only the first <h1> is centered, everything else goes to the left and nothing moves when the window is resized. Have you seen this behavior?

Thanks
 
1. Visual studio puts an incomplete doctype up there, which is not good. I know that it does this by default, but I also know that you can change it. I would suggest you do and pick one from the list here:
2. Text-align in the standards-compliant browsers (even IE6 with a complete doctype) means just what it is -- aligning text. Not boxes or in technical terms block level elements. To position those, you need to apply auto margins to those sides you want automatically adjusted. For centering that would be auto left and right margin on every element that needs be centered.
 
Thank you, I'm on my way out of the office now, I'll check it first thing in the morning and let you know how it turned out :)
 
Thank you, changing the margins to auto and correcting the doctype worked perfectly :)
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top