'프로그래밍/CSS/웹표준'에 해당되는 글 8건
- 2010.10.27 ie7 이하부터 셋팅이 잘못될 경우 한글인식이 안된다? 2
- 2010.09.01 테이블 내 tr에 display:none, display:block 주기
- 2010.08.12 ie6 frame 잔상이 생기는 현상
- 2010.08.07 HTML 버전별 DTD
- 2010.07.08 float된 자식의 높이를 부모가 감싸안도록 만들기
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<!-- 브라우저 타이틀 (주소바에 표시됨) -->
<title>타이틀</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- 브라우저 타이틀 (주소바에 표시됨) -->
<title>타이틀</title>
'프로그래밍 > CSS/웹표준' 카테고리의 다른 글
| 테이블 내 tr에 display:none, display:block 주기 (0) | 2010.09.01 |
|---|---|
| ie6 frame 잔상이 생기는 현상 (0) | 2010.08.12 |
| HTML 버전별 DTD (0) | 2010.08.07 |
| float된 자식의 높이를 부모가 감싸안도록 만들기 (0) | 2010.07.08 |
| css로 완벽히 이미지 투명도 조절하기. (0) | 2010.03.06 |
그래서 우편번호 옆에 검색버튼을 두고 클릭시 하단에 검색하는 tr이 보여지게 해놨는데....
파이어버그 때문에 웹페이지를 만들때는 항상 파폭에서 작업을 하는데 이상하게 보이고안보이고 할때 넓이가 지멋대로 되는 현상이 발행하는 것이었다.
하지만 익스로 테스트를 해보니 잘되네???
그래서 구글신에게 요청을 하니 이런 답이 나왔다.
"표준 기반 브라우저에서 tr 요소의 기본 display 속성 값은 block이 아니라 table-row입니다."
표준에서는 display 속성값을 table-row로 하면 제대로 보여준다 이 말인데, 하지만 익스에서는 먹히지 않는다. ㅋㅋ???
결론은 표준과 비표준 동시에 만족해주기 위해서는
sytle.display = "" 처럼 그냥 빈 문자열("")을 써서 요소의 기본 display 속성 값으로 초기화시키거나, style="display:table-row; *display:block;" 으로 써 주면 된다.
<tr>
<th scope="row"><label for="zip">우편번호</label></th>
<td>
<input type="text" name="zip" id="zip" value="" class="inputTypeText" size="7" maxlength="7" />
<a href="#" id="viewSearchAddress" onclick="return false;" class="button"><span>검색하기</span></a>
</td>
</tr>
<tr id="searchAddress" style="display:none;">
<th scope="row"><label for="searchAddressText">주소</label></th>
<td><input type="text" name="searchAddressText" id="searchAddressText" class="inputTypeText" /></td>
</tr>
<script type="text/javascript">
$("#viewSearchAddress").click(function() {
status = $("#searchAddress").css("display");
if (status == "none") {
$("#searchAddress").css("display","");
}
else {
$("#searchAddress").css("display","none");
}
});
<script>
상단 스크립트 중 status가 "none"일 경우 display를 block로 줬었는데 "" 즉 공백으로 바꿔버렸다.
'프로그래밍 > CSS/웹표준' 카테고리의 다른 글
| ie7 이하부터 셋팅이 잘못될 경우 한글인식이 안된다? (2) | 2010.10.27 |
|---|---|
| ie6 frame 잔상이 생기는 현상 (0) | 2010.08.12 |
| HTML 버전별 DTD (0) | 2010.08.07 |
| float된 자식의 높이를 부모가 감싸안도록 만들기 (0) | 2010.07.08 |
| css로 완벽히 이미지 투명도 조절하기. (0) | 2010.03.06 |
홈페이지에 frame을 넣고 익스6에서 테스트를 해보니 잔상이 생기는 현상이 발생했다.
ie8이나 파폭에서는 잘되는걸 보니 6의 버그인거 같다.
그래서 검색을 해보니 배경을 확실하게 명시해주면 처리가 가능하단다.
1. 본인이 원한경우
- 홈페이지를 만들때 background music를 깐다던가.. 등등의 꼼수를 쓰려고..
2. 본인이 원하지 않은 경우
- 한글도메인을 사용하는 경우에 plug-in을 설치하지 않은 ie6에서는 임의로 frame를 삽입해 홈페이지를 출력한다.
이때, body에 background-image를 준경우에, 익스플로러에서 스크롤할때 잔상에 생기는 버그가 발생한다.
@ 해결방법(solution)
1. 배경이미지, 배경색등을 정확하게 명시하여준다.
ex>
body { background: #fff url('background.gif') top no-repeat; }
이경우..
body { background-color:#fff; background-image:url('background.gif'); background-position:top; background-repeat:no-repeat; }
2. 이렇게 해서도 안된다!! (solution 2)
* html { background-color: #fff; }
이런식으로 지정하면. 스크롤시 잔상이 사라지게 된다.
하여튼 ie6는 귀찮다.
http://atple.egloos.com/1680719
'프로그래밍 > CSS/웹표준' 카테고리의 다른 글
| ie7 이하부터 셋팅이 잘못될 경우 한글인식이 안된다? (2) | 2010.10.27 |
|---|---|
| 테이블 내 tr에 display:none, display:block 주기 (0) | 2010.09.01 |
| HTML 버전별 DTD (0) | 2010.08.07 |
| float된 자식의 높이를 부모가 감싸안도록 만들기 (0) | 2010.07.08 |
| css로 완벽히 이미지 투명도 조절하기. (0) | 2010.03.06 |
HTML 2.0 표준 문서 형식
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
HTML 3.2 표준 문서 형식
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
HTML 4.01 표준 문서 형식[Strict, Transitional, Frameset 순]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 표준 문서 형식[Strict, Transitional, Frameset 순]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1 표준 문서 형식[XHTML 1.1은 무조건 Strict]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML 모바일 1.0 문서 형식
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
http://www.virhac.com/board/bbs/?id=webstandard&no=47
'프로그래밍 > CSS/웹표준' 카테고리의 다른 글
| 테이블 내 tr에 display:none, display:block 주기 (0) | 2010.09.01 |
|---|---|
| ie6 frame 잔상이 생기는 현상 (0) | 2010.08.12 |
| float된 자식의 높이를 부모가 감싸안도록 만들기 (0) | 2010.07.08 |
| css로 완벽히 이미지 투명도 조절하기. (0) | 2010.03.06 |
| IE6에서 PNG파일을 사용하고 싶어요. (1) | 2010.02.26 |
CSS에서 디자인을 하다가 float된 요소를 자식으로 품고 있는 부모가 같이 float되지 않은 경우 자식이 부모 밖으로 튀어나가는 경우를 볼 수 있다. 아래처럼 말이다.
이런 경우 가장 깔금한 해결책(가상 선택자 :after와 zoom:1)을 담은 글을 발견해서 아래 접었다 폈다를 펼치면 볼 수 있다.
원문은 http://naradesign.net/open_content/lecture/wp/ 에서 볼 수 있다. 원문에는 모든 해결책의 유형을 제시하고 있다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Float</title>
<style type="text/css">
.wrap { background:#CCCCCC; width:600px;}
.wrap:after { content:""; clear:both; display:block; *zoom:1;}
.left { float:left; width:200px; height:200px; background:#FF3333; }
.right { float:right; width:400px; height:100px; background:#0066FF }
</style>
</head>
<body>
<div class="wrap">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div style="background:#00CC00; width:600px; height:30px;">kimkee@naver.com</div>
</body>
</html>
http://imgwizard.com/45576
'프로그래밍 > CSS/웹표준' 카테고리의 다른 글
| ie6 frame 잔상이 생기는 현상 (0) | 2010.08.12 |
|---|---|
| HTML 버전별 DTD (0) | 2010.08.07 |
| css로 완벽히 이미지 투명도 조절하기. (0) | 2010.03.06 |
| IE6에서 PNG파일을 사용하고 싶어요. (1) | 2010.02.26 |
| vertical-align (0) | 2009.09.22 |
