Controls not displayed properly

**DrBunchman** · Feb 19 '08, 10:10 AM

Hi there,

Are the two machines using different browsers (or different versions of the same browser)? That is the most likely cause of your web pages rendering differently.

Dr B

**Abhinavnaresh** · Feb 19 '08, 12:25 PM

Hi,
yes the IE versions that i am using are different,but my pages have to be opened on various machines with different browsers and different width and resolution.My pages should be perfect enough to be run on all machines.plz help.

thanks in advance.

Originally posted by DrBunchman

Hi there,

Are the two machines using different browsers (or different versions of the same browser)? That is the most likely cause of your web pages rendering differently.

Dr B

**DrBunchman** · Feb 19 '08, 12:48 PM

Do you know what a Document Type Definition (DTD) is? This is the thing that is specified in the <!DOCTYPE.... .> tag at the beginning of your pages. It tells the browser which set of rules you are going to be using and therefore how to display the elements (tags) that make up your pages.

You're probably using the default Document Type Definition (DTD) for ASP.NET which is the XHTML 1.0 Transitional. You may need to change your DTD to an earlier one to get a more consistent look across different browsers. This tutorial is a good place to start

aspnetresources.com

http://aspnetresources.com/articles/doctype.aspx

This domain may be for sale!

I had some problems with IE 6 and IE 7 a while back and I found that changing the DTD tag from

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">[/HTML]

To

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">[/HTML]

achieved the results I wanted. If not you'll need to do some more research into the different DTD's.

I hope this helps,

Dr B

**Abhinavnaresh** · Feb 20 '08, 06:56 AM

Hi,
I tried changing the doctype but the problem is still there,i am not able to view the page properly in my same machine.let me give u some more description. I am using CSS and placing an image as background.On some part of that image I am placing a few controls,but the controls are not displayed properly.Plz Help

Thanks in Advance.

Originally posted by DrBunchman

Do you know what a Document Type Definition (DTD) is? This is the thing that is specified in the <!DOCTYPE.... .> tag at the beginning of your pages. It tells the browser which set of rules you are going to be using and therefore how to display the elements (tags) that make up your pages.

You're probably using the default Document Type Definition (DTD) for ASP.NET which is the XHTML 1.0 Transitional. You may need to change your DTD to an earlier one to get a more consistent look across different browsers. This tutorial is a good place to start

aspnetresources.com

http://aspnetresources.com/articles/doctype.aspx

This domain may be for sale!

I had some problems with IE 6 and IE 7 a while back and I found that changing the DTD tag from

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">[/HTML]

To

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">[/HTML]

achieved the results I wanted. If not you'll need to do some more research into the different DTD's.

I hope this helps,

Dr B

**DrBunchman** · Feb 20 '08, 09:09 AM

Can you print your code please and also tell me which versions of IE you are trying to run it on?

Dr B

**Abhinavnaresh** · Feb 20 '08, 10:58 AM

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="login.aspx.cs" Inherits="login" %>

<!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">
         <style type="text/css">
body
{ 
background-image: url('demologinpagebg.jpg');
background-repeat: no-repeat;
background-position:center;

}
</style>
    <title>Asset Management-Login</title>

</head>
 <body>
    <form id="form1" runat="server">
    <div>
      
      
        <h1> <font size = "5"></font></h1>
        <h1>
            <font size="5" color = "navy">Asset Management </font>
        </h1>
        
       
        <asp:Label ID="Label1" runat="server" Style="z-index: 100; left: 666px; position: absolute;
            top: 212px" Text="User Name" Width="99px" Height="23px"></asp:Label>
        <asp:Label ID="Label2" runat="server" Style="z-index: 101; left: 667px; position: absolute;
            top: 251px" Text="Password" Width="99px" Height="21px"></asp:Label>
        <asp:TextBox ID="TextBox1" runat="server" Height="20px" Style="z-index: 102; left: 781px;
            position: absolute; top: 212px" Width="126px"></asp:TextBox>
        <asp:TextBox ID="TextBox2" runat="server" Height="20px" Style="z-index: 103; left: 780px; position: absolute; top: 248px" TextMode="Password" Width="126px"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Style="z-index: 104;
            left: 838px; position: absolute; top: 294px" Text="Login" Width="75px" />
        <asp:Label ID="Label3" runat="server" Font-Bold="True" Font-Underline="True" ForeColor="Red"
            Style="z-index: 105; left: 651px; position: absolute; top: 378px"></asp:Label>
        <asp:Image ID="Image1" runat="server" Height="155px" ImageUrl="~/zenimage.jpg" Style="z-index: 107;
            left: 11px; position: absolute; top: 462px" Width="225px" />
    
    </div>
    </form>
</body>
</html>

Hi,
this is the html code i am working with.I am trying to display my web pages with IE 6,IE 7,and Firefox.I am placing my labels and textboxes on a part of the image.But when the page is displayed in the browser the controls get shifted.plz help ASAP.

**kenobewan** · Feb 20 '08, 11:30 AM

Originally posted by Abhinavnaresh

Hi,
yes the IE versions that i am using are different,but my pages have to be opened on various machines with different browsers and different width and resolution.My pages should be perfect enough to be run on all machines.plz help.

thanks in advance.

This is where I believe the problem lies, your controls are fixed width and height. Perversely, you may need to try relative positioning - eg 50% width and height will always appear in the center regardless of any resolution. Credit to Mr Occam and his razor for the assistance.

**Abhinavnaresh** · Feb 20 '08, 11:51 AM

Hi,
i tried changing the position to relative but the problem is still there.The controls are still shifting their place.dont know how to solve this issue.Plz help.

Thanks in advance.

**DrBunchman** · Feb 20 '08, 01:04 PM

Originally posted by kenobewan

This is where I believe the problem lies, your controls are fixed width and height. Perversely, you may need to try relative positioning - eg 50% width and height will always appear in the center regardless of any resolution. Credit to Mr Occam and his razor for the assistance.

Hmmm....point taken!

**Abhinavnaresh** · Feb 28 '08, 05:53 AM

any solution to my problem????i am still stuck.plz help

Originally posted by DrBunchman

Hmmm....point taken!

Controls not displayed properly

Controls not displayed properly

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment