묻고답하기

안녕하세요!

 

롤오버 메뉴가 IE에서는 겹쳐서 나오는데...해결법이 없을까요?

.selector { property:value; *property:value; } /* IE 7 이하의 브라우저에 작용 합니다 */
.selector { property:value; _property:value; } /* IE 6 이하의 브라우저에 작용 합니다 */

 

제 css 파일에 적용하려면 어떻게 하는 건지 몰라서요.

아님...제 코딩이 이상해서 그런지;;; 두 브라우져에서 다 똑같이 나오면 좋겠는데;;;;;

조언 부탁드립니다. ^^ 감사합니다!!!

 sample.gif

 

samplefire.gif

 

 

#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;}

태그 연관 글
  1. [2018/03/17] 묻고답하기 CSS ㅡ divA 안에있는 하위 divB 의 크기를 divA 보다 넓게 보이게 하려면 by forest535 *2
  2. [2016/09/13] 묻고답하기 제목에 html, css 가능하도록 하기? by lifema**** *2
  3. [2016/06/30] 묻고답하기 xe 1.4.0버전 사용중입니다 by starship *1
  4. [2016/01/05] 묻고답하기 ie10, 11번전 css문제 by deok
  5. [2015/07/16] 묻고답하기 widget을 감싸고 있는 박스에 미디어쿼리를 넣고 싶습니다 by poltwo *2