CHI Proceedings Co-Chair 가 2년차라서
올해는 Print Proceedings 하고 DVD 를 담당하게 되었다...

DVD 에 HTML 형태로 소개, 인사말 및 목차를 담느라
CSS 파일을 써서 스타일을 지정하는데
팬시한 웹페이지를 많이 만들어 보지 않은 나는
너무나 순진하게도 표준이 정해져 있어서
어느 웹브라우저에서나 똑같이 보일거라고 믿었다...

IE7 을 써서 열심히 만들어서 보냈는데
나중에 리뷰하라고 구워보내준 디비디를
사파리, 크롬, IE8 에서 봤더니 엉망으로 보이는게 아닌가?

열라 짱돌을 굴려서 디버깅해가지고 다시 보낸후
FireFox 에서는 테스트를 안했다는 사실을 깨닫고
혹시나 하며 테스트 해봤더니 또 다시 문제가 발생...

여러가지 테스트 후에
FireFox 에서만 값을 다르게 지정해야 한다는 사실 발견하고
수없는 시도와 웹서치끝에 찾아낸 해결책은...


#left-column
{
    margin-top: 0px;
    #margin-top: -105px;
}

body:first-of-type #left-column {
    margin-top: -105px;
}


이렇게 하면 FireFox 는 0px 로 지정하고
IE7 하고 크롬은 #margin-top: -105px; 라인에 의해 -105 로 지정하고
사파리는 아래쪽 margin-top: -105px; 라인에 의해 -105 로 지정한다...

좀 부연설명을 적자면
IE7 하고 크롬은 # 이 있거나 말거나 그 값으로 지정하고
FireFox 하고 IE8, 사파리는 # 뒷부분을 무시...
사파리는 IE7 하고 크롬이랑 같은 값을 지정해야 하는데
그렇게 해주는게 body:first-of-type 부분...

IE8 은 margin-top: -105px; 로 지정되어 있는 두번째 css 파일을 만들어서
아래와 같이 html 안에서 그 css 파일을 사용하도록 지정해야 한다.

    <!--[if IE 8]>
        <link rel="stylesheet" href="files/Default-IE8.css" type="text/css">
    <![endif]-->


어쩜 이리도 산뜻하지 못하고 구질구질한지... ㅠ.ㅠ

어쨌든 똑같이 보이도록 만들 수 있다는 사실에 감사... ㅡ.ㅡ;;;;