IE проблемы с CSS3 Dropdown & Ads - PullRequest
Новая
       2

IE проблемы с CSS3 Dropdown & Ads

0 голосов
/ 10 декабря 2011

Сайт, на котором я работаю, www.flynntec.com, испытывает проблемы с IE8. Я предполагаю, что это происходит в 6 и 7, а также. Firefox / Chrome работают нормально.

У меня есть два объявления в раскрывающемся списке CSS3 (Excel), которое, когда IE наводит курсор на объявления, закрывается. IE8 может зависать над ВСЕМ остальным в раскрывающемся списке, но как только он попадает в рекламу, раскрывающийся список немедленно закрывается.

Есть мысли?

КОД ДОБАВЛЕН

HTML 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Microsoft Office Tutorials - Excel, Word, PowerPoint, Access" />
<title>Microsoft Office Tutorials - Excel, Word, PowerPoint, Access</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-image: url(media/background.jpg);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div align=center id="container">
<div id="banner"><img src="media/banner.jpg" width="800" height="120" alt="Microsoft Office Tutorials Banner" /></div>
<div id="content">
<ul id="menu">  

<li><a href="#" class="drop">Home</a><!-- Begin Home Item -->  

    <div class="dropdown_2columns"><!-- Begin 2 columns container -->  

        <div class="col_2">  
            <h2>Microsoft Office Tutorials</h2>  
        </div>  

        <div class="col_2">  
            <p>This site is dedicated to training people to use Microsoft Excel, Word, PowerPoint and Access. Whether you're just beginning or a professional, there are resources here for you.</p>  
            <p>Our philosophy is different. We have created our own tutorials, but we've also leveraged the power of the internet to gather the world's best training tutorials on the Microsoft Office Suite.</p>  
        </div>  

        <div class="col_2">  
            <h2>Our Philosophy</h2>  
        </div>  

        <div class="col_1">  
            <img src="media/FreeMini.jpg" alt="Always Free" width="125" height="48" vspace="10" />  
        </div>  

        <div class="col_1">  
            <p>We are dedicated to providing you the best information. <b>Always Free </b></p>  
        </div>  

    </div><!-- End 2 columns container -->  

  </li><!-- End Home Item -->  

  <li><a href="#" class="drop">Excel</a><!-- Begin Excel Item -->  

      <div class="dropdown_5columns"><!-- Begin ExcelContainer -->  

        <div class="col_5">  
            <h2>Microsoft Excel</h2>  
        </div>  

        <div class="col_1"> <h3>Overview</h3> 
            <p class="black_box">Microsoft Excel is the world's most popular spreadsheet creation tool.</p>  
        </div>  

        <div class="col_1">  
             <ul class="greybox"><h3>Beginner</h3><li><a href="#">Welcome to Excel</a></li>  
                <li><a href="#">Calculations</a></li>  
                <li><a href="#">Functions and Formulas</a></li>  
                <li><a href="#">Formatting</a></li>
                <li><a href="#">Creating Charts</a></li>  
                <li><a href="#">More...</a></li>
        </div>
        <div class="col_1">  
            <ul class="greybox"><h3>Intermediate</h3><li><a href="#">Freezing Panes</a></li>  
                <li><a href="#">The =IF Formula</a></li>  
                <li><a href="#">Conditional Formatting</a></li>  
                <li><a href="#">The Date in Excel</a></li>
                <li><a href="#">Drop-Down Lists</a></li>   
                <li><a href="#">More...</a></li>
        </div>  

        <div class="col_1">  
            <ul class="greybox"><h3>Advanced</h3><li><a href="#">Using =VLOOKUP</a></li>  
                <li><a href="#">Pivot Tables</a></li>  
                <li><a href="#">Using the Goal Seek Feature</a></li>  
                <li><a href="#">Templates</a></li>
                <li><a href="#">Macros</a></li>  
                <li><a href="#">More...</a></li> 
             </ul>
        </div>  
        <div class="col_1">  
