css - IE8以下では、ナビゲーションが原因でサイトが正しく流れません。

Question

私は可能な限り助けていただければ幸いです。私はこのサイトを繰り返し調べて、このナビゲーションが適切に配置されない理由を確認しました。それはサイトの残りの部分に影響を及ぼします。私はさまざまな解決策を試しているすべてのフォーラムを通過してきましたが、この問題には取り組んでいません。css3が表示されないことに気づきましたが、私は必要です

Chrome、FF、Safari、IE9では正しいですが、IE8では正しくフォーマットされません。あなたはcluttercoach.comでページを見ることができます

CSS

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

body {
    position: relative;
    font-family: 'Lato', sans-serif;
    background-color: #CCCCCC;
    margin: 25px 0 25px 0;
    color: #000;
    background: url(../images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;

}

ul, ol, dl { 
    position: relative;
    padding: 0;
    margin: 0;
}
sup,
sub {
    position: relative;
    font-size: 0.65em;
    vertical-align: super;
    line-height: 0; 
}

a img { 
    position: relative;
    border: none;
    border-style: none;
}

h1, h2, h5, h6, h7, p {
    position: relative;
    margin: 0px;     
    padding: 5px 30px 10px 30px; 

}
h10 {
    position: relative;
    margin: 0px;     
    padding: 0px 30px 0px 45px;

}
h3 {
    position: relative;
    margin: 0px;     
    padding: 0 10px 0 0;
}
h4 {
    position: relative;
    margin: 10px;    

}
h5, h9 {
    position: relative;
    margin: 0px;     
}

h11 {
    position: relative;
    margin: 0px;
    padding: 5px 0 0 30px;
    letter-spacing: 0.15em;

}



a:link {
    color: #FFF;
    text-decoration: none; 
}
a:visited {
    color: #FFF;
    text-decoration: none;
}
a:hover, a:active, a:focus { 
    text-decoration: none;
}

a.black:link {
    color: #000;
    text-decoration: underline; 
}
a.black:visited {
    color: #000;
    text-decoration: none;
}
a.black:hover, a.black:active, a.black:focus { 
    text-decoration: none;
}

a.purple:link {
    color: #612D55;
    text-decoration: underline;
}
a.purple:visited {
    color: #612D55;
    text-decoration: underline;
}
a.purple:hover, a.purple:active, a.purple:focus { 
    color: #612D55;
    text-decoration: underline;
}

a img {border: none; }

.container {
    position: relative;
    z-index: -1;
    width: 1000px;
    margin: 0 auto;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: #666 0px 2px 4px;
    -moz-box-shadow: #666 0px 2px 4px;
    box-shadow: #666 0px 2px 4px;
    background: #FFF;
    behavior: url(/PIE.htc);
}

.container_top {
    position: relative;
    width: 1000px;
} 

.header {
    position: relative;
    width: 1000px;
    height: 140px;
    padding: 10px 0 0 0;
    -webkit-border-radius: 20px 20px 0px 0px;
    -moz-border-radius: 20px 20px 0px 0px;
    border-radius: 20px 20px 0px 0px;
    background-image: url('../images/base_elements/cc_header.jpg');
    behavior: url(/PIE.htc);

}


.sidebar1 {
    position: relative;
    float: right;
    width: 275px;
    background-color: #FFFFFF;
    border: none;
}
.content {
    position: relative;
    width: 700px;
    float: left;
    background-color: #FFF;
}
.content_testimonials {
    position: relative;
    padding: 15px 0px;
    width: 950px;
    float: left;
    background-color: #FFF;
}

.content ul, .content ol { 
    position: relative;
    padding: 15px; 
}   
.menu,
.menu ul,
.menu li,
.menu a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

/* Menu */
.menu { 
    height: 40px;
    width: 1000px;

    background: #612D55;

    -webkit-border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    border-radius: 0px 0px 5px 5px;
}

.menu li {
    position: relative;
    list-style: none;
    float: left;
    display: block;
    height: 25x;
}

/* Links */

.menu li a {
    display: block;
    padding: 0 26px;
    margin: 6px 0;
    line-height: 28px;
    text-decoration: none;

    font-family: 'Lato', sans-serif;
    font-weight: bold;
    font-size: 15px;

    color: #FFF;
    text-shadow: 1px 1px 1px rgba(0,0,0,.6);

    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}

.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { color: #999; }

/* Sub Menu */

.menu ul {
    position: absolute;
    top: 40px;
    left: 0;

    opacity: 0;

    background: #d1d1d1; /* Old browsers */

background: -moz-linear-gradient(top,  #d1d1d1 0%, #adadad 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d1d1d1), color-stop(100%,#adadad)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  #d1d1d1 0%,#adadad 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  #d1d1d1 0%,#adadad 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  #d1d1d1 0%,#adadad 100%); /* IE10+ */

background: linear-gradient(to bottom,  #d1d1d1 0%,#adadad 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d1d1', endColorstr='#adadad',GradientType=0 ); /* IE6-9 */







    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;

    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
}

.menu li:hover > ul { opacity: 1; }

.menu ul li {
    height: 0;
    overflow: hidden;
    padding: 0;

    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}

.menu li:hover > ul li {
    height: 36px;
    overflow: visible;
    padding: 0;
}

.menu ul li a {
    width: 185px;
    padding: 4px 0 4px 25px;
    margin: 0;

    border: none;

}

.menu ul li:last-child a { border: none; }


.menu ul ul{
    position: absolute;
    top: 0;
    left: 90%;

    opacity: 0;



    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
}
.menu ul ul li a {
    width: 250px;
    padding: 4px 0 4px 25px;
    margin: 0;

    border: none;

}

.menu ul ul:after { right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } 

.menu ul ul:after { border-color: rgba(0, 0, 0, 0); border-right-color: #000; border-width: 8px; top: 20px; margin-top: -8px; }

ul.menu { z-index: 9999; position: relative; }

/* ~~ The footer ~~ */
.footer {
    position: relative;
    clear: both;
    border-top: 4px solid #FC0;
    -webkit-border-radius: 0px 0px 20px 20px;
    -moz-border-radius: 0px 0px 20px 20px;
    border-radius: 0px 0px 20px 20px;
    -webkit-box-shadow: #666 0px 2px 4px;
    -moz-box-shadow: #666 0px 2px 4px;
    box-shadow: #666 0px 2px 4px;
    background: #FFF;
    behavior: url(/PIE.htc);
}
.fltrt {  
    float: right;
    margin-left: 8px;
}
.fltlft { 
    float: left;
    margin-right: 8px;
}
.clearfloat { 
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
#header_band {
    position: relative;
    height: 25px;
    width: 1000px;
    background-color: #FC0;
    font-family: Lato, sans-serif;
}

body,td,th {
    position: relative;
    font-family: Lato, sans-serif;
}
h1 {
    position: relative;
    font-size: 30px;
    color: #650065;
    font-weight: normal;
}
.pods {
    position: relative;
    width: 215px;
    padding-left: 15px;
    margin: 10px;
    padding: 10px auto;
    border: 2px solid #660066;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: #666 0px 2px 4px;
    -moz-box-shadow: #666 0px 2px 4px;
    box-shadow: #666 0px 2px 4px;
    background: #FFF;
    behavior: url(/PIE.htc);

}
#quotetext {
    position: relative;
    width: 215px;
    padding-left: 15px;
    margin: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 15px;


}
.jane_pod {
    position: relative;
    width: 215px;
    height: 175px;
    margin: 10px;
    padding: 5px 15px 5px 15px;
    border: 2px solid #660066;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: #666 0px 2px 4px;
    -moz-box-shadow: #666 0px 2px 4px;
    box-shadow: #666 0px 2px 4px;
    background: #FFF;
    background-image: url('../images/promotions-kits/call_jane.jpg');
    behavior: url(/PIE.htc);


.paragraph {
    position: relative;
    line-height: 1.25em;
    color: #333;
}
.listing {
    position: relative;
    color: #333;
    padding-top: -10px;
    margin-top: -10px;
}
#site_map {
    position: relative;
    font-size: 10px;
    font-weight: normal;
    color: #666;
    width: 975px;
    margin: 10px auto 0 auto;
    padding: 0 25px 0 25px;

}
h2 {
    font-size: 16px;
    color: #650065;
    font-weight: normal;
}

h3 {
    font-size: 18px;
    color: #650065;
    font-weight: bold;
}
h4 {
    font-size: 16px;
    color: #650065;
    font-weight: normal;
}
h5 {
    font-size: 20px;
    color: #FFF;
    font-weight: normal;
}
h6 {
    font-size: 24px;
    color: #FFF;
}
h7{
    font-size: 14px;
    color: #650065;
    font-weight: normal;
    line-height: 1.45em;
}
h8{
    font-size: 18px;
    color: #650065;
    letter-spacing: 0.15em;
}

h9 {
    font-size: 20px;
    color: #FFF;
}
h11 {
    font-size: 20px;
    color: #612D55;
}

#services {
    position: relative;
    background-color: #CCC;
    height: 110px;
    width: 560px;
    margin: 10px 0 0 100px;
    border: 1px solid #888;

}

#services_text {
    position: relative;
    height: 80px;
    width: 550px;
    float: right;
    padding: 10px 10px 5px 10px;

}

#tv_logos {
    position: relative;
    width: 175px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #CCC;
    padding: 0 20px 10px 20px;

}
#tv_logos_middle {
    position: relative;
    width: 175px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #CCC;
    padding: 10px 20px 10px 20px;
}

