IE에서 CSS3 메뉴 적용이 되지 않습니다. 정보
HTML IE에서 CSS3 메뉴 적용이 되지 않습니다.본문
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
*/
?>
<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> -->
<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>
추천
0
0
댓글 7개
"애플컴퓨터에 윈도우 XP 가 안 깔려요" 라고 하시믄 도움드릴 수 있는 분이 없으실 듯.....
css3 는 IE 에서 적용되지 않습니다. IE9 에서는 border-radius 등 약간 적용되는 것 들이 있고, 아마 IE10 부터는 많이 개선된다고 합니다.
어떤 메뉴인지는 살펴보지 않아 모르겠는데, css 의 transition 의 효과를 원하신다면, 전부다는 아니지만, jQuery 의 animation 으로 대체하실 수 있는 부분이 꽤 됩니다.
css3 는 IE 에서 적용되지 않습니다. IE9 에서는 border-radius 등 약간 적용되는 것 들이 있고, 아마 IE10 부터는 많이 개선된다고 합니다.
어떤 메뉴인지는 살펴보지 않아 모르겠는데, css 의 transition 의 효과를 원하신다면, 전부다는 아니지만, jQuery 의 animation 으로 대체하실 수 있는 부분이 꽤 됩니다.
아 그런 것이었군요. 감사합니다.
처음에 소스로만 받았을 땐
IE에서도 작동이 제대로 됬었는데...
그누보드 속으로 들어가니 제대로 작동되지 않더군요..
혹시나 그누보드 적용에서 문제가 있는 것인지 생각했었는데..
뭐, 다른 우회 도로를 찾는 것이 빠를 수도 있겠다는 생각이 드네요..
처음에 소스로만 받았을 땐
IE에서도 작동이 제대로 됬었는데...
그누보드 속으로 들어가니 제대로 작동되지 않더군요..
혹시나 그누보드 적용에서 문제가 있는 것인지 생각했었는데..
뭐, 다른 우회 도로를 찾는 것이 빠를 수도 있겠다는 생각이 드네요..
-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 기능으로 구현 가능할지도.
-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 기능으로 구현 가능할지도.
씨샵님의 조언 감사합니다만.. 전 아직 제이쿼리는 문외한이라...^^
그냥 드롭다운 같은 메뉴는 포기 하고 이미지로 가얄 것 같습니다.
ㅜㅜ 괜히 욕심 부리고 있나봐요.
CSS메뉴 적용하고 나서 이상하게 이미지 맵도 안먹히고 있어서리..
코드 어딘가 꼬였구나 하고 있었는데..
다 밀고 이미지로 가야겠습니다.
제이쿼리는 꼭 공부해야 겠네요.
그냥 드롭다운 같은 메뉴는 포기 하고 이미지로 가얄 것 같습니다.
ㅜㅜ 괜히 욕심 부리고 있나봐요.
CSS메뉴 적용하고 나서 이상하게 이미지 맵도 안먹히고 있어서리..
코드 어딘가 꼬였구나 하고 있었는데..
다 밀고 이미지로 가야겠습니다.
제이쿼리는 꼭 공부해야 겠네요.
드롭다운은 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 코딩은 자꾸 해야 잊어버리질 않아서... 어짜피 저 좋자고 하는겁니다... 쿨럭...
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 코딩은 자꾸 해야 잊어버리질 않아서... 어짜피 저 좋자고 하는겁니다... 쿨럭...
IE9 부터는 미약하지만 CSS3 어느정도 지원은 합니다.
게다가 최근의 트렌드는 IE 6 7 8 은 버리는 분위기라지요..
힘내시고 CSS3 로 과감하게 가세요. ㅎㅎ
게다가 최근의 트렌드는 IE 6 7 8 은 버리는 분위기라지요..
힘내시고 CSS3 로 과감하게 가세요. ㅎㅎ
에잉.. 언행일치가 안되믄 안되죠.. ㅋㅋㅋ
http://viewreple.com/image/event_head.png
저는 그누 자게분들은 잘 아시지만, 제 사이트는 IE 로 접근하면 redirect 된다는.. IE9 까지 버렸다눈....
못 믿으시겠으면 팡야님이나 오리스키님께 물어보시길.... 사실은 브라우져가 미친듯이 돌아다니면서 안꺼져서 컴맹분들은 컴퓨터 reboot 을 하게 까지 만들어 놨었는데... 그건 넘 심한것 같고... 그래서 밋스핀으로 redirect 하게 했었는데, 그것도 넘 심하다는 분들이 계셨어서.. 지금은 그냥 크롬/FF 다운로드 안내해 드립니다.
암튼 정말 IE 버리실꺼면 본인부터 실천하셔야죠... ㅋㅋㅋ
http://viewreple.com/image/event_head.png
저는 그누 자게분들은 잘 아시지만, 제 사이트는 IE 로 접근하면 redirect 된다는.. IE9 까지 버렸다눈....
못 믿으시겠으면 팡야님이나 오리스키님께 물어보시길.... 사실은 브라우져가 미친듯이 돌아다니면서 안꺼져서 컴맹분들은 컴퓨터 reboot 을 하게 까지 만들어 놨었는데... 그건 넘 심한것 같고... 그래서 밋스핀으로 redirect 하게 했었는데, 그것도 넘 심하다는 분들이 계셨어서.. 지금은 그냥 크롬/FF 다운로드 안내해 드립니다.
암튼 정말 IE 버리실꺼면 본인부터 실천하셔야죠... ㅋㅋㅋ
