Проблема с версткой

[veromi]

Помогите пожалуйста..

Дизайн коласит.. Сижу уже 2 часа над этой проблемой не пойму в чем дело..

Итак.

Моя ссылка

пытаюсь вставить форму в див в футере.. форма постоянно вылезает за рамки..

код хтмл

<div id="footer">

<div id="grayline_footer">
</div>

<div id="pusto_f">
</div>



<div id="footer_subscribe">


<div id='f_pustishka'></div>
<div id='f_subscribe_zagolovok'>


<span class='zagolovok'>ЗАРЕГИСТРИРУЙТЕСЬ и будьте в курсе!</span>

</div>


<form name="subscribeform"   action="/contacts/budte_vkurse/index.php" method="post">

<div id='subscribe_form'>



<div id='subscribe_form_left'><input name="email" type="text" class="formstyle2" id="email2" value="vasya@mail.ru"/>
</div>
<div id='subscribe_form_right'><input type="submit" name="submit_email" class="submit_email_button" value="" />
</div>

</div>

</form>



</div>

<div id="f_social">
<div id="fbook"><a href="#"><img alt='' src="/images/facelogo.png"></a>
</div>
<div id="twitt"><a href="#"><img alt='' src="/images/twittlogo.png"></a>
</div>
<div id="yout"><a href="#"><img  alt='' src="/images/youtlogo.png"></a>
</div>
</div>


<div id="small_grayline_footer">
</div>

CSS

#footer_subscribe{width:304px;height:47px;float:left; text-align:left;  }
#f_pustishka{width:304px;height:7px;float:left; }

#f_subscribe_zagolovok{width:304px;height:15px; float: left;}



#subscribe_form{width:224px; height:20px;  margin: 0; padding:0; }
#subscribe_form_left {width:142px; height:20px; float: left; margin-top:0px;  margin: 0; padding:0;border: solid 1px #555; }
#subscribe_form_right {width:80px; height:20px; float: left;   margin: 0; padding:0; }



.submit_email_button{ background-image:url(../images/submit_email.jpg); width: 80px; height: 20px; border:none;  cursor: pointer; }

#f_social{width:153px;height:53px; float: right; }
#fbook, #twitt, #yout{width:40px; height: 40px; float:right; margin:7px 6px 7px 0}

[ablay2009]

#footer{overflow:hidden} не пробовали?

UPD:ссылка не пашет не могу точно ответить

Edited February 8, 2012 by ablay2009

[veromi]

Моя ссылка

Вот ссылка..

Пробовали.. .

overflow:hidden просто режет низ и все. .

На всякий случай полный css

@charset "windows-1251";
/* CSS Document */

HTML {
    background: #fff url(/images/bg_cont.png) top center no-repeat; 
    height: 100%; 
   }
   BODY {
    background: url(/images/bg_body.png) repeat-x 100% 0; 
    margin: 0; padding:0;
   font-family:Arial,Helvetica,sans-serif;font-size:62.5%;line-height:13px;color:#666;text-align:center; 
   }
a:link,a:visited{text-decoration:none;color:#233e99;}
a:hover{text-decoration:underline;color:#233e99;}   
img{border: none;}


#wrapper {width: 890px; margin: 0 auto;  }	

#header{width: 890px; height:195px;  }	   
#logo_head{width: 218px; height: 93px; float:left; background-image:url(/images/logo_hd.png); }
#hd_right{width:257px; height: 93px;  float:right;}
#hd_phone{width:257px; height:57px; background-image:url(/images/phone_hd.png);}
/*#hd_search{width:257px; height:36px;background-image:url(/images/search_hd.png);}*/
/*Навигация*/




#hd_navi{width:890px; height:108px; float:left; background-image:url(/images/navi.jpg); background-position:0px -36px;}
#pomogite_stat_blank {width:890px; height: 41px; float:left; }
#pomogite_stat{width:890px; float:left; text-align:left;}
#pomogite_stat a:link{font-size:12px; text-decoration:none; font-weight:600; color:#FFF; margin-left:20px;}
#pomogite_stat a:visited{font-size:12px; text-decoration:none; font-weight:600; color:#FFF; margin-left:20px;}
#pomogite_stat a:hover{font-size:12px; text-decoration:underline ; font-weight:600; color:#FFF; margin-left:20px;}

#menu_container{position: relative;  top:2px; left:30px;}
ul#menu_navi{margin:0; padding:0; list-style:none; clear:both;}
#menu_navi li{overflow:hidden; text-indent:-9999px; display:inline; float:left; 
margin-right:0px;}
#menu_navi li a{background:url('/images/navi.jpg') no-repeat; width:100%; 
height:100%; display:block;}
/* Кнопка Главная */
#menu_navi li.main_nav{width:75px; height:30px;}
#menu_navi li.main_nav a{background-position:-30px -38px;}
#menu_navi li.main_nav a:hover{background-position:-30px -5px;}
#menu_navi li.main_nav a.selected{background-position:-30px -5px;}
/* Кнопка Запчасти*/
#menu_navi li.parts_nav{width:73px; height:30px;}
#menu_navi li.parts_nav a{background-position:-105px -38px;}
#menu_navi li.parts_nav a:hover{background-position:-105px -5px;}
#menu_navi li.parts_nav a.selected{background-position:-105px -5px;}
/* Кнопка Автосервис*/
#menu_navi li.auto_servis_nav{width:88px; height:30px;}
#menu_navi li.auto_servis_nav a{background-position:-178px -38px;}
#menu_navi li.auto_servis_nav a:hover{background-position:-178px -5px;}
#menu_navi li.auto_servis_nav a.selected{background-position:-178px -5px;}
	   /* Кнопка полезное*/
