what will do for not changing the location of textboxes, labels & buttons at runtime

Posted by Cibin under ASP.NET on 6/17/2013 | Points: 10 | Views : 1562 | Status : [Member] | Replies : 12
Hi,

I created a website in VS2010, I placed the textboxes , labels , buttons in the webform as their position changed to absolute. But when the site running in different machines the location of textboxes , labels are changed. What will do for not changing the location.

thanks in advance.




Responses

Posted by: Allemahesh on: 6/17/2013 [Member] [MVP] Silver | Points: 25

Up
0
Down
You can use the mozilla firebug or IE developer tool to check the design of you from. You can also current the position by using these tools. Hope this will help you.

Cibin, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Raj.Trivedi on: 6/17/2013 [Member] [MVP] Starter | Points: 25

Up
0
Down
Hello Cibin

It is difficult to actually tell what is the problem but looking at the issue it can be a CSS rendering issue can you upload the source for it to check,so that we can see what is the issue

Regard's
Raj.Trivedi
"Sharing is Caring"
Please mark as answer if your Query is resolved

Cibin, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Cibin on: 6/17/2013 [Member] Starter | Points: 25

Up
0
Down
CSS Fil e :

html, body {
height: 100%;
}

body {
margin: 0px;
padding: 0px;
background: #202223;
font-family: 'Open Sans', sans-serif;
font-size: 10pt;
color: #707070;
}


h1, h2, h3 {
margin: 0;
padding: 0;
}

p, ol, ul {
margin-top: 0px;
}

p {
line-height: 180%;
}

strong {
}

a {
color: #FEE722;
}

a:hover {
text-decoration: none;
}

a img {
border: none;
}

img.border {
}

img.alignleft {
float: left;
}

img.alignright {
float: right;
}

img.aligncenter {
margin: 0px auto;
}

hr {
display: none;
}

/** WRAPPER */

#wrapper {
}

#banner-wrapper
{
overflow: hidden;
height: 25em;
background: url(img01.png) no-repeat top center;
/*background-size: cover;*/
}

#header-wrapper
{
background: #181818;
}

.container {
width: 1200px;
margin: 0px auto;
}

.clearfix {
clear: both;
}

/** HEADER */

#header {
overflow: hidden;
height: 60px;
}

/** LOGO */

#logo {
position: relative;
float: left;
width: 685px;
top: 0px;
left: 0px;
height: 53px;
}

#logo h1, #logo p {
margin: 0px;
line-height: normal;
}

#logo h1 a {
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
font-weight: 400;
text-decoration: none;
text-transform: uppercase;
line-height: 60px;
color: #FFF;
}

/** MENU */

#menu {
float: right;
}

#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: normal;
}

#menu li {
float: left;
padding: 0px 2em;
}

#menu a {
display: block;
line-height: 60px;
text-decoration: none;
text-transform: uppercase;
color: #FFF;
}

#menu a:hover {
text-decoration: underline;
}

/** PAGE */

#page {
overflow: hidden;
padding: 5em 0em 0em 0em;
}

/** CONTENT */

#content {
float: left;
width: 800px;
}

.post {
overflow: hidden;
padding: 50px 50px 30px 50px;
margin-bottom: 40px;
border: 1px solid #E7EBED;
/*border-radius: 8px;*/
background: #FFF;
}

.post a
{
color: #262626;
}

.post .title {
padding: 7px 0px 0px 0px;
letter-spacing: -1px;
}

.post .title a {
border: none;
font-size: 1.5em;
letter-spacing: -2px;
text-decoration: none;
font-weight: 600;
color: #222222;
}

.post .meta {
margin-bottom: 30px;
padding: 10px 0px 0px 0px;
text-align: left;
font-weight: 300;
}

.post .meta .date {
float: left;
}

.post .meta .posted {
float: right;
}

.post .meta a {
}

.post .entry {
padding: 0px 0px 40px 0px;
text-align: justify;
}

.links {
padding-top: 20px;
margin-bottom: 30px;
}

.more {
display: block;
float: left;
width: 88px;
padding: 5px 5px;
margin-right: 10px;
background: #222222;
/*border-radius: 8px;*/
color: #FFFFFF !important;
text-align: center;
text-decoration: none;
}

.comments {
display: block;
float: left;
width: 88px;
padding: 5px 5px;
background: #222222;
color: #FFFFFF !important;

/*border-radius: 8px;*/
text-align: center;
text-decoration: none;
}

/** SIDEBAR */

#sidebar {
float: right;
width: 350px;
padding-top: 5em;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

#sidebar li {
margin: 0;
padding: 0;
}

#sidebar li ul {
margin: 0px 0px;
padding-bottom: 60px;
}

#sidebar li li {
line-height: 40px;
border-bottom: 1px solid #282A2B;
margin: 0px 0px;
border-left: none;
}

#sidebar li li span {
display: block;
margin-top: -20px;
padding: 0;
font-size: 11px;
font-style: italic;
}

#sidebar li li a {
color: #707070;
}

#sidebar h2 {
height: 38px;
padding: 0px 0px 30px 0px;
letter-spacing: -.5px;
font-size: 1.8em;
font-weight: 600;
color: #FFFFFF;
}

#sidebar p {
margin: 0 0px;
padding: 0px 30px 20px 30px;
text-align: justify;
}

#sidebar a {
border: none;
}

#sidebar a:hover {
text-decoration: underline;
}
/* Footer */

#footer {
overflow: hidden;
padding: 3em 0em;
border-top: 1px solid #282A2B;
}

