테스트 사이트 - 개발 중인 베타 버전입니다

css 관련 질문입니다

· 11년 전 · 1626 · 9
web1.gif
web2.gif
DTD 를 선언 안한 상태에서

크롬에서는 윗쪽 이미지처럼 정상적으로 출력이 되는데

익스에서는 아래쪽 이미지처럼 비정상적으로 출력되네요 ㅠㅠ

혹시 익스에서 정상적으로 출력될 방법이 없을까요?

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 9개

http://dochis.woobi.co.kr/frm/web2.html

요렇게 하면안되나요??


이미지를 그냥 200*200사이즈로 줄여서 사용하시는게 편할것같은데여;;
이미지가 고정이 아니라 내부의 넓이값에 따라 유동적으로 변해야 하거든요 흙흙~ ㅠ.ㅠ
상하좌우 다 변해야하는건가요?? ㅠ
좌우만 변하면 되면 http://dochis.woobi.co.kr/frm/web2.html 이렇게 해도 될텐데 말이죠;; ㅠㅠ
아쉽지만 css 로만 해야해서요 ㅠ.ㅠ
관심가져주셔서 감사합니다 도치즈님 ^^
스타일이 많이 중첩이 되지만 이런식이면 어떨런지요..
<style type="text/css">

.frm {float:left;}
.frm_content {position:relative;padding-right:10px;padding-bottom:10px;background:url(./frm.gif) no-repeat 100% 100%;}
.lb {position:absolute;bottom:0;left:0;width:50%;height:50%;background:url(./frm.gif) no-repeat 0 100%;display:block}
.rt {position:absolute;top:0;right:0;width:50%;height:50%;background:url(./frm.gif) no-repeat 100% 0;display:block}
.content {margin:0;padding:10px 0 0 10px;background:url(./frm.gif) no-repeat 0 0;overflow:hidden}
</style>

<div class="frm">
<div class="frm_content">
<span class="lb"></span><span class="rt"></span>
<div class="content">
<div style="width:300px;height:300px;background-color:#f66;position:relative;z-index:1"></div>
</div>
</div>
</div>


아니면 간단하게 이런식..ㅎㅎ

<div style="float:left;border:1px solid #ff9bca;padding:5px;background:#ffeff7">
<div style="border:1px solid #ffcbe3;padding:3px;background:#fff">
<div style="width:300px;height:300px;background-color:#f66;"></div>
</div>
</div>
꼭 배경이미지를 사용하는 경우라면 아니겠지만..ㅎ
우왕~ 이렇게 하니까 되네요
새벽비님 정말 감사합니다 ^^
다행이네요^^

더 줄여봤습니다

<style type="text/css">
.frm {float:left;position:relative;padding :0 10px 10px 0;background:url(./frm.gif) no-repeat 100% 100%;}
.lb {position:absolute;bottom:0;left:0;width:50%;height:50%;background:url(./frm.gif) no-repeat 0 100%;display:block}
.rt {position:absolute;top:0;right:0;width:50%;height:50%;background:url(./frm.gif) no-repeat 100% 0;display:block}
.content {margin:0;padding:10px 0 0 10px;background:url(./frm.gif) no-repeat 0 0;}
</style>

<div class="frm">
<span class="lb"></span><span class="rt"></span>
<div class="content">
<div style="width:300px;height:300px;background-color:#f66;position:relative;z-index:1"></div>
</div>
</div>
와.. 진짜 대단하시네요..
이것땜시 엄청 고생할뻔했는데 덕분에 두발뻗고 잘 수 있겠네요
완젼 감사합니다 ^0^

게시글 목록

번호 제목
284508
284499
284492
284490
284484
284481
284478
284476
284474
284472
284470
284458
284457
284454
284453
284447
284446
284444
284441
284440