#tv_logos_bottom {
    align: center;
    position: relative;
    width: 175 px;
    padding: 10px 20px 10px 20px;
}
#started {
    position: relative;
    background-color: #660066;
    height: 25px;
    width: 125px;
    margin: 10px 0 0 100px;
    color: #FFF;
    padding: 5px 0 5px 10px;
    border: 2px solid #FFCC00;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: #666 0px 2px 4px;
    -moz-box-shadow: #666 0px 2px 4px;
    box-shadow: #666 0px 2px 4px;
    behavior: url(/PIE.htc);
}
#started_02 {
    position: relative;
    background-color: #660066;
    height: 25px;
    width: 125px;
    margin: 10px 0 0 30px;
    color: #FFF;
    padding: 5px 0 5px 10px;
    border: 2px solid #FFCC00;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: #666 0px 2px 4px;
    -moz-box-shadow: #666 0px 2px 4px;
    box-shadow: #666 0px 2px 4px;
    behavior: url(/PIE.htc);
}
#started_03 {
    position: relative;
    background-color: #660066;
    height: 25px;
    width: 125px;
    margin: 10px 0 0 100px;
    color: #FFF;
    padding: 5px 0 5px 10px;
    border: 2px solid #FFCC00;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: #666 0px 2px 4px;
    -moz-box-shadow: #666 0px 2px 4px;
    box-shadow: #666 0px 2px 4px;
    behavior: url(/PIE.htc);
}
#started_text {
    position: relative;
    background-color: #FFF;
    height: 25px;
    width: 625px;
    margin: 10px 0 0 85px;
    color: #888;    
}
#services_list {
    position: relative;
    background-color: #FFF;
    width: 585px;
    margin: 10px 0 0 30px;
    border: 1px solid #FFCC00;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: #666 0px 2px 4px;
    -moz-box-shadow: #666 0px 2px 4px;
    box-shadow: #666 0px 2px 4px;
    behavior: url(/PIE.htc);
}

