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

div elements goes wrong way when window is resized

  • # February 5, 2013 at 5:02 am

    Hi all,

    I just suscribed to this forum cause you guys seems to be real good. so here comes my problem.

    am student in php and java and lerning css for myslef…

    i’ve got several divs in my html as you can see down here.

    < !DOCTYPE html>

    Forgot your password?

    i am also using the reset.css of

    and here comes my css.

    html, body{
    height: 100%;
    width: 100%;
    font-size: large;
    height: 1pc;
    width: 45em;
    margin-left: 12em;
    background-color: green;
    /* float: right;
    /*z-index: 0 ;*/
    height: 4.5em;
    width: 100%;
    min-width: 70em;
    background: rgb(19,19,19); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzEzMTMxMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iIzFjMWMxYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM4JSIgc3RvcC1jb2xvcj0iIzJiMmIyYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg4JSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0YzRjNGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgb(19,19,19) 0%, rgb(28,28,28) 20%, rgb(43,43,43) 38%, rgb(89,89,89) 88%, rgb(76,76,76) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(19,19,19)), color-stop(20%,rgb(28,28,28)), color-stop(38%,rgb(43,43,43)), color-stop(88%,rgb(89,89,89)), color-stop(100%,rgb(76,76,76))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgb(19,19,19) 0%,rgb(28,28,28) 20%,rgb(43,43,43) 38%,rgb(89,89,89) 88%,rgb(76,76,76) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgb(19,19,19) 0%,rgb(28,28,28) 20%,rgb(43,43,43) 38%,rgb(89,89,89) 88%,rgb(76,76,76) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgb(19,19,19) 0%,rgb(28,28,28) 20%,rgb(43,43,43) 38%,rgb(89,89,89) 88%,rgb(76,76,76) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgb(19,19,19) 0%,rgb(28,28,28) 20%,rgb(43,43,43) 38%,rgb(89,89,89) 88%,rgb(76,76,76) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#131313', endColorstr='#4c4c4c',GradientType=0 ); /* IE6-8 */

    width: 98%;
    margin-right: auto;
    margin-left: auto;
    height: 6em;
    width: 12em;
    min-height: 6em;
    min-width: 12em;
    /*z-index: 1;*/
    margin-top: -4.5em;
    margin-left: 5em;
    background-color: orange;

    /*z-index: 1;*/
    position: absolute;
    margin-left: 25em;
    height: 4em;
    width: 86%;
    min-height: 4.5em;
    min-width: 45em;
    font-size: 0.8em;
    padding-top: 0.5%;
    /*background-image: ;*/
    /*background-color: white;*/

    #auth label{
    margin-left: 2em;
    margin-right: 0.5em;
    #auth input[type=text], input[type=password]{
    margin-right: 0.5em;
    border: none;
    outline: none;
    background: transparent;
    border-right: white solid 1pt;
    border-bottom: white solid 1pt;
    color: white
    #auth2 {
    float: left;
    margin-left: 7em;
    #auth2 label{
    margin-left: 0;
    margin-right: 0;
    #auth2 input{
    margin-right: 7.5em;
    #auth2 a:link, a:visited, a:hover, a:active{
    margin-left: 1em;
    text-decoration: none;
    color: white;

    .btn_submit {
    border-top: 1px solid #626566;
    background: #23282b;
    background: -webkit-gradient(linear, left top, left bottom, from(#60676b), to(#23282b));
    background: -webkit-linear-gradient(top, #60676b, #23282b);
    background: -moz-linear-gradient(top, #60676b, #23282b);
    background: -ms-linear-gradient(top, #60676b, #23282b);
    background: -o-linear-gradient(top, #60676b, #23282b);
    padding: 3px 5px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
    -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
    box-shadow: rgba(0,0,0,1) 0 1px 0;
    text-shadow: rgba(0,0,0,.4) 0 1px 0;
    color: #ffffff;
    font-size: 16px;
    font-family: Georgia, serif;
    text-decoration: none;
    vertical-align: middle;
    .btn_submit:hover {
    border-top-color: #2b3742;
    background: #2b3742;
    color: #ccc;
    .btn_submit:active {
    border-top-color: #53595e;
    background: #53595e;

    my first problem is that when i resize the window to very small my inputs in the auth's div is broke.

    and my second problem is that the logo goes behind the top border when using IE

    i know its no big deal but am totally lost

    you can see it here: []( "")

Viewing 1 post (of 1 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