div elements goes wrong way when window is resized

[khalid95800]

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.

Email

Password

Remember me

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

[Author]

Posts