본문 바로가기

codeStory

float left, right시 브라우져에 따라 겹침 문제 발생

<div float="left">
</div>

<div class="submenu">
</div>

css 내용 
.submenu
{
visibility: hidden;
width: 129px;
position:absolute;
float;right;
}

ie 에서는 두 div가 겹치지 않고 테이블 안의 왼쪽과 오른쪽에 
알맞게 위치 하는데...

크롬 및 파이어폭스 등의 브라우져 에서는 두 div가 포개지더군요 -_-;

두 div 의 속성을 이리 저리 다 바꿔봐도 ie와 크롬..등의 브라우져에서 
똑같이 보여지도록 하는게 안되더군요...

그래서 속성을 건드리는 건 포기하고 
아래와 같이 했습니다.

css내용
.submenu
{
visibility: hidden;
width: 129px;
position:absolute;
margin-left:130;
}

*html .submenu {
margin-left: -10;

오른쪽에 위치할 div에 margin-left: 130 픽셀을 주어 강제로 떼어 놓았습니다. 
이 코드만 추가되면 크롬, 파폭에서는 130픽셀만큼 우측으로 이동되어 겹쳐지지 않고 제대로 보입니다만...
ie에서는 왼쪽과 오른쪽 div 간격이 130픽셀만큼 더 멀어지더군요. 
그래서 
*html .submenu {
margin-left: -10;
ie 에서만 margin-left -10픽셀을 하였습니다. 

ㅋㅋ 드디어  ie, 파폭, 크롬에서 동일한 모습으로 보입니다. ㅋ

웹표준의 길은 정말 엄합니다 ㅠㅠ

'codeStory' 카테고리의 다른 글

ASP 최적화에 대한 정리  (0) 2010.01.30