strange positioning behavior

G

Guest

Given the following html:

<HTML>
<BODY>
<DIV style="POSITION: absolute; TOP: 0px; LEFT: 0px; WIDTH: 9px;
HEIGHT: 9px; BACKGROUND-COLOR: red"></DIV>
<DIV style="POSITION: absolute; TOP: 10px; LEFT: 10px; WIDTH: 9px;
HEIGHT: 9px; BACKGROUND-COLOR: blue"></DIV>
<DIV style="POSITION: absolute; TOP: 20px; LEFT: 20px; WIDTH: 9px;
HEIGHT: 9px; BACKGROUND-COLOR: green"></DIV>
<DIV style="POSITION: absolute; TOP: 30px; LEFT: 30px; WIDTH: 9px;
HEIGHT: 9px; BACKGROUND-COLOR: purple"></DIV>
<DIV style="POSITION: absolute; TOP: 40px; LEFT: 40px; WIDTH: 9px;
HEIGHT: 9px; BACKGROUND-COLOR: yellow"></DIV>
<DIV style="POSITION: absolute; TOP: 50px; LEFT: 50px; WIDTH: 9px;
HEIGHT: 9px; BACKGROUND-COLOR: orange"></DIV>
<DIV style="POSITION: absolute; TOP: 60px; LEFT: 60px; WIDTH: 9px;
HEIGHT: 9px; BACKGROUND-COLOR: black"></DIV>
</BODY>
</HTML>

You would think you would see a page with squares of equal height and
width, positioned in a stair type pattern like this:

_____
| |
| |
|_____|_____
| |
| |
|_____|_____
| |
| |
|_____|

but instead you see something like this:

_____
| |
| |
| |_____
| | |
|_____| |
| |_____
| | |
|_____| |
| |
| |
|_____|

(forgive the rudimentary shapes, hopefully text wrap won't affect it
horribly)

It seems like in my version of IE 6 (6.0.3790.0, Update Versions:
3283), setting a div to equal height and width, causes the div to
"stretch" height-wise. Left positioning seems to behave normally, in
that, a div set with a left position of 0px, and a width of 9px, is
not overlapped with a div to the right of it with a positioning of
left: 10px. This does not seem to be the case with the height and top
positioning.

I have not been able to view this in any other browser versions, so I
am not sure if it is a browser specific problem.

Am I missing something else? I also tried setting the margins and
padding of the body to zero to see if that was causing the behavior,
but it was still the same result.

Any help would be appreciated, and at very least give me some peace of
mind.

If I need to elaborate this problem further, please let me know.

Thanks,

Jonathan
 
G

Guest

Hi I seem to get a similar problem to which I am trying to also get a
solution to.

Window Server 2003 Standard Edition.
IE 6.0.3790.0

My problem is that I have 4 div tags aligned side by side. When the html
page is opened up initally it has all the 4 div tags aligned side by
side...going left to right as expected.

Now these tags are being used as tabs for a Tab Dialogue, so when the user
clicks on any of these tags, the tags now become overlaid.

Now before you say that there is some thing wrong with my DHTML script that
positions the div tags, my question would be why does it work with IE 6 that
is installed with XP SP 2 correctly and lesser verions of IE such as 5.5 on
Windows 2000?





<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Quote</title>
</head>
<style type="text/css">
<!--
..tab {
font-family: sans-serif; line-height:150%; font-weight: bold;
position:absolute; text-align:center; border:2px; border-color:#999999;
border-style:blush:utset; border-bottom-style:none; width:150px; margin:0px;
height: 30px;
}

..panel {
font-family: sans-serif; font-size: smaller; position:absolute; border:
2px; border-color:#999999; border-style:blush:utset; width: 800px; height: 520px;
left:0px; top:28px; margin:0px; padding:6px;
}

..table_row {
font-family: sans-serif; line-height:150%; text-align:right; border:2px;
border-color:#999999; height: 25px; width: 600px;
}

-->
</style>

<body>
<div class="tab" id="p1tab0" style="Z-INDEX: 5; LEFT: 0px; CLIP: rect(0px
auto 30px 0px); TOP: 0px; BACKGROUND-COLOR: #99ccff">
<a href="">Tab 0</a>
</div>

<div id="p1tab1" class="tab" style="Z-INDEX: 4; LEFT: 150px; CLIP:
rect(0px auto 30px 0px); TOP: 0px; BACKGROUND-COLOR: #88ccff">
<a href="">Tab 1</a>
</div>

<div id="p1tab2" class="tab" style="Z-INDEX: 4; LEFT: 300px; CLIP:
rect(0px auto 30px 0px); TOP: 0px; BACKGROUND-COLOR: #88ccff">
<a href="">Tab 2</a>
</div>

<div id="p1tab3" class="tab" style="Z-INDEX: 4; LEFT: 450px; CLIP:
rect(0px auto 30px 0px); TOP: 0px; BACKGROUND-COLOR: #88ccff">
<a href="">Tab3</a>
</div>


</body></html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

news letter 1
positioning 1
Javascript Code 1
Highlighting he current page 3
Two divs and the old 100% height problem 3
Problem while inserting a html page into word2000 document 4
from tables to css - I need help 1
Embedded media player 3

Top