#menu_navi li.useful_nav{width:73px; height:30px;}
#menu_navi li.useful_nav a{background-position:-266px -38px;}
#menu_navi li.useful_nav a:hover{background-position:-266px -5px;}
#menu_navi li.useful_nav a.selected{background-position:-266px -5px;}
	   	   /* Кнопка контакты*/
#menu_navi li.contacts_nav{width:74px; height:30px;}
#menu_navi li.contacts_nav a{background-position:-339px -38px;}
#menu_navi li.contacts_nav a:hover{background-position:-339px -5px;}
#menu_navi li.contacts_nav a.selected{background-position:-339px -5px;}



/*Основной контент*/
#main_content{width:890px;}
.small_navi{width: 100%; height: 15px; float:left; text-align:left; text-transform: capitalize; margin-left:25px; margin-bottom:5px; font-size:11px; white-space: pre;}



.content_left{width:625px; float:left;  }
.nazv_razd{width:100%; height: 25px; float:left; }
.nazv_razd h1{text-align:left; text-transform: uppercase; font-size:20px; margin-left:25px; margin-top:5px; color:#e31937;}
h2{text-align:left; text-transform: uppercase; font-size:18px; margin-left:25px;  color:#233e99;}

.content_right{width:265px; float:right; } 



#main_banner{width:605px; height:260px;  background-color:#F00; margin-left:8px;  border: solid 2px #d3d3d3; float:left;}
.right_banner{width:245px; height:400px; background-color:#69F; margin-left:8px; border: solid 2px #d3d3d3; float:left; }
.right_banner_small{width:245px; height:185px; background-color:#999; margin-left:8px; border: solid 2px #d3d3d3; float:left; }


#virtual_tour{width:605px; height:115px; background-color:#F00; margin-left:8px;  border: solid 2px #d3d3d3; float:left;}
#shema_proezda{width:605px; height:442px;  background-color:#CCC; margin-left:8px;  border: solid 2px #d3d3d3; float:left;}


.pusto{width:100%; height: 15px; float:left;}
.pusto2{width:100%; height: 10px; float:left;}

/*Голосование*/
.golosovanie{width:245px;background-color:#0F0; margin:0 auto; overflow:hidden;}
.golos_top{width:245px; height:40px;float: left;  background-color:#9F6}
.golos_left{width:100px; height:15px; float: left; background-color:#C60}
.golos_right{width:145px; height:15px; float: right; background-color:#F69}
.golos_submit{width:245px; height:23px;float: left;  background-color:#9F6 }

/*Форма*/
.form1{width:605px; margin:0 auto; overflow:hidden; }
.form_left{width:200px; height:28px; float: left;  text-align:center;padding-top:3px; text-transform: uppercase; color:#222; font-size:11px;  }
.form_left_text{width:200px; height:285px; float: left;  text-align:center;  text-transform: uppercase; color:#222; font-size:11px;}
.form_right{width:405px; height:28px; float: right; padding-top:3px; text-align:left;}
.form_text{width:405px; height:285px; float: right;  text-align:left;}

.formstyle{width:380px ; height: 16px;   }


#message{width:380px; height:275px;}
#message, .formstyle, .formstyle2{border: solid 1px #555; background-color:#eee; text-align:left; color:#666666; padding-left:5px;  padding-right:5px;}

#answer{color:#F00; font-weight:600; text-align:center;}
#answer_ok{color:#0F0; font-weight:600; text-align:center;}


/*Футер*/
#footer{width:890px; height:81px; float:left; overflow:hidden;}
#grayline_footer{width:890px; height:3px; background:url(../images/footer_gray_line3.png) repeat-x; float:left;}
#pusto_f{width:890px; height: 15px; float:left;}
#small_grayline_footer{width:890px; height:1px; background-color:#c9c9c9; float:left;}
/*Соц сети*/



#footer_subscribe{width:304px;height:47px;float:left; text-align:left;  }
#f_pustishka{width:304px;height:7px;float:left; }

#f_subscribe_zagolovok{width:304px;height:15px; float: left;}



#subscribe_form{width:224px; height:20px;  margin: 0; padding:0; }
#subscribe_form_left {width:142px; height:20px; float: left; margin-top:0px;  margin: 0; padding:0;border: solid 1px #555; }
#subscribe_form_right {width:80px; height:20px; float: left;   margin: 0; padding:0; }



.submit_email_button{ background-image:url(../images/submit_email.jpg); width: 80px; height: 20px; border:none;  cursor: pointer; }

#f_social{width:153px;height:53px; float: right; }
#fbook, #twitt, #yout{width:40px; height: 40px; float:right; margin:7px 6px 7px 0}


#under_footer{text-align:left; float: left;}
h6 { font-size:12px; font-weight:600;
	color:#223e99;}

p{margin:0 10px 10px; text-align:left; color:#222; font-size:11px;}

.zagolovok { font-size:12px; font-weight:600;
	color:#223e99; letter-spacing:0px;}
.zagolovok2{color:#222; font-size:11px; font-weight:600;}

[ablay2009]

У меня все нормально с футером:

[veromi]

это вы называете нормально?

Снизу формы присмотритесь..

А вот как у меня

[ablay2009]

Снизу формы присмотритесь..

Я вот не понимаю зачем оборачивать внутренности формы дивом, потом еще оборачивать дивами каждый из инпутов по отдельности? Можно же просто оформить сами инпуты - так будет гораздо проще, чище, и надежнее.

P.S. У блока under_footer лучше убрать float и написать clear:both и еще поставить перед ним див с clear:both

P.P.S. Форму регистрации лучше поднять, этак, на тысячу пикселей повыше

P.P.P.S. Вместо value="vasya@mail.ru", лучше написать placeholder="vasya@mail.ru" (если конечно доктайп позволяет)

UPD: Извините, что так много постскриптумов, просто душа не выдержала

Edited February 8, 2012 by ablay2009

[veromi]

У левой части формы задана высота 20 px, У правой части формы (у кнопки), также задана высота 20 px.

отступы 0/ Почему в Хроме и Експлорере у левой части высота на 2 пикселя больше?, если задана одинаковая высота 20 px?

Пробовал добавлять бордюр правой части - безтолку.. один хрень не ровно.. В опере все ровно..

отход от дивов в форме не решает проблему..

Обратите внимание на большую форму в середине страницы... Там тоже все поля чуть ниже lavelов.. на пару пикселей..

В чем хрень то?..

Кто-нибудь может объяснить?..

[everytime]

У левой части формы задана высота 20 px, У правой части формы (у кнопки), также задана высота 20 px.

отступы 0/ Почему в Хроме и Експлорере у левой части высота на 2 пикселя больше?, если задана одинаковая высота 20 px?

Кто-нибудь может объяснить?..

В левой части у input есть еще бордер однопиксельный, он и дает эти два пикселя.

[ablay2009]

У левой части формы задана высота 20 px, У правой части формы (у кнопки), также задана высота 20 px.

отступы 0/ Почему в Хроме и Експлорере у левой части высота на 2 пикселя больше?, если задана одинаковая высота 20 px?

Пробовал добавлять бордюр правой части - безтолку.. один хрень не ровно.. В опере все ровно..

отход от дивов в форме не решает проблему..

Обратите внимание на большую форму в середине страницы... Там тоже все поля чуть ниже lavelов.. на пару пикселей..

В чем хрень то?..

Кто-нибудь может объяснить?..

Input во всех браузерах выглядит по разному, попробуйте вместо него использовать button для кнопки