오류: 스타일시트 http://localhost:8088/css/counsel.css의 MIME 형식은 "text/plain"입니다. "text/css"가 아니므로 불러 들이지 않았습니다.
소스 파일: http://localhost:8088/HTML/templates.jsp
행: 0


뭐 이런 비슷한 에러가 나오면



JEUS로 동작하는 WAS의 경우 css파일이 로딩되지 않을 때가 있다.

IE(Internet Explorer)에서는 정상적으로 로딩되지만 기타 브라우저(FireFox, 구글 크롬, Opera, Safari 등)에서는 로딩되지 않는데, JEUS는 기본적으로 css파일에 대한 MIME 타입이 지정되지 않아 css를 text/plan (메모장 MIME 타입)으로 간주해서 클라이언트에 전송한다.

IE는 관대하게 css의 MIME 타입을 알아보지 않고 로딩하기 때문에 큰 문제없이 보여지지만, FireFox, 크롬 등 IE가 아닌 브라우저는 MIME 타입을 꼼꼼히 따져 text/css가 아니면 로딩하지 않는다.

이 문제는 해당 컨테이너 설정을 변경하면 된다.
컨테이너의 webcommon.xml 파일을 열면 확장자별 MIME 타입을 지정할 수 있다.
css확장자가 있는지 확인하고 없으면 파일 끝에 </web-app> 위에 아래 소스를 삽입하고 저장한 뒤 컨테이너를 재시작 하면 된다.

  <mime-mapping>
    <extension>css</extension>
    <mime-type>text/css</mime-type>
  </mime-mapping>


mime type 추가해주면 된다.!!
Posted by [czar]
,

이미지 마우스 오버시 이미지 안쪽에 테두리 주기


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>이미지 마우스 오버시 이미지 안쪽에 테두리 주기</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css" media="screen">

a.innerborder, a.innerborder img {
 float: left;
 overflow:hidden;
}
a.innerborder:hover {
 border:4px solid #f00;
}
a.innerborder:hover img {
 margin: -4px;
}

</style>
<meta http-equiv="imagetoolbar" content="no">
</head>

<body>

<h1>이미지 마우스 오버시 이미지 안쪽에 테두리 주기</h1>

<a href="#" class="innerborder">
  <img src="https://t1.daumcdn.net/cfile/tistory/1113A6094A0D79C00D" alt=""  border="0" />
</a>
<a href="#" class="innerborder">
  <img src="https://t1.daumcdn.net/cfile/tistory/1113A6094A0D79C00D" alt="" border="0" />
</a>
<a href="#" class="innerborder">
  <img src="https://t1.daumcdn.net/cfile/tistory/1113A6094A0D79C00D" alt="" border="0" />
</a>
<a href="#" class="innerborder">
  <img src="https://t1.daumcdn.net/cfile/tistory/1113A6094A0D79C00D" alt="" border="0" />
</a>
<a href="#" class="innerborder">
  <img src="https://t1.daumcdn.net/cfile/tistory/1113A6094A0D79C00D" alt="" border="0" />
</a>
<a href="#" class="innerborder">
  <img src="https://t1.daumcdn.net/cfile/tistory/1113A6094A0D79C00D" alt="" border="0" />
</a>

</body>
</html>

Posted by [czar]
,
출처 ":http://glotalk.egloos.com/1111105

웹 문서를 만들 때마다 IE와 FF의 차이로 인해서 곤혹스럽다. 그럴 때마다 한 번쯤 검토, 정리 해야겠다는 생각을 해보지만 역시나 귀차니즘 때문에 미뤄왔다. 하지만 계속되는 시간낭비로 더 이상 미룰 수만은 없다는 생각에 인터넷에서 수집한 자료들과 실험을 통해 그 동안의 숙제였던 IE와 FF의 랜더링의 차이에 대해 정리해 보려한다.

이 문서는 지속적으로 수정, 보완할 예정이다.
한번에 다 쓰려니 검토할 사항이 많아서 틈나는 대로 조금씩 작성하려고 한다.


실험방법
3개의 블럭을 다음과 같이 배치하고 각 블럭의 CSS Style을 정의한 후 값을 바꿔가면서 IE와 FF에서 확인하는 방식으로 진행하였다.

