height 질문..

[shu]

table을 사용할 경우 height=100%를 주면 브라우저 크기만큼 세로길이가 늘어났는데, div를 사용시 height=100%가 안되는 것 같습니다.

px단위로 지정해 놓지 않으면 %단위로 늘어나지 않는 것 같은데, 어떠한 방법을 사용해야 하는지 궁금합니다.

Code: Select all

<div id="errors" class="errors">
<ul>
<li><p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php" class="font-body"><?php echo $user_identity; ?></a> - <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">logout</a></p></li>
</ul>
</div>

Code: Select all

.errors {
	}
.errors p { 
	margin: 0;
	padding-left: 16px;
	font-size: 0.9em;
	line-height: 2.0em;
	font-weight: normal;
	color: #FFF;
	}
.errors ul {
	margin: 0;
	padding: 0;
	}
.errors li {	
	margin: 0;
	padding: 0;
	background: url(../images/common/bullet-error.gif) left top no-repeat;
	}

이런식으로 하면

(이미지) Logged in as ...... 라고 나올 줄 알았는데,
나오긴 하나 모질라에선 맞아도, 익스에선 이미지와 글자 높낮이가 맞지 않습니다.

좀 더 효율적으로 출력할 수 있는 방법은 없을까요?

마지막으로,


voice-family: "\" }\"";
voice-family: inherit;

<div style="clear: both"></div>

!important;

padding: 2px !important; /* FOR COMPETENT BROWSERS */
padding: 0 2px 3px; /* IE PC */


위와 같은 걸 어떤때에 사용하는 건지,

css내에서 padding이나 margin 같은 부분을
익스와 모질라 전용으로 각각 다르게 지정해 놓을 수 없는지 궁금합니다.

[박민권]

100% 높이에 관한 문제는
viewtopic.php?t=3977
viewtopic.php?t=4038
이 두개의 링크를 참고하시면 되지 않을까 싶습니다.

voice-family: "\" }\"";
voice-family: inherit;

<div style="clear: both"></div>

!important;

padding: 2px !important; /* FOR COMPETENT BROWSERS */
padding: 0 2px 3px; /* IE PC */

voice-family 는 http://trio.co.kr/webrefer/css2/aural.html 를 참고하세요.

clear: both; 는 float 속성과 관련되어 있습니다. float 속성을 먼저 공부하세요.

Code: Select all

#Test{
   color: red !important;
   color: blue;
}
#Test{color: green;}

이럴경우 color는 red가 적용됩니다.

익스도 padding과 margin이 표준에 맞게 적용됩니다.(몇가지 버그는 있음)
단 doctype을 제대로 선언해줘야 합니다.
doctype을 선언하지 않으면 익스는 표준모드가 아닌 익스전용 나홀로모드로 동작합니다. ㅡㅡ;

익스도 버그는 많지만 표준을 지키므로 표준을 잘 준수하면 익스, 불여우, 오페라등
여러 브라우저에서 거의 똑같은 모습을 볼 수 있습니다.

[iLmoL]

민권님 설명에 보충하겠습니다

!important 는 중요하다는 뜻을 가진 단어로 쓰는 만큼 혹시 겹치게 되더래도 !important 가 붙은 값을 사용하도록 해주는 것입니다.

IE 에서는 버그가 있습니다.

Code: Select all

#Test{
   color: red !important;
   color: blue;
}
#Test{color: green;} 

민권님께서 드신 예제에서 IE 에서 인식할경우 green 색이 입혀지게 됩니다.
이유는 첫번째 #Test 안에 color 값이 2번 불려지면서 !important 를 불러주었기 때문에 !important 는 에러가 나면서 인식 불능이 됩니다. 그러므로 red 는 인식을 못하고 blue값만 #Test 에 들어가죠. 컴퓨터가 이제 그다음 줄을 읽을때에 #Test 에 green 색을 입히라고 하니 green 색이 blue 를 덮게 됩니다.


만약

Code: Select all

#Test{
   color: red !important;
}
#Test{color: green;} 

이렇게 각각 다른 중괄호 안에서 불려졌다면(1번만) IE는 !important 를 인식해서 이번에는 red 를 출력하게 되겠네요.

http://ilmol.com/wp/2005/07/08/84/

[박민권]

민권님께서 드신 예제에서 IE 에서 인식할경우 green 색이 입혀지게 됩니다.

IE 나빠요. ㅠ_ㅠ