인풋과 텍스트 정렬문제
꽃햇님
안녕하세요 오전에 글을 남기고 ...
다시 남기게 되네요...
인풋과 텍스트 정렬이 말썽을 부리고 있네요...
이미지에 보시면 인풋박스랑 정렬이 IE8만 다르네요...
왜 IE8에서만 그렇게 되는지 알고 싶네요 ㅠㅠ
고수님들께 부탁드립니다.
////** html **////
!-- 검색 --
div id=Board_Search
ul
li class=in01게시물:span class=blue519/span/li
li class=in02페이지:span class=red4/spanspan class=blue5/52/span/li
li class=in03input type=checkbox name=chkbox id=chkbox value=checkbox /label for=chkbox제목/label/li
li class=in04input type=checkbox name=chkbox id=chkbox value=checkbox /label for=chkbox내용/label/li
li class=in05input type=checkbox name=chkbox id=chkbox value=checkbox /label for=chkbox작성자/label/li
li class=in06input type=text class=search_input //li
li class=in07a href=#img src=images/board/search_btn.gif alt=검색 //a/li
li class=in08a href=# title=새창img src=images/board/rss_btn.gif alt=RSS //a/li
/ul
/div
!-- //검색 --
////** html **////
////**css **////
#Board_Search {position:relative; float:left; width:670px; height:50px; padding:0 0 0 0; margin:0; background:url(../images/board/searcg_back.gif) no-repeat;}
#Board_Search ul {padding:0 20px 0 20px; margin:0; list-style:none; }
#Board_Search li {display: inline-block; float:left; height:20px; padding:0; margin:0; list-style:none;}
#Board_Search li.in01 {padding:18px 11px 0 30px; margin:0; font-size:12px; color:#454545;}
#Board_Search li.in02 {padding:18px 20px 0 0; margin:0; font-size:12px; color:#454545;}
#Board_Search li.in03 {padding:13px 5px 0 0; margin:0;}
#Board_Search li.in04 {padding:13px 5px 0 0; margin:0;}
#Board_Search li.in05 {padding:13px 5px 0 0; margin:0;}
#Board_Search li.in06 {padding:15px 3px 0 0; margin:0;}
#Board_Search li.in07 {padding:15px 3px 0 0; margin:0;}
#Board_Search li.in08 {padding:15px 0 0 0; margin:0;}
#Board_Search span.red {font-size:12px; color:#F85264; font-weight:bold;}
#Board_Search span.blue {font-size:12px; color:#009DD6; font-weight:bold;}
/*인풋관련스타일*/
.search_input {background-color:#ffffff; color: #545454; border: solid 1px #A5A5A5; width:170px; height:18px;}
.small_input {background-color:#ffffff; color: #545454; border: solid 1px #E7E7E7; width:35%; height:15px;}
.middle_input {background-color:#ffffff; color: #545454; border: solid 1px #E7E7E7; width:50%; height:15px;}
.big_input {background-color:#ffffff; color: #545454; border: solid 1px #E7E7E7; width:93%; height:15px;}
.coment_input {background-color:#ffffff; color: #545454; border: solid 1px #E7E7E7; width:103px; height:15px;}
.textarea {background-color:#ffffff; color: #545454; border: solid 1px #E7E7E7; width:96%; height:200px; padding:10px;}
.coment_textarea {background-color:#ffffff; color: #545454; border: solid 1px #E7E7E7; width:96%; height:20px; padding:10px; overflow:hidden;}
////**css **////
-
둘빛
어떻게 말썽을 부리는 건지도 말씀해주셔야..;
-
튼튼
#Board_Search li {line-height:20px;}
#Board_Search li * {vertical-align:middle;}
줘보시구, li.in01~ 08까지의 padding-top을 똑같이 맞춰줘보세요.
그리고, block속성인 li에다가 inline-block속성을 주시면 ie쪽에서 제대로 렌더링 하지 않는 걸로 알고 있습니다. inline속성인 놈들만 inline-block을 제대로 먹던걸로 기억하는데...