controls do not appear at the right place.

[Eric]

Hi,

I have a asp.net website for regular pc's and I have now added a page a new
webpage to the same project and arranged all controls in a size it would
appear normal sized on a PDA. When the user goes to the url of the main site,
it detects the windows version and if it is WinCE it will redirect to the PDA
web page.

Inside the webpage for the PDA, I have all controles styled where the styles
are in the page.

Here is my code:

<%@ Page Title="" Language="VB" MasterPageFile="~/PDA.master"
AutoEventWireup="false"
CodeFile="PDAlogin.aspx.vb" Inherits="PDAlogin" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<style type="text/css">
.PanelLogin
{
position: absolute;
top: 65px;
left: 10px;
z-index: 1;
background-color: #003258;
height: 230px;
width: 200px;
color: white;
}
.lblUser
{
position: absolute;
top: 49px;
left: 15px;
z-index: 1;
width: 98px;
height: 19px;
color: white;
}
.lblPass
{
position: absolute;
top: 79px;
left: 15px;
color: white;
}
.txtPass
{
position: absolute;
top: 77px;
left: 89px;
z-index: 1;
width: 100px;
color: black;
}
.lblLogin
{
position: absolute;
top: 15px;
left: 13px;
z-index: 1;
color: white;
}
.btZenden
{
position: absolute;
top: 113px;
left: 85px;
z-index: 1;
color: black;
}
.lblCook
{
position: absolute;
top: 150px;
left: 8px;
z-index: 1;
height: 91px;
width: 185px;
color: white;
}
.txtUser
{
position: absolute;
top: 46px;
left: 89px;
width: 100px;
color: Black;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
runat="Server">
<aspanel ID="Panel1" runat="server" CssClass="PanelLogin">
<asp:Label ID="Label1" runat="server" CssClass="lblLogin" Text="Log in"
Font-Bold="True"
ForeColor="White"></asp:Label>
<asp:Label ID="Label2" runat="server" CssClass="lblUser" Text="User
name:"></asp:Label>
<asp:TextBox ID="txtPassword" runat="server" CssClass="txtPass"
TextMode="Password"></asp:TextBox>
<asp:Label ID="Label3" runat="server" CssClass="lblPass"
Text="Password:"></asp:Label>
<asp:TextBox ID="txtUsername" runat="server" CssClass="txtUser"
AutoCompleteType="DisplayName"></asp:TextBox>
<asp:Label ID="lblCookie" runat="server" CssClass="lblCook" Text="If you
do not have a password or know it, you will have to visit the home page on a
regular computer."></asp:Label>
<asp:Button ID="btSend" runat="server" CssClass="btZenden" Text="Send" />
</aspanel>
</asp:Content>

On VisualStudio2008 the page looks like I want it to be, but on the PDA
things are messed up.
The textboxes are swapped and all controls are on the wrong places.

What am I doing wrong here?

rg,
Eric

 

[Gregory A. Beamer]

Hi,

I have a asp.net website for regular pc's and I have now added a page
a new webpage to the same project and arranged all controls in a size
it would appear normal sized on a PDA. When the user goes to the url
of the main site, it detects the windows version and if it is WinCE it
will redirect to the PDA web page.

Inside the webpage for the PDA, I have all controles styled where the
styles are in the page.

SNIPPED CODE

On VisualStudio2008 the page looks like I want it to be, but on the
PDA things are messed up.
The textboxes are swapped and all controls are on the wrong places.

What am I doing wrong here?

First, when you say it looks okay in Visual Studio, do you mean in the
Visual Studio designer? If so, you should stoke up a mobile project and
then surf to the site in the mobile device emulator and then use the IE
browser in the emulator to test the image.

As much as I love Visual Studio, it is not always 100% accurate, so testing
is a must.

As for why it might look different, the sizing of the controls is a key
element, and the first thing I would look at. In your case, I would also
closely examine your CSS, especially the float, as it can greatly alter the
placement, esp. on such a small screen.

The first place to look is:
http://msdn.microsoft.com/en-us/library/8htez1ds.aspx

It will help you understand the theory behind mobile pages, and there are a
few code samples.

Another good site to understand the theory behind developing for mobile is:
http://dev.opera.com/articles/view/designing-and-developing-mobile-web-
site/

BTW, you don't necessarily have to stoke up the mobile browser to see what
a page looks like in all cases. Setting your browser to the size of the
mobile screen also gives you a good idea of what is incorrectly wrapping.

One other group to consider posting to is the Expression group. Cheryl Wise
is very knowlegeable on CSS (as are a few other Expression/FrontPage MVPs).
You may not get mobile experience, but if the CSS is your problem (as I
think it is - not enough time to play right now to test it), you will gain
good knowledge. Kathleen Anderson (MVP) is also good as CSS and very
knowledgeable on accessibility; I am not sure of her mobile experience, but
most of what you appear to be tackling is CSS for a very small screen size
and not ASP.NET per se.

Peace and Grace,