#services_text_list {
    position: relative;
    width: 560px;
    padding: 5px 15px 0 15px;
}
#services_list_test {
    position: relative;
    background-color: #FFF;
    width: 850px;
    margin: 0 0 0 30px;
    padding: 0px;
    border: 1px solid #FFCC00;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: #666 0px 2px 4px;
    -moz-box-shadow: #666 0px 2px 4px;
    box-shadow: #666 0px 2px 4px;
    behavior: url(/PIE.htc);
}

#services_text_list_test {
    position: relative;
    width: 840px;
    padding: 5px;
}

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>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'></link>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<title>Cluttercoach</title>
<meta name="keywords" content="Chicagoland, Chicago, professional organizer, organizing, Jane Carroo, Clutter Coach, storage, life coach, memorabilia, inventory, time management, National Association of Professional Organizers, organization, downsize, disorganized, filing system, relocate, home staging">
<meta name="verify-v1" content="GjwxC8bQTgNcbTb2zk18Ok0B3bo0baxJqpWUqJbSNiM=" />
<meta name="ROBOTS" content="index,follow">
<meta name="REVISIT-AFTER" content="15 days">
<meta name="google-site-verification" content="-QkbNOxxz2Za-cfdX2RFGvdPbAW0H2n6L-cfOTpXyDs" />