<ul class="greybox"><h3>Sponsor</h3><p><script type="text/javascript"><!--
google_ad_client = "ca-pub-1357665793080808";
/* Support */
google_ad_slot = "8875829615";
google_ad_width = 120;
google_ad_height = 240;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script> </p>
 </div>  

        <div class="col_1">  
            <p></p>  
        </div>  

        <div class="col_5">  
            <h2>Additional Free Resources</h2>  
        </div>  

        <div class="col_3">  

            <img src="media/youtube-logo.jpg" alt="YouTube Picture" name="youtube"     width="90" height="70" class="img_left imgshadow" id="youtube" />  
            <p>If you prefer to learn visually, YouTube is the best free source for     Excel tutorials in the world. We have compiled the best, most popular Excel tutorials from     YouTube and put them here for your convenience. </p>  

          <br />
          <a href="http://office.microsoft.com/en-us/training-FX101782702.aspx"     target="_blank"><img src="media/microsoft-logo__111129012732.jpg" alt="" name="microsoft"     width="90" height="24" class="img_left imgshadow" id="microsoft" /></a>  
            <p><a href="http://office.microsoft.com/en-us/training-FX101782702.aspx"     title="Microsoft Training" target="_blank">Microsoft has some of the best tutorials in the     world listed on their website. Microsoft Training can be found here.</a></p>
         <br />  
</div>
<div class="col_5">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-1357665793080808";
/* Excel CSS3 Dropdown */
google_ad_slot = "0975939945";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div><!-- End Excel container -->  

</li><!-- End Excel Item -->

CSS 

    @charset "utf-8";
/* CSS Document */

#container {
}
#banner img{
border:7px solid #FFF;
border-radius: 7px;
-moz-border-radius: 7px
-webkit-border-radius: 7px;
}
#banner {
padding-bottom: 0px;
}
#content {
}
#footer {
}
#menu {
list-style: none;
width: 774px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #003910;
background: -moz-linear-gradient(top, #FFF, #003910);
background: -webkit-gradient(linear, 0% 0%, 0% 100%,     from(#FFF), to(#003910)); 
-moz-box-shadow:inset 0px 0px 1px #edf9ff;  
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;  
box-shadow:inset 0px 0px 1px #edf9ff; 
border: 1px solid #FFF; 
}
#menu li {
float:left;  
display:block;  
text-align:center;  
position:relative;  
padding: 4px 10px 4px 10px;  
margin-right:30px;  
margin-top:7px;  
border:none; 
}
#menu li:hover {
background: #F4F4F4;  
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
border: 1px solid #777777;  
padding: 4px 9px 4px 9px; 
-moz-border-radius: 5px 5px 0px 0px;  
-webkit-border-radius: 5px 5px 0px 0px;  
border-radius: 5px 5px 0px 0px;  
}
#menu li a {
font-family:Arial, Helvetica, sans-serif;  
font-size:14px;  
color: #EEEEEE;  
display:block;  
outline:0;  
text-decoration:none;  
text-shadow: 1px 1px 1px #000; 
}
#menu li:hover a {  
color: #161616;  
text-shadow: 1px 1px 1px #FFFFFF;  
}
#menu li .drop {
padding-right: 21px;  
background: url(media/drop.png);
background-repeat: no-repeat;
background-position: right 8px;
}
#menu li:hover .drop {
background: url(media/drop.png);
background-repeat: no-repeat;
background-position: right 7px;
}  
.dropdown_1column,  
.dropdown_2columns,  
.dropdown_3columns,  
.dropdown_4columns,  
.dropdown_5columns {  
margin:4px auto;  
position:absolute;  
left:-999em; /* Hides the drop down */  
text-align:left;  
padding:10px 5px 10px 5px;  
border:1px solid #777777;  
border-top:none;  

/* Gradient background */  
background:#F4F4F4;  
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);  
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));  

