Grow your CSS skills. Land your dream job.

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 knacss.com

    and here comes my css.

    html, body{
    height: 100%;
    width: 100%;
    font-size: large;
    }
    #test{
    height: 1pc;
    width: 45em;
    margin-left: 12em;
    background-color: green;
    }
    #top_border{
    /* 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 */

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

    #auth{
    float:right;
    /*z-index: 1;*/
    color:white;
    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;
    }
    /*****************************************************************************************************/
    /*************************FIN**AUTHENTIFICATION*******************************************************/
    /*****************************************************************************************************/

    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: [http://cocoverasoap.com/groupe_musique/layout/index.php](http://cocoverasoap.com/groupe_musique/layout/index.php "")

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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