Forums

billgates

Hi all,
there's a piece of code I don't understand. Here it is:

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

<HEAD>
<STYLE>
body {margin:0;background-color:#dcd7c1}
span {display:table-cell;display:inline-block}
div.sfondo {width:464px;height:595px;background-color:#220052}
div.anim {position:absolute;width:216px;height:182px;top:120px;left:103px\"}
</STYLE>
</HEAD>

<BODY>
<center>
	<SPAN>
	<DIV class=sfondo></DIV>
	<DIV class=anim style=\"margin-left:103px;color:white\">TEST</DIV>
	</SPAN>
</center>
</BODY>

</HTML>

The problem is that if I move the additional style attributes from the line "<DIV class=anim style="margin-left:103px;color:white">TEST</DIV>" to the top (in the DIV.anim style) it stops working as it should (horizontally centered layers). Even if I add a "background-color" attribute to the DIV.anim style the anim layer jumps to the left. Why?????

Thank you ;)

billgates

It is absurd: even if I change the line:

div.anim {position:absolute;width:216px;height:122px;top:120px;left:103px\"}

into the line

div.anim {position:absolute;top:120px;left:103px;width:216px;height:122px\"}

the "anim" layer shifts to the left!!! :shock:

Nodster

don't know if its the answer your looking for, but you have ended your CSS list with double quotes instead of a semicolon.

might be as simple as that.

billgates

Thanks for your reply.
I removed the double quotes, but it didn't resolved. So I removed the "left:103px;" and moved all the attributes to the top:

div.anim {position:absolute;width:216px;height:182px;top:120px;margin-left:103px;color:white}

Now it works correctly, but I wonder why I had this strange behaviour:
- if attributes are all on the div.anim{...} line without the "left" tag..... all OK (I still don't know why)
- if attributes are all on the div.anim{...} line with the "left" tag..... LEFT SHIFT
- if attributes aren't all on the div.anim{...} line (some attributes defined directly in the div tag) and there is the "left" tag..... all OK <----- WHY??????????

Thanks for help

daGUY

It has nothing to do with where in the document the CSS goes or anything like that. Somewhere along the line you changed "margin-left" to "left." Those are not the same thing. Since your div has an absolute position, specifying "left: 103px" places it 103px from the left edge of the browser window, which is why it looked like it was shifting to the left.

treehouse : what would you like to learn today?

Forums

Another CSS weirdness