Grow your CSS skills. Land your dream job.

Another CSS weirdness

  • Anonymous
    # June 10, 2008 at 5:55 am

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

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



    TEST



    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 ;)

    Anonymous
    # June 10, 2008 at 6:10 am

    It is absurd: even if I change the line:

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

    into the line

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

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

    # June 10, 2008 at 6:13 am

    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.

    Anonymous
    # June 10, 2008 at 6:40 am

    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:

    Code:
    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

    # June 10, 2008 at 2:56 pm

    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.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".