safari 가 문제가 아니고, 크롬하고 firefox 에서도 정상적으로 보이지가 않습니다.  원래 의도하셨던 모습이 어떤 모습인지도 알아보기가 힘드네요....

그리고 div 가 문제가 아니고, 훔..... float left, float right, 링크는 그림파일에 전부다 map are 씌우셔서 링크를 걸어 놓으셨고....

링크를 모조리 다 그림파일로 만드셨네요... OTL  이러면 bot 들이 웹사이트를 돌아다닐수가 없어요... 메뉴나 링크는 아주 특수한 상황이 아니면 무조건 text 로 하셔야 합니다.

css 가 이해 안되시면, 드림위버 같은 에디터로 테이블로 레이아웃짜서 다시 다 만드세요...  (map area 도 드림위버나 다른 WYSWYG editor 로 다 넣으셨네요.)

이것도 매우 않좋은거지만, 현재 상태에서는 사이트 완성이 어려워 보이십니다.  저는 개발자는 아니지만, 어느 개발자 분이 보셔도, 이걸 고치느니 차라리 사이트를 새로 만들어 주는게 시간/돈이 더 싸게 먹히겠다고 말씀하실 것 같습니다.

기분나쁘시겠지만, 사실대로 말씀드리는 것이 좋을 것 같아서... 죄송.

http://blog.aboutus.org/your-home-page-shouldnt-be-an-image-map/

SEO 관련부분은 위 내용 구글로 번역해서 읽어보시구요.....

text 로 처리할 수 있는걸 이미지 사용하시는 이유가 뭐가 있을까요?  각 방문자마다 font 가 다르게 보일 수 있어서?  그건 font 를 javascript 으로 조정하실수 있는거고...

아무런 이유가 생각나지 않습니다.

이미지는 웹사이트를 느리게 만듭니다.  loading 시간이 늘어납니다. 사이트가 검색되지 못하게 막습니다. 

그런데 솔직히 지금 그게 문제가 아닌것 같습니다만....

CSS 는 직접 hard coding (손으로 직접 쓰는 방법) 이 아닌 자동으로 생성해서 쓰는 것 입니다.

body 넓이 얼마, 칼럼은 몇개, row 는 몇개, 이런식으로 지정해 주고, 출력하시면 되는 겁니다.

http://developer.yahoo.com/yui/grids/builder/

YUI, 블루프린트, 960 Grid, 이렇게 css 를 자동생성해주는 웹사이트는 수십군데가 넘습니다.  100% 웹표준이구요.

그런데 이런 자동 생성기를 쓴다고 해도, 최소한 grid 라던지, css 의 기본 상식은 갖고 작업을 하셔야 합니다. 이런 자동 생성기로 css 를 생성한 후에도 약간씩 수정을 해줘야 하거든요.

그러니까 빨리 작업을 끝내셔야 한다면 그냥 드림위버에서 테이블 그리셔서 끝내시는게 좋을 것 같습니다. 

문제가, 저 css 생성기들은 웹표준으로 css 를 생성해 줍니다.  그런데 님의 페이지는 링크는 전부다 이미지 작업으로 해놓으셨고 div 들은 다 따로 놀고 잇고, 이걸 다시 웹표준에 맞춰서 작업하는게 훨씬 더 일이 많아지죠. 

그러니까 div 에 대한 미련을 버리시고 그냥 테이블로 레이아웃을 드림위버로 그려서 작업하시는게 지금으로서는 빨리 일을 끝내실 수 있는 방법같다고 말씀드린 것 입니다.

그리고 다음에 작업하시기 전, div 와 css 의 기본에 대해 공부를 하셔서 다음번에는 정상적인 웹페이지 구축을 해보시는게 어떨까 싶습니다.

이렇게 페이지 레이아웃 전체를 짜는데 걸리는 시간은 5분도 안걸립니다.  제가 실력이 좋은게 아니라, (저도 한달전에 웹사이트 만드는 법 배웠어요.  제 본업도 아니고 저는 주말에 취미생활하는 사람입니다. 저 완전 초보에요.) 자동 생성기 사용을 배우시면, 아무리 복잡한 레이아웃이라도 15분이면 완성합니다.  우선 정보 수집부터 많이 하시고, (요즘은 웹사이트를 어떻게 만드는지 등등) 기본적인 공부 부터 먼저 하셔야 될 것 같습니다.

<style type="text/css">
.container {
    margin: 0 auto;
    overflow: hidden;
    width: 960px;
}