버전정보
MSIE: 6.0.2900    FF: 2.0.0.11

실험에 사용된 소스
HTML:

<div id="container">
    <div class="box1">
        <span style="background-color: blue">text1 <br />
            text2 </span>
    </div>
    <div class="box2">
        <span style="background-color: blue">text1&nbsp;<br />
            text2&nbsp;</span>
    </div>
</div>

CSS:

body {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
#container {
    font-family: 굴림;
    font-size: 9pt;
    color: #a8a8a8;
    text-align: left;

    background-color: #f5f5f5;
    float: none;

    border-top: #aaaaaa 8px solid;
    border-right: #aaaaaa 8px solid;
    border-bottom: #aaaaaa 8px solid;
    border-left: #aaaaaa 8px solid;

    width: 240px;
    height: 240px;

    margin: 0px 0px 0px 0px;
    padding: 4px 4px 4px 4px;
}
#container div.box1 {
    border-top: #cccccc 8px solid;
    border-right: #cccccc 8px solid;
    border-bottom: #cccccc 8px solid;
    border-left: #cccccc 8px solid;

    margin: 8px 8px 8px 8px;
    padding: 0px 0px 0px 0px;
}
#container div.box2 {
    border-top: #cccccc 8px solid;
    border-right: #cccccc 8px solid;
    border-bottom: #cccccc 8px solid;
    border-left: #cccccc 8px solid;

    margin: 16px 16px 16px 16px;
    padding: 8px 8px 8px 8px;
}


첫번째

문서상단에 다음 <!DOCTYPE>의 유무에 따라 결과가 달라졌다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

위의 <!DOCTYPE>을 기입하지 않으면

위의 <!DOCTYPE>을 기입하면


[결과]

<!DOCTYPE>을 기입하지 않으면
IEwidthheightborder-widthpadding을 포함하고(margin은 포함하지 않음)
FFwidthheightborder-widthpadding을 포함하지 않는다.

<!DOCTYPE>을 기입하면
IE는  기입하지 않았을 때에 비해 FF의 랜더링에 상당히 근접한 결과를 보여 주었다.
FF는 기입하지 않았을 때와 동일한 결과를 보여 주었다.
width, border-width 그리고 padding의 관계가 IEFF에 대해 동일한 결과를 보여 주었다.


두번째

실험에 사용된 소스에 스타일을 추가 또는 변경하면서 변화를 관찰했다.

기본 스타일 (수정하기 전)



동일한 문서를 IE와 FF에서 각각 보았을 때 폭과 높이를 지정한 conatiner의 경우는 같은 크기를 보여주지만
그 안에 포함된 box1과 box2는 내부의 텍스트의 높이를 다르게 해석해서인지 서로 다른 높이를 보여준다.

수평방향으로는,
IE, FF 둘 다 container padding 4px과 box1 margin 8px의 합인 12px의 간격을 보여준다.
수직방향으로는,
IE의 경우, container padding 4px과 box1 margin 8px중 큰 값인 8px의 간격을 보여주지만
FF의 경우, container padding 4px과 box1 margin 8px의 합인 12px의 간격을 보여준다.

box1과 box2의 간격을 보면,
IE, FF 둘 다 box1 margin 8px과 box2 margin 16px중 큰 값인 16px의 간격을 보여준다.

body {
    margin: 8px 8px 8px 8px;
}



IE, FF 둘 다 수평, 수직으로 8px의 간격을 보여준다.

#container {
    margin: 4px 4px 4px 4px;
}



수평방향으로는
IE, FF 둘 다 body margin 8px과 container margin 4px의 합인 12px의 간격을 보여준다.
수직방향으로는
IE의 경우, body margin 8px과 container margin 4px의 합인 12px의 간격을 보여주지만
FF의 경우, body margin 8px과 container margin 4px중 큰 값인 8px의 간격을 보여준다.

#container {
    margin: 16px 16px 16px 16px;
}



마진의 통합에 대한 실험을 위해 container margin을 body margin 8px보다 큰 값인 16px로 늘려 보면

수평방향으로는
IE, FF 둘 다 body margin 8px과 container margin 16px의 합인 24px의 간격을 보여준다.
수직방향으로는
IE의 경우, body margin 8px과 container margin 16px의 합인 24px의 간격을 보여주지만
FF의 경우, body margin 8px과 container margin 16px중 큰 값인 16px의 간격을 보여준다.

#container {
    float: left;
}



container의 float: none을 float: left로 수정하면,

IE의 경우, 수평방향으로 body margin 8px과 container magin 16px의 두배인 32px의 합인 40px의 간격을 보여준다.
수직방향으로는 변화 없다.
FF의 경우, 수직 방향으로 body margin 8px과 container margin 16px의 합인 24px의 간격을 보여준다.
수평방향으로는 변화 없다.

#container div.box1 {
    float: left;
}



box1에 float: left를 추가하면,

#container div.box2 {
    float: left;
}



box2에 float: left를 추가하면,




[결과]
수평방향에서는 차이가 없다. (CSS2에서 수평 마진들은 절대로 통합되지 않는다.)
수직방향에서는 차이가 있다. (수직 마진들은 박스들 사이에서 통합될 수 있다)
  1. box margin들이 인접한 부분
    FF: 통합된다.  IE: 통합된다.
    box marginbody margin이 인접한 부분
    FF: 통합된다.  IE: 통합되지 않는다.

  2. box marginbox padding이 인접한 부분
    FF: 통합되지 않는다.  IE: 통합된다.
    box marginbody padding이 인접한 부분
    FF: 통합되지 않는다.  IE: 통합된다.

  3. floatbox margin과 인접한 부분
    FF: 통합되지 않는다.  IE: 통합되지 않는다. 수평방향으로 마진이 두배가 되는 버그 있다.

(주의) "통합된다"는 뜻은 두 개의 박스가 인접해 있을 때 각 박스의 마진 중 큰 값을 두 박스의 간격으로 한다는 뜻이다. 모 사이트의 글을 보니 이것을 "포개진다"는 말로 표현하고 있었다. 더 쉽게 의미가 와 닿는 것 같다.



세번째

[기타 ]
padding-top을 0으로 했을 때 텍스트의 세로방향의 시작 위치가 다르다. (1px 정도)

텍스트의 background-color을 지정해서 보면 동일한 폰트임에도 IEFF간에 배경으로 칠해지는 영역의 높이가 다르다. (1px정도)

line-height
를 기입하지 않으면 줄간격이 IEFF간에 서로 틀리다. (line-height를 지정하면 같아진다)

<span style="background-color: blue">text1 <br />text2 </span>
IE에서는 "text1" "text2"에 대해 배경이 파란색으로 칠해지지만 FF의 경우는 "text1 " "text2"에 대해 배경이 파란색으로 칠해진다. IEFF에 대해 동일하게 배경이 파란색으로 칠해지도록 하려면 다음과 같이 해주면 된다.
<span style="background-color: blue">text1&nbsp;<br />text2&nbsp;</span>


* height와 min-height

* overflow: hidden


Referances

Sites
  1. Trio
    보이는 양식화 모델의 소개
    마진들의 통합
    마진, 패딩, 테두리의 예제
  2. Mozilla 개발 센터 자료
  3. cadvance: Simplicity is the BEST for me...
  4. 나라디자인
    Quirks Mode 렌더링과 DTD.
  5. Henri Sivonen’s pages
    Activating the Right Layout Mode Using the Doctype Declaration
  6. Cross-Browsing : 브라우저간 호환성 확보
Q&A
  1. mozilla.or.kr
    DIV태그에 대한 IE와 FF의 해석차이...
    IE에서는 잘 나오는데 FF와 OPERA에서.
  2. phpschool.com
    CSS질문입니다 (IE랑 FF에서 다르게보이는 문제...)
    브라우저별 CSS 적용 문제
    [SW기술] 스타일제외)IE,FF 를 둘 다 지원하는것이 어렵습니까?
    FF IE 에서의 float
    FF에서는 안보이는 여백이 IE에서는 보일때
    DIV 테이블에서 IE와 FF의 결과물이 같아 보이려면?
    DIV, CSS, IE와 FF에서 다르게 보이는 문제점..
Posted by [czar]
,