Why is my Javascript interacting with this element wrongly?

Question

Here is the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
     MYNAME
     11/3/2010
     CISC 131
     Die.html uses the html within it and the style sheet located in Die.css to create a die whoes functionality is created in Die.js
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link href="Die.css" rel="stylesheet" type="text/css"/>
<script src="Die.js" type="text/javascript"></script>

<title>Die</title>
</head>

<body>
    <div id="game">
        <div id="clickableArea" class="banner">
        </div>

        <div id="dice">
            <div id="dot" class="die">
                    <div id="dot0" class="dot rowOne colOne">&#8226;</div><div id="dot1" class="dot rowOne colTwo">&#8226;</div><div id="dot2" class="dot rowOne colThree unused">&#8226;</div>
                    <div id="dot3" class="dot rowTwo colOne">&#8226;</div><div id="dot4" class="dot rowTwo colTwo">&#8226;</div><div id="dot5" class="dot rowTwo colThree">&#8226;</div>
                    <div id="dot6" class="dot rowThree colOne unused">&#8226;</div><div id="dot7" class="dot rowThree colTwo">&#8226;</div><div id="dot8" class="dot rowThree colThree">&#8226;</div>
            </div>

            <div id="dotB" class="die">
                    <div id="dotB0" class="dot rowOne colOne">&#8226;</div><div id="dotB1" class="dot rowOne colTwo">&#8226;</div><div id="dotB2" class="dot rowOne colThree unused">&#8226;</div>
                    <div id="dotB3" class="dot rowTwo colOne">&#8226;</div><div id="dotB4" class="dot rowTwo colTwo">&#8226;</div><div id="dotB5" class="dot rowTwo colThree">&#8226;</div>
                    <div id="dotB6" class="dot rowThree colOne unused">&#8226;</div><div id="dotB7" class="dot rowThree colTwo">&#8226;</div><div id="dotB8" class="dot rowThree colThree">&#8226;</div>
            </div>
        </div>

        <div id="status" class="banner">
        </div>
    </div>
</body>
</html>

And then here is the CSS:

/*
     MYNAME
     11/3/2010
     CISC 131
     Dice.css helps Die.html create a Die to be maniupulated by Die.js 
*/     

*
{
    margin: 0; 
    padding: 0; 
} 

body
{
    font-family: "Times New Roman"; 
    font-size: 12pt; 
    background-color: #0033CC;

} 

.die
{
    width: 6em; 
    height: 6em;
    border-style: solid; 
    border-color: black; 
    border-width: .25em; 
    position: relative; 
    float: left;
    margin: 1em; 
    background-color: #FFFFFF;

}

.dot
{
    font-size: 5em; 
    line-height: .30em; 
    float: left; 
    position: relative; 
    color: red; 
} 

.banner
{
    height: 1.5em; 
    background-color:#000000; 
    color: #FFFF00;
}


.rowOne
{
    top: .05em; 
}

.rowTwo
{
    top: .15em; 
}

.rowThree
{
    top:.25em; 
}

.colOne
{ 
    left: .03em; 
}

.colTwo
{
    left: .08em; 
}

.colThree
{
    left: .13em; 
}

.unused
{
    visibility: hidden; 
}

#game
{
    margin: auto; 
    width: 20em; 
    height: 15em; 
    background-color: #006600; 
    position: relative; 
    top: 4em; 
}

#dice
{
    margin-left: 1.5em; 
    width: 20em; 
    height: 8em; 
}

#status
{
    position: relative; 
    bottom: -5em;
}

Here is the problem code:

messageLocation=document.getElementById("status");

...

 window.alert("alert"); 
    messageLocation.innerHTML="test"; 
    window.alert("alert"); 
    messageLocation.innerHTML="posttest";

This is what happens:

an alert box pops up that says alert
the word test is written in left side in the messageLocation element
another alert box pops up
the word "posttest" is written in the far right side of the messageLocation element.

messageLocation is a div element that is identified by its id.

Why does 4 happen? why isn't posttest written to the left side just like test was?

I tested this using IE8 in compatibility mode (just what I happened to have). It seems to work placing the text in the same spot for me. See fiddle page here: [jsfiddle.net/qYXZC/][1] [1]: jsfiddle.net/qYXZC — Mark Schultheiss
– Mark Schultheiss, Commented Nov 8, 2010 at 5:08
@Mark, the first link you provided returned a 404 error for me, in the second one the error with test still occurred. Could this mean my computer has a virus or something? For background info im using a MacBook Pro running Mac OS X version 10.5.8 and am using firefox 3.6.12 — David
– David, Commented Nov 8, 2010 at 5:12

Yi Jiang · Accepted Answer · 2010-11-08 05:38:19Z

4

The reason for this happening is actually because of the way you're laying out the elements. The basic problem here is that the line-boxes of the dots of the dice are interfering with the relatively positioned status element.

alt text

By adding contenteditable to the dice element, we can see exactly how high the line boxes of the dots are. See this fiddle for more detail: http://www.jsfiddle.net/yijiang/AsvLZ/1/

Because even though the individual elements are small, their line-boxes extend out of the parent element and interact with the line-box of the status element, causing the line to start only after the second dice. This is true even after you shift the status element 5 lines down using bottom: -5em. By adding more content to the status box, since the word cannot be broken, the entire word is shifted down one line.

To fix this, we can use position: absolute to position the elements instead. Absolutely positioned elements do not interact with one another, therefore preventing this from happening.

See: http://www.jsfiddle.net/yijiang/AsvLZ for an example of this.

answered Nov 8, 2010 at 5:38

Yi Jiang

50.2k16 gold badges139 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chuck Over a year ago

Just setting margin-bottom: 0 on .die works just as well.

David Over a year ago

is there anyway to make their lineboxes smaller to keep them inside their parrent element? what is a line box anyway?

David Over a year ago

@Yi Jiang, i used your advice and got it working. thanks for your help

Collectives™ on Stack Overflow

Why is my Javascript interacting with this element wrongly?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related