IE에서 CSS3 메뉴 적용이 되지 않습니다.

돌맹나래

· 13년 전 · 조회 6426 6426 · 댓글 7 7

Style.css

body, td, p, input, button, textarea, select, .c1 { font-family:Tahoma,굴림; font-size:9pt; color:#222222; }

form { margin:0px; }

/* img {border:0px;} */

a:link, a:visited, a:active { text-decoration:none; color:#466C8A; }
a:hover { text-decoration:underline; }

a.menu:link, a.menu:visited, a.menu:active { text-decoration:none; color:#454545; }
a.menu:hover { text-decoration:none; }

.member {font-weight:bold;color:#888888;}
.guest {font-weight:normal;color:#888888;}

.lh { line-height: 150%; }
.jt { text-align:justify; }

.li { font-weight:bold; font-size:18px; vertical-align:-4px; color:#66AEAD; }

.ul { list-style-type:square; color:#66AEAD; }

.ct { font-family: Verdana, 굴림; color:#222222; }

.ed { border:1px solid #CCCCCC; }
.tx { border:1px solid #CCCCCC; }

.small { font-size:8pt; font-family:돋움; }
.cloudy, a.cloudy {color:#888888;} /* 흐림 */

input.ed { height:20px; border:1px solid #9A9A9A; border-right:1px solid #D8D8D8; border-bottom:1px solid #D8D8D8; padding:3px 2px 0 2px; }
input.ed_password { height:20px; border:1px solid #9A9A9A; border-right:1px solid #D8D8D8; border-bottom:1px solid #D8D8D8; padding:3px 2px 0 2px; font:10px Tahoma; }
textarea.tx { border:1px solid #9A9A9A; border-right:1px solid #D8D8D8; border-bottom:1px solid #D8D8D8; padding:2px; }

/*사이드메뉴 스타일 */
/* Some stylesheet reset */
#cssmenu > ul {
list-style: none;
margin: 0;
padding: 0;
vertical-align: baseline;
line-height: 1;
}

/* The container */
#cssmenu > ul {
display: block;
position: relative;
width: 150px;
}

/* The list elements which contain the links */
#cssmenu > ul li {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 150px;
}

  /* General link styling */
  #cssmenu > ul li a {
   /* Layout */
   display: block;
   position: relative;
   margin: 0;
   border-top: 1px dotted #3a3a3a;
   border-bottom: 1px dotted #1b1b1b;
   padding: 11px 20px;
   width: 110px;

   /* Typography */
   font-family: Helvetica, Arial, sans-serif;
   color: #d8d8d8;
   text-decoration: none;
   text-transform: uppercase;
   text-shadow: 0 1px 1px #000;
   font-size: 13px;
   font-weight: 300;

   /* Background & effects */
   background: #282828;
  }

  /* Rounded corners for the first link of the menu/submenus */
  #cssmenu > ul li:first-child>a {
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   border-top: 0;
  }

  /* Rounded corners for the last link of the menu/submenus */
  #cssmenu > ul li:last-child>a {
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   border-bottom: 0;
  }

  /* The hover state of the menu/submenu links */
  #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
   color: #3cc4e6;
   text-shadow: 0 1px 0 #fff;
   background: #e6e6e6;
   background: -webkit-linear-gradient(bottom, #e6e6e6, #fff);
   background: -ms-linear-gradient(bottom, #e6e6e6, #fff);
   background: -moz-linear-gradient(bottom, #e6e6e6, #fff);
   background: -o-linear-gradient(bottom, #e6e6e6, #fff);
   border-color: transparent;
  }

  /* The arrow indicating a submenu */
  #cssmenu > ul .has-sub>a::after {
   content: '';
   position: absolute;
   top: 16px;
   right: 10px;
   width: 0px;
   height: 0px;

   /* Creating the arrow using borders */
   border: 4px solid transparent;
   border-left: 4px solid #d8d8d8;
  }

  /* The same arrow, but with a darker color, to create the shadow effect */
  #cssmenu > ul .has-sub>a::before {
   content: '';
   position: absolute;
   top: 17px;
   right: 10px;
   width: 0px;
   height: 0px;

   /* Creating the arrow using borders */
   border: 4px solid transparent;
   border-left: 4px solid #000;
  }

  /* Changing the color of the arrow on hover */
  #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
   border-left: 4px solid #3cc4e6;
  }

  #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
   border-left: 4px solid #fff;
  }

  /* THE SUBMENUS */
  #cssmenu > ul ul {
   position: absolute;
   left: 150px;
   top: -9999px;
   padding-left: 5px;
   opacity: 0;
   /* The fade effect, created using an opacity transition */
   -webkit-transition: opacity .3s ease-in;
   -moz-transition: opacity .3s ease-in;
   -o-transition: opacity .3s ease-in;
   -ms-transition: opacity .3s ease-in;
  }

  /* Showing the submenu when the user is hovering the parent link */
  #cssmenu > ul li:hover>ul {
   top: 0px;
   opacity: 1;
  }

head.php

<?
// 이 파일은 새로운 파일 생성시 반드시 포함되어야 함
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가

$begin_time = get_microtime();

if (!$g4['title'])
    $g4['title'] = $config['cf_title'];

// 쪽지를 받았나?
if ($member['mb_memo_call']) {
    $mb = get_member($member[mb_memo_call], "mb_nick");
    sql_query(" update {$g4[member_table]} set mb_memo_call = '' where mb_id = '$member[mb_id]' ");

    alert($mb[mb_nick]."님으로부터 쪽지가 전달되었습니다.", $_SERVER[REQUEST_URI]);
}

// 현재 접속자
//$lo_location = get_text($g4[title]);
//$lo_location = $g4[title];
// 게시판 제목에 ' 포함되면 오류 발생
$lo_location = addslashes($g4['title']);
if (!$lo_location)
    $lo_location = $_SERVER['REQUEST_URI'];
//$lo_url = $g4[url] . $_SERVER['REQUEST_URI'];
$lo_url = $_SERVER['REQUEST_URI'];
if (strstr($lo_url, "/$g4[admin]/") || $is_admin == "super") $lo_url = "";

// 자바스크립트에서 go(-1) 함수를 쓰면 폼값이 사라질때 해당 폼의 상단에 사용하면
// 캐쉬의 내용을 가져옴. 완전한지는 검증되지 않음
header("Content-Type: text/html; charset=$g4[charset]");
$gmnow = gmdate("D, d M Y H:i:s") . " GMT";
header("Expires: 0"); // rfc2616 - Section 14.21
header("Last-Modified: " . $gmnow);
header("Cache-Control: no-store, no-cache, must-revalidate"); // HTTP/1.1
header("Cache-Control: pre-check=0, post-check=0, max-age=0"); // HTTP/1.1
header("Pragma: no-cache"); // HTTP/1.0
/*
// 만료된 페이지로 사용하시는 경우
header("Cache-Control: no-cache"); // HTTP/1.1
header("Expires: 0"); // rfc2616 - Section 14.21
header("Pragma: no-cache"); // HTTP/1.0
*/
?>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=<?=$g4['charset']?>">
<title><?=$g4['title']?></title>
<link rel="stylesheet" href="<?=$g4['path']?>/style.css" type="text/css">
<link href="http://umaxi1011.cafe24.com/gnuboard4/side_style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
   body{padding:20px; font-size:14px; color:#000000; font-family:Arial, Helvetica, sans-serif;}
   h2 {font-weight:bold; color:#000099; margin:10px 0px; }
   p span {color:#006600; font-weight:bold; }
   a, a:link, a:visited {color:#0000FF;}
   textarea {width: 100%; padding: 10px; margin: 10px 0 15px 0; font-size: 13px; font-family: Consolas,monospace;}
   textarea.html {height: 300px;}
   p {margin: 0 0 10px 0;}
   code, pre {font-family: Consolas,monospace; color: green;}
   ol li {margin: 0 0 15px 0;}
</style>

</head>
<script type="text/javascript">
// 자바스크립트에서 사용하는 전역변수 선언
var g4_path      = "<?=$g4['path']?>";
var g4_bbs       = "<?=$g4['bbs']?>";
var g4_bbs_img   = "<?=$g4['bbs_img']?>";
var g4_url       = "<?=$g4['url']?>";
var g4_is_member = "<?=$is_member?>";
var g4_is_admin = "<?=$is_admin?>";
var g4_bo_table = "<?=isset($bo_table)?$bo_table:'';?>";
var g4_sca       = "<?=isset($sca)?$sca:'';?>";
var g4_charset   = "<?=$g4['charset']?>";
var g4_cookie_domain = "<?=$g4['cookie_domain']?>";
var g4_is_gecko = navigator.userAgent.toLowerCase().indexOf("gecko") != -1;
var g4_is_ie     = navigator.userAgent.toLowerCase().indexOf("msie") != -1;
<? if ($is_admin) { echo "var g4_admin = '{$g4['admin']}';"; } ?>
</script>
<script type="text/javascript" src="<?=$g4['path']?>/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<?=$g4['path']?>/js/common.js"></script>
<body topmargin="0" leftmargin="0" <?=isset($g4['body_script']) ? $g4['body_script'] : "";?>>
<a name="g4_head"></a>


<div id='cssmenu'>
<ul>
   <li class='has-sub '><a href='#'><span>회사소개</span></a>
      <ul>
         <li><a href='#'><span>대표 인사말</span></a></li>
         <li><a href='#'><span>회사연혁</span></a></li>
         <li><a href='#'><span>오시는 길 </span></a></li>
      </ul>
   </li>
   <li class='has-sub '><a href='#'><span>사업영역</span></a>
      <ul>
         <li><a href='#'><span>영상솔루션</span></a></li>
         <li><a href='#'><span>음향 솔루션</span></a></li>
         <li><a href='#'><span>교육 솔루션</span></a></li>
         <li><a href='#'><span>IT 솔루션</span></a></li>
      </ul>
   </li>
   <li class='has-sub '><a href='#'><span>시공사례</span></a>
      <ul>
         <li><a href='#'><span>관공서</span></a></li>
         <li><a href='#'><span>기업</span></a></li>
         <li><a href='#'><span>학교</span></a></li>
         <li><a href='#'><span>교회 및 단체</span></a></li>
      </ul>
   </li>
   <li class='has-sub '><a href='#'><span>자료실</span></a>
      <ul>
         <li><a href='#'><span>공지사항</span></a></li>
         <li><a href='#'><span>질문과답변</span></a></li>
         <li class='has-sub '><a href='#'><span>제품자료실</span></a>
            <ul>
               <li><a href='#'><span>업계근황</span></a></li>
               <li><a href='#'><span>제품 매뉴얼</span></a></li>
               <li><a href='#'><span>기타자료</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='index.html'><span>메인페이지</span></a></li>
</ul>
</div>

댓글 작성

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

로그인하기

댓글 7개

cshop

프로필 보기 이 회원 글보기 이 회원의 댓글보기

13년 전

"애플컴퓨터에 윈도우 XP 가 안 깔려요" 라고 하시믄 도움드릴 수 있는 분이 없으실 듯.....

css3 는 IE 에서 적용되지 않습니다. IE9 에서는 border-radius 등 약간 적용되는 것 들이 있고, 아마 IE10 부터는 많이 개선된다고 합니다.

어떤 메뉴인지는 살펴보지 않아 모르겠는데, css 의 transition 의 효과를 원하신다면, 전부다는 아니지만, jQuery 의 animation 으로 대체하실 수 있는 부분이 꽤 됩니다.

돌맹나래

프로필 보기 이 회원 글보기 이 회원의 댓글보기

13년 전

아 그런 것이었군요. 감사합니다.
처음에 소스로만 받았을 땐
IE에서도 작동이 제대로 됬었는데...
그누보드 속으로 들어가니 제대로 작동되지 않더군요..
혹시나 그누보드 적용에서 문제가 있는 것인지 생각했었는데..
뭐, 다른 우회 도로를 찾는 것이 빠를 수도 있겠다는 생각이 드네요..

cshop

프로필 보기 이 회원 글보기 이 회원의 댓글보기

13년 전

-webkit-transition: opacity .3s ease-in;
-moz-transition: opacity .3s ease-in;
-o-transition: opacity .3s ease-in;
-ms-transition: opacity .3s ease-in;

이부분이 IE9 나 IE 10 이하에서는 작동이 안됩니다. 그누보드 탓은 절대 아닙니다. ^^

왜 죄없는 그누보드를... ㅠㅠ

css 의 transform 같은 경우는 마소필터 (-ms-filter: "progid:DXImageTransform.Microsoft.Matrix) 를 사용해서 IE8 에서도 성공적으로 css3 가 작동되게 하는 경우도 있긴 한데... transition 은 아마 없을거에요. jQuery 를 쓰셔야 할듯....

opacity .3s ease-in; 이건 jQuery 의 fade-in 기능으로 구현 가능할지도.

돌맹나래

프로필 보기 이 회원 글보기 이 회원의 댓글보기

13년 전

씨샵님의 조언 감사합니다만.. 전 아직 제이쿼리는 문외한이라...^^
그냥 드롭다운 같은 메뉴는 포기 하고 이미지로 가얄 것 같습니다.
ㅜㅜ 괜히 욕심 부리고 있나봐요.

CSS메뉴 적용하고 나서 이상하게 이미지 맵도 안먹히고 있어서리..
코드 어딘가 꼬였구나 하고 있었는데..
다 밀고 이미지로 가야겠습니다.
제이쿼리는 꼭 공부해야 겠네요.

cshop

프로필 보기 이 회원 글보기 이 회원의 댓글보기

13년 전

드롭다운은 css 로만 구현 가능합니다.

http://www.hackya.com/menu2/

(크롬에서 우클릭, 저장하기 누르셔서 쓰시면 됩니다.) 작년에 만들었던 거라 약간 발로 한 코딩일수도... 이해해 주시길... -..-;;

border-radius (코너를 동그랗게 만드는 것) 을 IE 에서도 적용하시려면 pie.htc 를 사용하시거나, javascript 을 사용하시면 IE 에서도 적용됩니다.

http://www.curvycorners.net/ (이게 .js 중에서는 가장 제약없이 사용하실 수 있고....)

pie.htc 는 다 좋은데, 적용안되는 웹서버가 있기도 하고, 약간 무겁습니다.

http://css3pie.com/

pie.htc 의 장점이라면 그림자 효과도 구현 가능합니다. .js 중에서는 그림자 효과를 주는 plug-in 은 없습니다.

저는 그때 그때 필요한 걸 씁니다.

사이트 url 알려주시면 뭐가 잘못된건지 봐드리고 시간오래 안걸릴 것 같으면 즉석 수정해드립니다. (주말에만) 이게 제 본업이 아니고 취미활동이라서요.... ㅎㅎㅎ

css 코딩은 자꾸 해야 잊어버리질 않아서... 어짜피 저 좋자고 하는겁니다... 쿨럭...

생선고양이

프로필 보기 이 회원 글보기 이 회원의 댓글보기

13년 전

IE9 부터는 미약하지만 CSS3 어느정도 지원은 합니다.

게다가 최근의 트렌드는 IE 6 7 8 은 버리는 분위기라지요..

힘내시고 CSS3 로 과감하게 가세요. ㅎㅎ

cshop

프로필 보기 이 회원 글보기 이 회원의 댓글보기

13년 전

에잉.. 언행일치가 안되믄 안되죠.. ㅋㅋㅋ

http://viewreple.com/image/event_head.png

저는 그누 자게분들은 잘 아시지만, 제 사이트는 IE 로 접근하면 redirect 된다는.. IE9 까지 버렸다눈....

못 믿으시겠으면 팡야님이나 오리스키님께 물어보시길.... 사실은 브라우져가 미친듯이 돌아다니면서 안꺼져서 컴맹분들은 컴퓨터 reboot 을 하게 까지 만들어 놨었는데... 그건 넘 심한것 같고... 그래서 밋스핀으로 redirect 하게 했었는데, 그것도 넘 심하다는 분들이 계셨어서.. 지금은 그냥 크롬/FF 다운로드 안내해 드립니다.

암튼 정말 IE 버리실꺼면 본인부터 실천하셔야죠... ㅋㅋㅋ

게시판 목록

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
827	HTML	zencoding	IAMA 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1578
826	HTML	정렬되지 않은 HTML 목록 ul li	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2311
825	HTML	html table 2	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2106
824	HTML	HTML Table 1	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1923
823	HTML	HTML 파일 경로	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2422
822	HTML	HTML <script> 태그	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1959
821	HTML	Iframe 구문	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2578
820	HTML	html 하이퍼링크2	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2582
819	HTML	html 하이퍼링크 1	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2508
818	HTML	HTML comment 태그	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1715
817	HTML	HTML abbr address cite bdo	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1705
816	HTML	HTML <code> For Computer Code	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1449
815	HTML	HTML Computer Code Elements	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1470
814	HTML	짧은 인용문을위한 HTML	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2069
813	HTML	HTML 서식 예제	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1675
812	HTML	HTML 서식 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1749
811	HTML	Emmet 코딩시간을 단축시켜주는....	IAMA 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1757
810	HTML	HTML 줄 바꿈	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2394
809	HTML	The HTML <head> Element	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1787
808	HTML	Headings 에 중요성	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2195
807	HTML	HTML 스타일 속성	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1968
806	HTML	HTML <pre> 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2002
805	HTML	HTML 줄 바꿈	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1951
804	CSS	CSS를 삽입하는 3 가지 방법	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2337
803	CSS	CSS 코멘트 삽입	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2245
802	CSS	CSS 기본 문법	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2337
801	HTML	HTML addr	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1952
800	HTML	HTML 서식 요소	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1807
799	기타	디바이스별 해상도	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2368
798	HTML	HTML 이미지 img 태그	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1996

• 8년 전

강좌