레이어 관련

국내에 웹 사이트들이 웹 표준을 지키고 OS나 브라우저와 관계 없이 접근성을 향상 시키기 위한 사이트 버그 신고 및 문제 해결을 위한 게시판입니다.
Post Reply
User avatar
회니
서포터즈
서포터즈
Posts: 54
Joined: 2004 09 11 02:33 06
Location: 대한민국 서울
Contact:

레이어 관련

Post by 회니 »

아래 사이트를 클릭해 보면 아바타가 원래 왼쪽 상단으로 옴겨져 있습니다.
http://cof.kut.ac.kr/bbs/zboard.php?id=NEWS2&no=894

소스를 보면 아바타 부분이 아래처럼 되어 있거든요.
그런데 아바타가 테이블에서 벗어난 위치에 있습니다.
테이블 안에 아바타를 넣고 싶다면 어떻게 소스를 수정해야 할까요?

<table>
<tr><td valign=top align=center width=135>
<DIV style=' width:120; height:160; overflow:hidden;border:1'>
<DIV ID=Layer1 STYLE='position:absolute; left:0; top:0; z-index:1'><img id=ImgChar1 src=./charimg/h_m_01.gif border=0></DIV>
<DIV ID=Layer2 STYLE='position:absolute; left:0; top:0; z-index:3'><img id=ImgChar2 src=./charimg/c_m_01.gif border=0></DIV>
<DIV ID=Layer3 STYLE='position:absolute; left:0; top:0; z-index:2'><img id=ImgChar3 src=./charimg/l_m_01.gif border=0></DIV>
<DIV ID=Layer4 STYLE='position:absolute; left:0; top:0; z-index:5'><img id=ImgChar4 src=./charimg/img_blank.gif border=0></DIV>
<DIV ID=Layer5 STYLE='position:absolute; left:0; top:0; z-index:4'><img id=ImgChar5 src=./charimg/img_blank.gif border=0></DIV>
<DIV ID=Layer6 STYLE='position:absolute; left:0; top:0; z-index:6'><img id=ImgChar6 src=./charimg/img_blank.gif border=0></DIV>
<DIV ID=Layer7 STYLE='position:absolute; left:0; top:0; z-index:7'><img id=ImgChar7 src=./charimg/img_blank.gif border=0></DIV>
<DIV ID=Layer8 STYLE='position:absolute; left:0; top:0; z-index:8'><img id=ImgChar8 src=./charimg/img_blank.gif border=0></DIV>
<DIV ID=Layer9 STYLE='position:absolute; left:0; top:0; z-index:0'><img id=ImgChar9 src=./charimg/img_blank.gif border=0></DIV>
<DIV ID=Layer10 STYLE='position:absolute; left:0; top:0; z-index:0'><img id=ImgChar10 src=./charimg/img_blank.gif border=0 width=120 height=160></DIV>
</DIV><br>
</td></tr>
</table>
nytereider

....

Post by nytereider »

position:absolute => position:relative
User avatar
회니
서포터즈
서포터즈
Posts: 54
Joined: 2004 09 11 02:33 06
Location: 대한민국 서울
Contact:

Post by 회니 »

의외로 간단한 해결 방법이 있었습니다.

원래 소스

Code: Select all

<DIV style=' width:120; height:160; overflow:hidden;border:1'>
수정안 소스

Code: Select all

<DIV style='position:relative;width:120; height:160; overflow:hidden;border:1'>
다른부분은 수정할 필요 없이, 위 부분만 수정하면 되더군요.
아무튼 nytereider님 감사드립니다.
웹마스터한테 빨리 수정하라고 해야 겠군요.

불여우에서는 position을 생략하면 absolute로 인식하는데 반하여,
IE에서는 position을 생략하면 relative로 인식되는군요.
맥맨이야

Post by 맥맨이야 »

여기에 대해 두 가지 질문이 있습니다.

맥의 Safari도 같은 문제가 발생합니다. Position이 명시되어 있지 않을 경우, 표준안에 규정된 디폴트 값이 있나요? (있다면 어느 쪽이 표준을 지키고 있는 건가요?)

간혹 포털이나 신문사에 들어가면 플래시 광고가 엉뚱한 자리를 차지할
hyeonseok
해커
해커
Posts: 691
Joined: 2004 08 11 22:14 59
Contact:

position property

Post by hyeonseok »

element 의 position 값은 특별히 명시 되어 있지 않은 한..

static

입니다.

위치가 전혀 엉뚱하다면 position 문제일 가능성이 있지만...

safari 문제는...default 값에 의해서 포지셔닝이 바뀌는 것이 아닌 것 같습니다.

relative block 안에 absolute block 이 있아면 absolute block 의 origin 은 relative block의 좌상단이 됩니다. 위의 코드와 같은경우 absolute block 의 상위에 relative block 이 없기 때문에 origin 이 화면의 좌상단이 된 것입니다.

IE 에서 왜 제대로 보이는지는 잘 모르겠고, 별로 알 필요도 없는 것 같습니다. :)
IE 에서 position 을 표준과 같이 사용하시려면 block 에 height 나 width 의 값이 지정이 되어 있어야 합니다. 잘 알려진 IE 의 block model 버그중의 하나 입니다.
빛알갱이
해커
해커
Posts: 1146
Joined: 2004 01 15 20:06 36

Post by 빛알갱이 »

맥맨이야 wrote:여기에 대해 두 가지 질문이 있습니다.

맥의 Safari도 같은 문제가 발생합니다. Position이 명시되어 있지 않을 경우, 표준안에 규정된 디폴트 값이 있나요? (있다면 어느 쪽이 표준을 지키고 있는 건가요?)

간혹 포털이나 신문사에 들어가면 플래시 광고가 엉뚱한 자리를 차지할 ㅤㄸㅒㅤ가 있는데, 위의 경우와 같은 이유일까요?
position: absolute의 해석을 MS IE가 표준에 어긋나게 하고 있는 것이 문제입니다. safari와 mozilla가 표준을 제대로 지키고 있습니다.
Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest