Grow your CSS skills. Land your dream job.

Alignment issues in browsers (chrome, i-explorer)

  • # February 4, 2013 at 12:53 pm

    Hello good folks out there I really need some help solving my alignment issues here:
    1) I draw an ‘Ap Div’ box, drag it and place it in an area on my webpage design using Dreamweaver.
    2) Type in some content or add in image in the Ap div box.
    3) Go to ‘Live View’ in Dreamweaver it shows up fine.
    4) But when open it in a browser (chrome or i-explorer) the entire contents (‘ap-div’ box)that I had placed in step 2 are moved from the intended spot.

    Please advise if I need to modify the html code.
    Thanks in advance.
    Sam

    # February 4, 2013 at 12:54 pm

    Sam, it’s hard to tell what’s going on without seeing it in action. Could you put it in a [pen](http://codepen.io “”)?

    # February 4, 2013 at 11:46 pm

    check this webpage http://mlsgta.ca/ you will see the form on the bottom right is displaced/out of the web page. It looks ok in the ‘live view’ of Dreamweaver. Try opening it in Chrome and in i-explorer
    thanks

    # February 5, 2013 at 12:08 am

    Sam, personally, I wouldn’t use the positioning as freely as you have, but to answer your question, it’s:

    #apdiv3 {
    position: absolute;
    left: 981px;
    top: 802px;
    width: 301px;
    height: 420px;
    z-index: 2;
    }

    Chang your left to 957px

    # February 5, 2013 at 1:34 pm

    Hello Chris,
    thanks for responding. I do not know in what part of the code should by inserting what you posted.
    Here is an actual code :



    Turning your dreams into an address

    In here where can I place the code you sent. Just a note that this apdiv1 instead of apdiv3.
    apdiv1 is small compared to apdiv3 so I thought I would first try it on apdiv1. By the way for your reference the webpage is http://mlsgta.ca/ and the scrolling text “Turning your dreams into an address” is in apdiv1……it needs to fit in the RED header (right hand side ..postion right to left)
    Please advise.
    Sam

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