IE7에서(6은 확인 못해봤습니다.) fieldset에 legend가 있을때 fieldset에 bgcolor 줄경우
fieldset border 안으로만 bg가 칠해지는게 아니라 legend의 영역까지 fieldset의 bgcolor가 칠해져 버린다.
legend의 bgcolor는 textNode가 있는 부분만 칠해지기때문에 해결책이 되지 못하고
legend width:100% 해도 왼쪽영역은 여전히 fieldset bgcolor가 먹혀져 있게 된다.
여기에 margin-left:-10px;padding-right:10px 같은 방식으로 장난을 쳐보면 해결이 된 것 같아 보이지만 fieldset의 border가 사라져 버리게 된다.
(그림판 역시 최고 ㅠ,.ㅠ)
이럴경우 fieldset position을 relative로 주고 legend의 position을 absolute로 줘서 positioning을 해 주면 해결이 된다. (CSS Position 을 참고)
(참고 http://www.communitymx.com/content/article.cfm?page=1&cid=DD9F3)
fieldset border 안으로만 bg가 칠해지는게 아니라 legend의 영역까지 fieldset의 bgcolor가 칠해져 버린다.
legend의 bgcolor는 textNode가 있는 부분만 칠해지기때문에 해결책이 되지 못하고
legend width:100% 해도 왼쪽영역은 여전히 fieldset bgcolor가 먹혀져 있게 된다.
여기에 margin-left:-10px;padding-right:10px 같은 방식으로 장난을 쳐보면 해결이 된 것 같아 보이지만 fieldset의 border가 사라져 버리게 된다.
이럴경우 fieldset position을 relative로 주고 legend의 position을 absolute로 줘서 positioning을 해 주면 해결이 된다. (CSS Position 을 참고)
fieldset {
background-color:yellow;
border:1px dashed black;
margin-top:15px;
/* ie */
*position: relative;
*padding-top:15px;
}
legend {
background-color:red;
/* ie */
*position: absolute;
*top: -8px;
*left: 10px;
}
background-color:yellow;
border:1px dashed black;
margin-top:15px;
/* ie */
*position: relative;
*padding-top:15px;
}
legend {
background-color:red;
/* ie */
*position: absolute;
*top: -8px;
*left: 10px;
}
(참고 http://www.communitymx.com/content/article.cfm?page=1&cid=DD9F3)
'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글
| IE7 Debugger (0) | 2008/01/15 |
|---|---|
| CSS visibility vs display (0) | 2008/01/03 |
| IE에서 fieldset bgcolor줄 경우 bgcolor가 legend까지 넘어가는 문제 (0) | 2007/12/28 |
| CSS Position relative 와 absolute 함께 상대적 절대 포지셔닝하기 (6) | 2007/12/28 |
| IE 7 에서 dt, dd 좌측여백이 생기는 문제 (2) | 2007/12/27 |
| JSSpec용 EditPlus ACP,STX 파일 (0) | 2007/12/05 |
댓글을 달아 주세요