<style type="text/css">
<script type="text/javascript" src="js/jquery.js">
</style>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-1091736-1";
urchinTracker();
</script>
</head>

<body>
<div class="container"><!-- #BeginLibraryItem "/Library/header.lbi" -->  <div class="header">
  <form name="ccoptin" action="http://visitor.constantcontact.com/d.jsp" target="_blank" method="post">
              <div align="right">
                <input type="hidden" name="m" value="1101831114185">
                <input type="hidden" name="p" value="oi">
      </div>
              <div id="signup_input" class="bold_white">  
                <div align="right"><br />
<h5>Sign up for great organizing tips!<br />
                  <input type="text" name="ea" size="12" value=""><input type="submit" name="go" value="Go" class="submit" style="margin-right:10px;" />
                  <br />
                  Call Now!  847-776-8717
                </div>
              </div>
    </form>
  </div><!-- #EndLibraryItem --><!-- #BeginLibraryItem "/Library/tag_line.lbi" --><div id="header_band"><h11>PROFESSIONAL ORGANIZING SERVICES</h11></div><!-- #EndLibraryItem --><div id="nav"><!-- #BeginLibraryItem "/Library/navigation.lbi" --><ul class="menu">
        <li><a href="index.shtml">Home</a></li>
        <li><a href="about.shtml">About Us</a>
                <ul>
                <li><a href="my_story.shtml">My Story</a></li>
                <li><a href="affiliations.shtml">Affiliations</a></li>
                <li><a href="news.shtml">In the News</a></li>
                </ul>
        </li>
        <li><a href="services.shtml">Services</a>
                <ul>
                <li><a href="home.shtml">Home Organizing</a>
                        <ul>
                            <li><a href="closets.shtml">Closet Design & Organization</a></li>
                            <li><a href="memorabilia.shtml">Photos & Memorabilia</a></li>
                            <li><a href="http://www.simplesizing.com/index.html" target="_blank">Simplesizing</a></li>
                        </ul>
                </li>
                <li><a href="office.shtml">Office Organizing</a></li>
                <li><a href="relocation.shtml">Move Management</a>
                        <ul>
                        <li><a href="moving_packages.html">Moving Packages</a></li>
                        </ul>
                        </li>
                <li><a href="seniors.shtml">Senior Moves</a></li>
                <li><a href="business.shtml">Business Organizing</a></li>
                <li><a href="coaching.shtml">Coaching</a></li>
                <li><a href="education.shtml">Speaking</a></li>
                </ul>
                </li>
                <li><a href="photos.shtml">Photo Gallery</a>
                        <ul>
                        <li><a href="b4aft_home.shtml">Home Transformations</a></li>
                        <li><a href="b4aft_office.shtml">Office Transformations</a></li>
                        <li><a href="photos_earlyshow.shtml">CBS Early Show</a></li>
                        </ul>
                        </li>
                <li><a href="testimonials.shtml">Testimonials</a></li>
                <li><a href="resources.shtml">Resources</a>
                        <ul>
                        <li><a href="products.shtml">Organizing Products</a></li>
                        <li><a href="helpful_tips.html">Helpful Tips</a></li>
                        <li><a href="articles.shtml">How-to Articles</a></li>
                        <li><a href="recycling.shtml">Recycle Your Clutter</a></li>
                        <li><a href="donations.shtml">Donation Places</a></li>
                        </ul>
                        </li>
                <li><a href="http://www.cluttercoach.com/blog/">Blog</a></li>
                <li><a href="contact.shtml">Contact Us</a></li>