/* header */
#header {
    background: #EEE;
}
#header h1 {
    float: left;
}
#header h2, #header a, #header p {
    color: #999;
}
#header h1 a {
    background: url(../images/logo.png) no-repeat scroll 0 0;
    float: left;
    height: 30px;
    text-indent: -9999px;
    width: 500px;
}
#banner {
    border-bottom: 1px solid #DDD;
    padding: 0 0 15px 0;
    margin: 30px 0 30px 0;
    overflow: hidden;
    width: 960px;
}
#lang {
    float: right;
    padding: 9px 0 0 0;
}
#lang li {
    float: left;
    margin: 0 0 0 20px;
}
#lang li a {
    font-size: 10px;
}

/* intro */
#intro {
    overflow: hidden;
    padding: 0 0 30px 0;
}
#tagline {
    float: left;
    margin: 0 40px 0 0;
    width: 540px; /* 560 */
}
#tagline h2 {
    font-size: 24px;
}
#about {
    float: right;
    width: 380px;
}
</style>







<div id="header">
    <div class="container">
        <div id="banner">
            <h1><a href="http://eonsalt.com/assets/banner.php">Eon Salt</a></h1>
            <ul id="lang">
                <li><a href="index.php">English</a></li>
                <li><a href="kr/index.php">한국어</a></li>
                <li><a href="jp/index.php">にほんご</a></li>
                <li><a href="cn/index.php">中文語</a></li>
            </ul>
        </div>
        <div id="intro">
            <div id="tagline">
                <h2>LEFT HEADING </h2>
                <p>가나다라마바사아</p>
            </div>
            <div id="about">
                <h2>RIGHT HEADING</h2>
                <p>자차카타abc</p>
            </div>
        </div><!-- #intro -->
    </div><!-- .container -->
</div><!-- #header -->

저는 워드프레스를 CMS 로 쓰고, 그누보드 DTD 를 게시판으로 쓰고, 거기에다 제가 짜집기 해서 만든 쇼핑카트 (NoPcart +SimpleCart) 까지 쑤셔 넣었기 때문에 당연히 각종 css 충돌이 일어났습니다.  제가 초보라서 header 용 css, footer 용 css 이렇게 마구자비로 작성을 했거든요.  연락처 페이지 css 또 따로, 장바구니 페이지 css 또 따로..

그런데 그누보드DTD (그누보드4 는 아예 css 가 없지 않나요?) 의 css 는 너무나 간결하기때문에 충돌날 껀덕지도 없었습니다.  body 부분에서 한개 충돌생겼었나....  암튼 매우 간결하기때문에 충돌이 거의 안생기고 생겨도 간단하게 해결됩니다.

정상적인 코딩이라면, 그누보드 때문에 레이아웃이 깨지고 그렇지 않습니다.  그누보드DTD 가 웹표준이기때문에.

워드프레스에서는 이런 간결함은 꿈도 못꿉니다.  그누보드는 초보자들을 위해서 정말 잘 만들어진 최고의 게시판 입니다. 

님의 페이지가 그누보드 때문에 생기는 문제가 절대 아닙니다.

어디서 문제가 생기시는지는, firefox 의 firebug, 크롬의 dev. tool 로 css 를 살펴보시면 됩니다.  브라우저 내에서 수정도 가능하구요.

처음 사이트 제작시에...
기본적으로 ie 버전별/크롬/파폭/사파리/오페라 정도는 유념해 두셔야겠죠.

각각의 브라우저 특성을 인지하지 못하고 있다면 나중에 수정작업할때 지금과 같은 일이 일어날수 밖에없겠지요.
다음 부터는 기본 레이아웃짜고 각각의 브라우저별로 확인하고 하는 습관을 들이세요.
그래야 전부를 몰라도 방금작업한 어디 부분이 특정 브라우저에서 특성을 타는 구나 하는 걸 알수 있고 그 부분 검색해서 수정하고 해야겠죠.

그리고 css 관련지식이 없다고 말씀하신 것 같은데 급하다고 해서 대충마무리 하면 결국 자기 손해입니다. 웹페이지를 혼자 작성하는 경우라면 디자인/프로그래밍 어느 쪽도 소홀히 해선 안되고 관련지식도 풍부할때 작업하실것을 권합니다.
그게 다 본인의 경력이고 클라이언트가 갖게될 이미지입니다.
차후에 클라이언트가 다른 이들에게 추천할 만한 본인의 이미지를 만들어야 겠죠.
부족한 지식으로 출발하셨다면 이후에는 좀더 공부하시고 작업하시길...