수다닷컴

안녕하세요. 드디어 글쓰기가 되었네요. 그동안 수다닷컴을 통해서 많은 공부를 했었는데요.
지금 제가 웹표준 코딩을 막 배우는 단계라 이게 맞는가 싶어 질문 드립니다.

우선 첨부한 파일 참조해 주시구요.
이미지를 보면

익스 8, 파폭, 기타 브라우저에서는 아래처럼 잘 보이는데
익스6과 7에서는아래 처럼 정렬이 깨져 보입니다.소스는

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml
head
meta http-equiv=Content-Type content=text/html; charset=euc-kr /
title무제 문서/title
style type=text/css
* {margin:0; padding:0; font-family:돋움, Dotum, AppleGothic, San-serif; font-size:12px; color:#797979;}
div, ul, li {margin:0; padding:0;}
ul, li {float:left;}
li {list-style:none; /*height:20px;*/ margin-bottom:6px;}
img {border:none; vertical-align:middle;}
.example {width:200px; background-color:#FFFF99;}
.check {width:20px; background-color:#FF3366;}
.sentence {width:180px; background-color:#33FFFF;}
input {vertical-align:middle;}
/style
/head
body
div style=clear:both; height:150px;
ul class=example
li class=checkinput name= type=checkbox value= //li
li class=sentence아악 궁금해 죽을것 같애 아악 궁금해 죽을것 같애 아악 궁금해 죽을것 같애/li
li class=checkinput name= type=checkbox value= //li
li class=sentence아악 궁금해 죽을것 같애/li
li class=checkinput name= type=checkbox value= //li
li class=sentence아악 궁금해 죽을것 같애/li
li class=checkinput name= type=checkbox value= //li
li class=sentence아악 궁금해 죽을것 같애/li
/ul
/div
div style=clear:both; height:120px;
ul class=example
li class=checkimg src=images/test_img.gif //li
li class=sentence아악 궁금해 죽을것 같애/li
li class=checkimg src=images/test_img.gif //li
li class=sentence아악 궁금해 죽을것 같애/li
li class=checkimg src=images/test_img.gif //li
li class=sentence아악 궁금해 죽을것 같애/li
li class=checkimg src=images/test_img.gif //li
li class=sentence아악 궁금해 죽을것 같애/li
/ul
/div
div style=clear:both; height:120px;
ul class=example
li class=check악/li
li class=sentence아악 궁금해 죽을것 같애/li
li class=check악/li
li class=sentence아악 궁금해 죽을것 같애/li
li class=check악/li
li class=sentence아악 궁금해 죽을것 같애/li
li class=check악/li
li class=sentence아악 궁금해 죽을것 같애/li
/ul
/div
/body
/html

이렇게 했는데요...

첨엔 앞에 이미지일 때도 정렬이 깨졌었는데 vertical-align:middle 줘서 잡아줬었어요.
그런데 제일 중요한 체크박스일 땐 그것도 소용없는지 안먹더라구요.

결국 몇 시간 동안 고민하다가 겨우겨우

.sentence {display:inline; float:left; width:180px; margin:-18px 0 0 20px; _margin:-23px 0 0 20px; background-color:#33FFFF;}

이렇게 억지로다 display:inline;을 주고, margin:-18px 0 0 20px; _margin:-23px 0 0 20px;을 줘서 좌표맞추듯이 하긴 했는데요.

이렇게 복잡하게 하는 건 아닌거 같습니다.
어떻게 하면 보다 간결하게 할 수 있을까요?
정말 궁금해 죽을 것 같습니다;;;

신청하기