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 IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Divs not displaying as expected

Status
Not open for further replies.

LarrySteele

Programmer
May 18, 2004
318
US
I'm trying to be brief as I'm not a fan of writing a dissertation to describe a relatively simple error.

***My company uses IE6*** This is not an option in our company, and it's not an option for this web application.

The html below is from an internal site. I created what can be described as an error landing page. I'm mimicking the site design via style definition. Three rectangles spanning page width at the top and a column spanning height on the left.

Initially I saved this as an ASP (classic) page because this is intended to catch errors on index.asp. So, I named the file index_error.asp for consistency. The odd thing is that the three divs, topside1, 2, and 3, are short. Instead of spanning the whole page, their width is short by 142px - the width of the leftside div.

Today I changed the file to .htm and IE6 had no problem displaying the divs correctly. I am able to open this page in FireFox, and FF displays the page correctly (either ASP or HTM).

It's apparent this is a quirk with IIS/ASP. The fix to this is easy, change the file to .htm and modify the links to the file.

I'm just curious if anyone else has run into this particular quirk and what you did to resolve.

Code:
<html>

<style>

    body {
        font-size: 9pt;
        background-color: #e4e9e4;
        font-family: arial, sans-serif;
    }

    .topside1 {
        position: absolute;
        width: 100%;
        top: 0px;
        left: 0px;
        height: 30px;
        background-color: #cecece;
    }

    .topside2 {
        position: absolute;
        width: 100%;
        top: 30px;
        left: 0px;
        height: 35px;
        background-color: #066;
    }

    .topside3 {
        position: absolute;
        width: 100%;
        top: 65px;
        left: 0px;
        height: 35px;
        background-color: #000;
    }

    .leftside {
        position: absolute;
        width: 142px;
        top: 65px;
        left: 0px;
        height: 100%;
        background-color: #066;
    }

    .body_text {
        padding-top: 140px;
        padding-left: 160px;
    }

</style>

<body>

    <div class="topside1">
        &nbsp;
    </div>

    <div class="topside2">
        &nbsp;
    </div>

    <div class="topside3">
        &nbsp;
    </div>

    <div class="leftside">
        &nbsp;
    </div>

    <div class="body_text">
        <h1>Sample Header 1 Text</h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in nulla libero.
    </div>
</body>

</html>
 
Actually, there is not much chance that asp and html would make any difference. The browsers do not look at the extension, as long as both have the same code, they should render the same. Having FF render the page correctly furthermore proves that asp and html must be the same.

That leads me to believe (and this is only true if your real code includes a doctype on top) that server must append something to the start of the document. A little something that does not get rendered, but appears as the first thing in the file. Provided this is followed by a doctype, this would push most browsers in standards mode, rendering the code correctly. IE however would stay in quirks mode, failing the rendering. In HTML, this same thing would not be appended and IE would read the doctype first and switch to standards mode.

If your code does not have a doctype and the provided code is exactly the same in HTML or ASP, then I don't know why it is not working.

As an aside, I have no idea why you're laying out divs via absolute positioning. There are much better and simpler ways to do it.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top