묻고답하기
검색창의 글자위치가 ie8과 크롬에서 달리보이는 문제 해결 좀 부탁드립니다.
2010.01.03 11:39
검색창을 홈페이지에 달았는데요.
페이지가 뜨면 글자가 보여지고 검색창에 글입력시에는 사라지도록 했습니다.
각설하고..
아래 그림처럼 익스8과 크롬에서 글 위치가 다르게 보입니다.
익스 8 크롬
소스위치는 제대로 잡은 듯 한데.. 그렇다면 크롬에서는 제대로 보이는거고 익스8에서는 제대로 못잡는게 되겠네요.
익스8에서 크롬처럼 위로 더 올라가야 할듯 싶은데..
enter keyword를 클릭했다가 아무것도 적지않고 검색창 밖을 클릭하면 다시 저 문구가 보이도록 했거든요.
이렇게 했을때 크롬은 위치가 같고 익스8에서는 글 위치가 제대로 잡히는거 같습니다.
문제는 익스8에서 처음에 페이지 떳을때 글위치가 저렇게 된다는거죠..
이걸 어떻게 해결 해야 할까요?
css 와 html 소스 올립니다.
css
/* 검색창 */
#isSearch { position:absolute; top:10px; left:10px; width:150px; text-align:left;}
#isSearch .searchOrder { display:none;}
#isSearch .checked { position:absolute; left:0; top:0; text-align:left; display:block; padding:5px 0 0 5px; width:64px; height:14px; background:url() no-repeat; font:11px "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; color:#ffffff; line-height:normal;}
*:first-child+html #isSearch .checked { top:1px; }
#isSearch ul { display:none; position:absolute; left:0; top:18px; padding:2px 0 3px 0; text-align:left; border:1px solid #432d16; background:#536c6d;}
#isSearch ul li { width:67px; height:18px; list-style:none; }
#isSearch ul li input { display:none;}
#isSearch ul li label { display:block; padding:4px 0 0 4px; width:63px; height:15px; font:11px "돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; color:#432d16;}
#isSearch ul li label.on { background:#9abb83; }
#isSearch ul li label:hover,
#isSearch ul li label:focus { background:#9abb83;}
#isSearch .inputText { text-align:center;vertical-align:top; position:relative; top:-1; _top:-1px; left:1px; padding:3px 3px 0px 3px; width:94px; height:14px; color:#9abb83; border:1px solid #432d16; background-color:#799e61; }
#isSearch .inputText:hover,
#isSearch .inputText:focus { color:#799e61; border:1px solid #432d16; background-color:#9abb83; }
*:first-child+html body#default #isSearch .inputText { position:relative; top:-1px;}
#isSearch .submit { vertical-align:middle; _position:relative; _top:-1px;}
*:first-child+html body#default #isSearch .submit { position:relative; top:-1px;}
html
<!-- 검색 -->
<form action="{getUrl()}" method="post" id="isSearch">
<!--@if($vid)-->
<input type="hidden" name="vid" value="{$vid}" />
<!--@end-->
<input type="hidden" name="mid" value="{$mid}" />
<input type="hidden" name="act" value="IS" />
<input type="hidden" name="search_target" value="title_content" />
<input name="is_keyword" type="text" value="enter keyword" class="inputText" onFocus="if (this.value == 'enter keyword') {this.value = '+ '+ '';}" onBlur="if (this.value == '') {this.value = 'enter keyword';}"title="내용을 입력해 주세요." />
<input type="image" src="./img/buttonSearch.gif" alt="{$lang->cmd_search}" class="submit"title="검색" />
</form>