/* Rounded Corners */  
-moz-border-radius: 0px 5px 5px 5px;  
-webkit-border-radius: 0px 5px 5px 5px;  
border-radius: 0px 5px 5px 5px;  
}  
#menu li:hover .dropdown_1column,  
#menu li:hover .dropdown_2columns,  
#menu li:hover .dropdown_3columns,  
#menu li:hover .dropdown_4columns,  
#menu li:hover .dropdown_5columns {  
left:-1px;top:auto;  
}  
.dropdown_1column {width: 146px;}  
.dropdown_2columns {width: 284px;}  
.dropdown_3columns {width: 422px;}  
.dropdown_4columns {width: 560px;}  
.dropdown_5columns {width: 740px;} 
.col_1,  
.col_2,  
.col_3,  
.col_4,  
.col_5 {  
display:inline;  
float: left;  
position: relative;  
margin-left: 5px;  
margin-right: 5px;  
}  
.col_1 {width:130px;}  
.col_2 {width:270px;}  
.col_3 {width:410px;}  
.col_4 {width:550px;}  
.col_5 {width:690px;}  
#menu .menu_right {  
float:rightright;  
margin-right:0px;  
}  
#menu li .align_right {  
/* Rounded Corners */  
-moz-border-radius: 5px 0px 5px 5px;  
-webkit-border-radius: 5px 0px 5px 5px;  
border-radius: 5px 0px 5px 5px;  
}  
#menu li:hover .align_right {  
left:auto;  
right:-1px;  
top:auto;  
}  
#menu p, #menu h2, #menu h3, #menu ul li {  
font-family:Arial, Helvetica, sans-serif;  
line-height:21px;  
font-size:12px;  
text-align:left;  
text-shadow: 1px 1px 1px #FFFFFF;  
}  
#menu h2 {  
font-size:21px;  
font-weight:400;  
letter-spacing:-1px;  
margin:7px 0 14px 0;  
padding-bottom:14px;  
border-bottom:1px solid #666666;  
}  
#menu h3 {  
font-size:14px;  
margin:7px 0 14px 0;  
padding-bottom:7px;  
border-bottom:1px solid #888888;  
}  
#menu p {  
line-height:18px;  
margin:0 0 10px 0;  
}  
.strong {  
font-weight:bold;  
}  
.italic {  
font-style:italic;  
}
#menu li:hover div a {  
font-size:12px;  
color:#015b86;  
}  
#menu li:hover div a:hover {  
color:#029feb;  
} 
#menu li ul {  
list-style:none;  
padding:0;  
margin:0 0 12px 0;  
}  
#menu li ul li {  
font-size:12px;  
line-height:24px;  
position:relative;  
text-shadow: 1px 1px 1px #ffffff;  
padding:0;  
margin:0;  
float:none;  
text-align:left;  
width:130px;  
}  
#menu li ul li:hover {  
background:none;  
border:none;  
padding:0;  
margin:0;  
} 
.imgshadow {  
background:#FFFFFF;  
padding:4px;  
border:1px solid #777777;  
margin-top:5px;  
-moz-box-shadow:0px 0px 5px #666666;  
-webkit-box-shadow:0px 0px 5px #666666;  
box-shadow:0px 0px 5px #666666;  
}
.img_left {  
width:auto;  
float:left;  
margin:5px 15px 5px 5px;  
}
#menu li .black_box {  
background-color:#333333;  
color: #eeeeee;  
text-shadow: 1px 1px 1px #000;  
padding:4px 6px 4px 6px;  

/* Rounded Corners */  
-moz-border-radius: 5px;  
-webkit-border-radius: 5px;  
border-radius: 5px;  

/* Shadow */  
-webkit-box-shadow:inset 0 0 3px #000000;  
-moz-box-shadow:inset 0 0 3px #000000;  
box-shadow:inset 0 0 3px #000000;  
} 
#menu li .greybox li {  
background:#F4F4F4;  
border:1px solid #bbbbbb;  
margin:0px 0px 4px 0px;  
padding:4px 6px 4px 6px;  
width:116px;  

/* Rounded Corners */  
-moz-border-radius: 5px;  
-webkit-border-radius: 5px;  
border-radius: 5px;  
}  
#menu li .greybox li:hover {  
background:#ffffff;  
border:1px solid #aaaaaa;  
padding:4px 6px 4px 6px;  
margin:0px 0px 4px 0px;  
} 
<!--[if IE 6]>  
<style>  
body {behavior: url("csshover3.htc");}  
</style>  
<![endif]-->

Спасибо!

1 Ответ

0 голосов
/ 10 декабря 2011

Эта проблема вызвана определенной настройкой wmode объекта Flash.Для того, что вам нужно, вам нужно, чтобы wmode был opaque, а не window, direct, gpu или значение по умолчанию.Тем не менее, поскольку вы используете объявления Google, у вас нет абсолютно никакого контроля над контентом (вы даже не можете использовать JavaScript, чтобы изменить его из-за междоменных проблем).Это, вероятно, намеренно со стороны Google, чтобы пользователи не могли скрывать рекламу, прикрывая их другим элементом, но это разочаровывает, когда я пытаюсь легитимно что-то сделать поверх этого.

Лучшее предложение, которое я могу придумать, эточтобы контейнер для объявления изменил свой стиль visibility на hidden во время отображения меню, затем измените его обратно на visible.Это будет выглядеть грязно, но по крайней мере это не будет обработано поверх вашего фактического контента.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...