The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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:

    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">


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

    # June 10, 2008 at 6:10 am

    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:

    # 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.

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

    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 <


    Thanks for help

    # June 10, 2008 at 2:56 pm

    This reply has been reported for inappropriate content.

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed