Mozilla 한국 커뮤니티

소스는 이렇습니다.

<table cellSpacing="0" cellPadding="0" border="0">
<tr>
<td id="tdFnLeft" width="10"> </td>
<td class="tdFunction">
<div id="hdivFunction"><A id="hacWrite" href="javascript:fun_Write()" runat="server">작성</A>
<A id="hacModify" href="javascript:fun_Modify()">수정</A> <A id="hacList" href="javascript:fun_List()">
목록</A> <A id="hacDelete" href="javascript:fun_Delete()">삭제</A>
</div>
</td>
<td id="tdFnRight" width="10"> </td>
</tr>
</table>

그리고 CSS 는

#hdivFunction
{
background: url(../Images/pink/bg_function.gif);
}
#tdFnRight
{
background: url(../Images/pink/img_function_right.gif);
}
#tdFnLeft
{
background: url(../Images/pink/img_function_Left.gif);
}

.tdFunction
{
background: url(../Images/pink/bg_function.gif);
}

이것과, 각 A 태그마다 이미지 링크가 걸려있습니다.

IE 의 경우에는 A 태그 배경으로 CSS 에서 적용한 이미지가 보이는데 반해서 FF 에서는 배경 이미지가 하나도 보이지가 않습니다. 어떻게 적용해야 할까요?

해당 a태그에 블럭 속성을 부여해야합니다.
a { display : block;
width : 수치;
height : 수치;
}
이러면 width 와 height 수치만큼 블럭이 생기며 백그라운드가 보입니다.

Code: Select all

#hacWrite
{
	width : 58px ;
	background : url("../images/content/btnf_write_test.gif");
}

이런 식으로 A 태그에 백그라운드로 이미지를 깔았습니다
( 자바스크립트 없이 이미지 롤오버 [ 웹표준 책에 나온 ] 를 연습하던 중이죠 )

IE 의 경우는 겹쳐진 백그라운드 이미지가 다 보이는 반면에
FF 는 가장 위에 올려놓은 백그라운드 이미지만 보이는데, 이게 정상인건가요?

둘다 보이게 하는 방법은 없을까요?

그러니까...
a링크의 백그라운드와 id=hdivFunction인 div 태그의 백그라운드를
동시에 보여주고 싶다 이건가요?

기본적으로 div는 내용물을 감싸는 태그죠.
div의 width는 기본적으로 100%이고 div의 height는 내용물에 따라 결정됩니다.

보여주신 코드에선 id=hdivFunction인 div가 3개의 a태그를 감싸고 있는데요.
각각의 a태그가 백그라운드를 가지고 있다면 a태그의 백그라운드와 id=hdivFunction인 div의 백그라운드가 옆으로 보이게 됩니다. 그런데 div를 또 한번 td로 감싸고 있으므로 td의 너비만큼 div가 보이게 되겠지요.

아시다시피 td의 width는 내용물크기에 따라 결정되므로
지금 이상황에선 감싼 td의 width를 늘려 주면 해결됩니다.

Mozilla 한국 커뮤니티

IE와 FF 에서 똑같이 보이게 만들고 싶어요

IE와 FF 에서 똑같이 보이게 만들고 싶어요

텍스트링크에 백그라운드는

음 제 설명이 부족했던 것일까요 .. ㅠ.ㅠ

제가 잘못 이해한듯...