#footer p {
text-align: center;
}

#footer a {
color: #6B6B6B;
}

Home.as px
<%@ Page Title="" Language="VB" MasterPageFile="~/ITHelpDesk.master" AutoEventWireup="false" CodeFile="Home.aspx.vb" Inherits="Home" %>

<%-- Add content controls here --%>



<asp:Content ID="Content1" runat="server" contentplaceholderid="head">
<div style="height: 459px">
<table
style="z-index: 1; left: 622px; top: 580px; position: absolute; height: 151px; width: 312px">
<tr>
<td style="width: 99px" align="right">
<asp:Label ID="Label1" runat="server" Text="Username :" ></asp:Label></td>
<td align="right">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 99px" align="right">
<asp:Label ID="Label2" runat="server" Text="Password :"></asp:Label></td>
<td align="right">
<asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox></td>
</tr>
<tr>
<td colspan="2" align="right">

<asp:ImageButton ID="ImageButton1" runat="server"
ImageUrl="~/login-button01.png" Height="26px"
style="text-align: center;"
Width="117px" /></td>

</tr>
</table>
<asp:Image ID="Image1" runat="server" ImageUrl="~/logo.png"
style="z-index: 1; left: 358px; top: 476px; position: absolute" />
<asp:Label ID="Label3" runat="server" ForeColor="White"

style="z-index: 1; left: 618px; top: 746px; position: absolute; width: 317px"></asp:Label>
<asp:Image ID="Image2" runat="server" ImageUrl="~/x.gif"
style="z-index: 1; left: 574px; top: 739px; position: absolute; height: 31px; width: 31px"
Visible="False" />
</div>
</asp:Content>

Cibin, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Raj.Trivedi on: 6/17/2013 [Member] [MVP] Starter | Points: 25

Up
0
Down
Hello Cibin,

Where is the master page. source

is it possible for you to upload the page,master page and css to check


can you just remove px unit and check

Regard's
Raj.Trivedi
"Sharing is Caring"
Please mark as answer if your Query is resolved

Cibin, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Cibin on: 6/17/2013 [Member] Starter | Points: 25

Up
0
Down
Master Page.Source :

<%@ Master Language="VB" CodeFile="ITHelpDesk.master.vb" Inherits="ITHelpDesk" %>

<!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 runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<link href="default.css" rel="stylesheet" type="text/css" media="all" />
<!--[if IE 6]>
<link href="default_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

</head>
<body>


<form id="form1" runat="server">

<div>
<div id="banner-wrapper"></div>
<div id="header-wrapper">
<div id="header" class="container">
<div id="logo">
<h1 style="color: #FFFFFF; z-index: 1; left: 0px; top: 8px; position: absolute; height: 37px; width: 685px;">Monumental</h1>
<p style="color: #FFFFFF">&nbsp;</p>
</div>
<div id="menu">
<ul>
<li><a href="Home.aspx" accesskey="1" title="">Home</a></li>
<li><a href="Status.aspx" accesskey="2" title="">Status Check</a></li>
<li><a href="Contact.aspx" accesskey="5" title="">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<asp:ContentPlaceHolder id="head" runat="server">




</asp:ContentPlaceHolder>

<div id="footer" class="container">
<p>Copyright (c) 2013 www.Monumental. All rights reserved. Design by Cibin Louis. </p>
</div>
</div>

</form>

</body>
</html>


Cibin, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Raj.Trivedi on: 6/17/2013 [Member] [MVP] Starter | Points: 25

Up
0
Down
Hello Cibin,


Its working ok at my place with different browsers, i am not able to see different positions.

I am uploading the screen shot

i have checked in IE 9.0 and Chrome

Which browser you are checking with ?
 Download source file

Regard's
Raj.Trivedi
"Sharing is Caring"
Please mark as answer if your Query is resolved

Cibin, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Cibin on: 6/17/2013 [Member] Starter | Points: 25

Up
0
Down
Raj, Please Check that pic, There is some position change for textbox we assign for password...I checked it with Chrome, and IE9,, But also i checked with another system having 15" monitor using chrome, its totally altered.

Cibin, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Raj.Trivedi on: 6/17/2013 [Member] [MVP] Starter | Points: 25

Up
0
Down
Hello cibin

I am checking the same give me tonite will surely get back to u

Regard's
Raj.Trivedi
"Sharing is Caring"
Please mark as answer if your Query is resolved

Cibin, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Cibin on: 6/17/2013 [Member] Starter | Points: 25

Up
0
Down
Ok, Thanks Raj, Thank you So much......

Cibin, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Raj.Trivedi on: 6/23/2013 [Member] [MVP] Starter | Points: 25

Up
0
Down
Hello Cibin

I have checked all the ways there is a problem with IE only, it seems that the CSS is not properly rendering.

You can tell the designer to give the width of textbox in the css and check the rendering with relevance to IE.

I am still checking if i get way around this

Regard's
Raj.Trivedi
"Sharing is Caring"
Please mark as answer if your Query is resolved

Cibin, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Cibin on: 6/24/2013 [Member] Starter | Points: 25

Up
0
Down
Mr. Raj,

Not the only problem with IE ,,, When i open the site in google chrome,,, with different screen size,, the layout has changed...
 Download source file

Cibin, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Cibin on: 7/4/2013 [Member] Starter | Points: 25

Up
0
Down
Hi, Raj,

Today I resolve the issue.. its due to the improper screen resolution, If we correct the exact Screen resolution it works fine, and also i edited the master page with html table. Now its working fine, Thanks Raj for your support.


Cibin, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response