묻고답하기
CSS hack 사용법을 구체적으로...부탁드려요~~~
2009.09.10 15:20
안녕하세요!
롤오버 메뉴가 IE에서는 겹쳐서 나오는데...해결법이 없을까요?
.selector { property:value; *property:value; } /* IE 7 이하의 브라우저에 작용 합니다 */
.selector { property:value; _property:value; } /* IE 6 이하의 브라우저에 작용 합니다 */
제 css 파일에 적용하려면 어떻게 하는 건지 몰라서요.
아님...제 코딩이 이상해서 그런지;;; 두 브라우져에서 다 똑같이 나오면 좋겠는데;;;;;
조언 부탁드립니다. ^^ 감사합니다!!!
#gnb { position:absolute; top:44px; left:10px; height:60px; overflow:hidden; white-space:nowrap; margin-bottom:10px;}
#gnb li { list-style:none; float:left; background:url(../images/white/img07.gif) no-repeat left 50px; padding-left:2px; padding-top:13px; position:relative; left:-2px; white-space:nowrap; font-family: 굴림, Arial, Helvetica, sans-serif;}
#gnb li a { font-weight:bold; display:block; float:left; padding: 25px 15px 0px 15px; height:25px; color:#ffffff; white-space:nowrap; text-decoration:none; font-size: 14px;}
#gnb li a:hover,
#gnb li a:focus { color:#ffffff;}
#gnb li a:hover,
#gnb li.on a { background:url(../images/white/leaf.png) no-repeat center top;}
.gnb_subMenu{position:absolute; top:95px; left:-17px; height:24px;}
.gnb_subMenu li{position:relative; display:block; list-style:none; float:left;}
.gnb_subMenu li a {text-decoration:none; color:#333333; display:block; float:left; padding:4px 5px 0px 7px; font-family: 굴림, Arial, Helvetica, sans-serif; }
.gnb_subMenu li a:hover,
.gnb_subMenu li a:focus {color:#ff9900;}
.gnb_subMenu .on { background:url(../images/white/img09_1.gif) no-repeat left 7px;}
.gnb_subMenu .on a {color:#ff9900;}
IE에서는 아래와 같이 코딩하면 위에 다른 브라우져들 처럼 제대로 나옵니다.
#gnb { position:absolute; top:55px; left:10px; height:60px; overflow:hidden; white-space:nowrap; margin-bottom:10px;}
#gnb li { list-style:none; float:left; background:url(../images/white/img07.gif) no-repeat left 40px; padding-left:2px; padding-top:12px; position:relative; left:-2px; white-space:nowrap; font-family: 굴림, Arial, Helvetica, sans-serif;}
#gnb li a { font-weight:bold; display:block; float:left; padding: 15px 15px 10px 15px; height:25px; color:#ffffff; white-space:nowrap; text-decoration:none; font-size: 14px;}
#gnb li a:hover,
#gnb li a:focus { color:#ffffff;}
#gnb li.on a { background:url(../images/white/leaf.gif) no-repeat center top;}
.gnb_subMenu{position:absolute; left:10px; top:110px; height:24px;}
.gnb_subMenu li{display:block; list-style:none; float:left;}
.gnb_subMenu li a {text-decoration:none; color:#333333; padding-left:10px; line-height:2em; position:relative;white-space:nowrap; font-family: 굴림, Arial, Helvetica, sans-serif;}
.gnb_subMenu li a:hover,
.gnb_subMenu li a:focus {color:#ff9900;}
.gnb_subMenu .on a {color:#ff9900;}
- [2018/03/17] 묻고답하기 CSS ㅡ divA 안에있는 하위 divB 의 크기를 divA 보다 넓게 보이게 하려면 *2
- [2016/09/13] 묻고답하기 제목에 html, css 가능하도록 하기? *2
- [2016/06/30] 묻고답하기 xe 1.4.0버전 사용중입니다 *1
- [2016/01/05] 묻고답하기 ie10, 11번전 css문제
- [2015/07/16] 묻고답하기 widget을 감싸고 있는 박스에 미디어쿼리를 넣고 싶습니다 *2
댓글 3
-
웰빙샵 지영
2009.09.10 15:43
-
'*' 핵을 사용하시면서 '_' 핵을 동시에 사용하실 필요가 없습니다.
'*' 핵은 IE 6~7 버전에 동시에 작용하기 때문입니다.
-
웰빙샵 지영
2009.09.10 21:07
아! 그렇군요! ^^ 감사합니다!!!
자답입니다;;;; ^^
.gnb_subMenu{position:absolute; top:95px; *top:108px; _top:108px; left:-17px; _left:25px; *left:25px;height:24px; }
해서 해결되었네요!! ^0^