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

[CutyCat]

소스는 이렇습니다.

<table cellSpacing="0" cellPadding="0" border="0">
<tr>
<td id="tdFnLeft" width="10">&nbsp;</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">&nbsp;</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 에서는 배경 이미지가 하나도 보이지가 않습니다. 어떻게 적용해야 할까요?

[oragi]

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

[cutycat]

Code: Select all

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

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

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

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

[oragi]

그러니까...
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를 늘려 주면 해결됩니다.