</ul><!-- #EndLibraryItem --></div>
  <div class="sidebar1"><!-- #BeginLibraryItem "/Library/social_media.lbi" -->

<h2 align="left"><img src="images/social_media/cc_social_media.png" alt="social media" style="border-style: none" width="250" height="100 usemap=" usemap="#MapMap"#Map"/>
      <map name="MapMap" id="MapMap">
        <area shape="rect" coords="172,9,245,95" href="http://www.angieslist.com/companylist/us/il/rolling-meadows/clutter-coach-company-reviews-2284946.htm" alt="Angie's List Super Service Award winner" title="Angie's List Super Service Award winner" />
        <area shape="rect" coords="138,49,164,74" href="http://pinterest.com/cluttercoach/" target="_blank" />
        <area shape="rect" coords="111,48,137,76" href="#https://plus.google.com/107131551359650759460" target="_blank" />
        <area shape="rect" coords="82,47,110,77" href="#http://www.youtube.com/user/ClutterCoachCo?feature=watch" target="_blank" />
        <area shape="rect" coords="55,48,79,75" href="http://www.linkedin.com/in/cluttercoach" target="_blank">
        <area shape="rect" coords="28,47,52,75" href="https://twitter.com/cluttercoach" target="_blank">
        <area shape="rect" coords="0,48,24,75" href="http://www.facebook.com/pages/Clutter-Coach/111735661075?ref=nf" target="_blank">
      </map></h2><!-- #EndLibraryItem --><!-- #BeginLibraryItem "/Library/call_jane.lbi" -->
    <div class="jane_pod"></div>
    <!-- #EndLibraryItem -->
<div class="pods">
  <div id="tv_logos">
        <div align="center"><img src="images/as_seen_on/nbc.png" width="150" height="62" alt="nbc" /></div>
      </div>
      <div id="tv_logos_middle">
        <div align="center"><img src="images/as_seen_on/cbs.png" width="150" height="34" alt="CBS" /></div>
      </div>
      <div id="tv_logos_middle">
        <div align="center"><img src="images/as_seen_on/hoarders.png" width="150" height="25" alt="Hoarders" /></div>
      </div>
      <div id="tv_logos_middle">
        <div align="center"><img src="images/as_seen_on/chicago_tribune.png" width="147" height="28" alt="Chicago Tribune" /></div>
      </div>
      <div id="tv_logos_middle">
        <div align="center"><img src="images/as_seen_on/daily_herlald.png" width="150" height="29" alt="Daily Herald" /></div>
      </div>
      <div id="tv_logos_bottom">
        <div align="center"><img src="images/as_seen_on/whitney.png" width="150" height="62" alt="nbc" /></div>
      </div>
 </div>
        <div class="pods">
          <h4>Jane and her team did a terrific job of triage: organizing, hand-holding and packing for our big downsizing move.  Although we were just moving within Chicago, things were so well wrapped and labeled I think we could have shipped the boxes to anywhere in Europe and found everything perfectly intact. With her assistance, we were able to feel comfortable with everything.<br />
            <br /><em>Claire<br />
 Chicago, Ill</em></h4>
        </div>



  </div>
  <div class="content"></div>...

score 0 · Accepted Answer

私は正しくないかもしれませんが、IE8では、終了</h5>タグがないことが問題だと思います

ビューのソースを確認してから、38行目を参照してください

<h5>Sign up for great organizing tips!<br />

これにより、後続のすべての要素が下に来る<h5>

F12を押すと、私が何を意味するかがわかります

css - IE8以下では、ナビゲーションが原因でサイトが正しく流れません。

1 に答える 1

Related

Reference