Solved

CSS,ASP.NET: Correctly positioning divs without DOCTYPE

Posted on 2009-03-31
16
294 Views
Last Modified: 2013-11-19
Hello everyone,

I am working on a website that doesn't use DOCTYPE. I am trying to position a div but it doesn't show up correctly unless I put the DOCTYPE instruction on the top of the page markup. I there a way I can make this work without using the DOCTYPE?
P.S: I use tables to position my content.
0
Comment
Question by:karakav
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 8
16 Comments
 
LVL 4

Expert Comment

by:amazingwolf1
ID: 24026460
Can you post your html code?
0
 
LVL 4

Author Comment

by:karakav
ID: 24026502
Here you are
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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">
    <title>Test Page</title>
 
    <script language="javascript" type="text/javascript">
        function showHide() 
        {                
            var theDiv = document.getElementById("mainDiv");     
            if(theDiv.style.visibility == "visible" || theDiv.style.visibility == "")      
            {
                theDiv.style.visibility = "hidden";           
            }
            else                 
            {
                theDiv.style.visibility = "visible";       
            }                               
        }              
    </script>
 
    <style type="text/css">    
        #mainDiv
        {
	        position: fixed;
	        top: 0;
	        left: 0;        	
	        background-color:#666;
	        filter:alpha(opacity=80); 
	        opacity:0.8;         	
	        height: 100%;
	        width: 100%;
	        min-height: 100%; 
	        min-width: 100%;
	        z-index:1;         
        }
        #innerDiv
        {
	        background-color: #ffff99;
	        color: black;
	        width: 50%;
	        text-align: center;
	        vertical-align: middle;
	        position: fixed;
	        bottom: 50%;
	        left: 25%;
	        font-weight:bold;
	        z-index:2; 
        }    
</style>
</head>
<body onload="showHide();">
    <form id="form1" runat="server" onsubmit="showHide();">
        <div id="mainDiv">
            <div id="innerDiv">
                            <asp:Label ID="label1" runat="server" >Please wait ...</asp:Label>
            </div>
        </div>
        <table>
            <tr>
                <td>
                    <asp:Button ID="button1" runat="server" Text="Ici"
                        OnClick="button1_Click" />
                    <asp:DropDownList ID="drop" runat="server" AutoPostBack="True" OnSelectedIndexChanged="drop_SelectedIndexChanged">
                        <asp:ListItem Text="Valor 1" Value="1" Selected="True" />
                        <asp:ListItem Text="Valor 2" Value="2" />
                        <asp:ListItem Text="Valor 3" Value="3" />
                    </asp:DropDownList>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>
 
 
 
 
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Threading;
 
public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
 
    }
    protected void button1_Click(object sender, EventArgs e)
    {
        Thread.Sleep(2000);
    }
    protected void drop_SelectedIndexChanged(object sender, EventArgs e)
    {
        Thread.Sleep(3000);
    }
}

Open in new window

0
 
LVL 4

Expert Comment

by:amazingwolf1
ID: 24026819
Does this help?
<body onload="showHide();" style="margin-left:5px;margin-top:0px">
0
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 4

Author Comment

by:karakav
ID: 24026849
No it doesn't.
0
 
LVL 4

Accepted Solution

by:
amazingwolf1 earned 500 total points
ID: 24026925
Oh, ok, got you. change position: absolute; in the style of mainDiv and innerDiv - then it will work.
0
 
LVL 4

Author Comment

by:karakav
ID: 24027001
It doesn't fit completely the window. Check on the right side.
0
 
LVL 4

Expert Comment

by:amazingwolf1
ID: 24027113
Add this to the style section:

 body {
      margin-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
}
0
 
LVL 4

Author Comment

by:karakav
ID: 24027531
Sorry for the delay. I can't defiine those values in the Body selector because I may need to define different values depending on the page. I was looking for  a solution that only affect the divs.
0
 
LVL 4

Expert Comment

by:amazingwolf1
ID: 24027558
The div is effected by the size of the body of the page. You can generate the body style programatically. I don't think there is such a solution that ignores the state of the body, since it is your "canvas", sort of speak.

0
 
LVL 4

Author Comment

by:karakav
ID: 24027782
Even like that the div is not covering all the window especially still on the right side.
0
 
LVL 4

Expert Comment

by:amazingwolf1
ID: 24028546
ok - which browser do you use?
0
 
LVL 4

Author Comment

by:karakav
ID: 24030632
I use Internet explorer 7. When I put on six, it is even worse because the dropdownlist overlap the div.
0
 
LVL 4

Expert Comment

by:amazingwolf1
ID: 24036730
I have an IE 7.0 and it seems ok...?
Hmmmm... The ghosts start to appear.

I will try and check this on IE 6.0 for you, but it make take me some time. Since IE versions behave differently with HTML, and since DOCTYPE is out of the question, this one will be a bit tricky.
0
 
LVL 4

Author Comment

by:karakav
ID: 24038107
No proble. I will wait. Thanks.
0
 
LVL 4

Expert Comment

by:amazingwolf1
ID: 24040455
Hi
I checked both on IE 7.0 and 6.0 and can't seem to see a probelm...
This is very strange, I am sorry but since I cannot reproduce this I think you should try and play with the code a bit to find what twicks are needed there.

Sorry for the delay, hope you'd find the rest of the solution.
0
 
LVL 4

Author Closing Comment

by:karakav
ID: 31564711
Actually it is not possible, at least to my possibilities, to correctly imitate whot DOCTYPE make the browsers do. For the problem of dropdowlist in IE6 I had to use an iframe to solve that but even though many other problems are coming in. Thanks for your cooperation anyway.
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

617 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question