html - 見つからない CSS の問題

Question

Internet Explorer で自分の Web サイトをテストしているときに、この奇妙な問題が発生しました。問題が見つかりません....

問題は、私のcontent1divが奇妙な位置にあることです

HTML コード:

<?xml version="1.0"?>
<! DOCTYPE html PUPLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1/-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title> Start </title>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <link rel="stylesheet" type="text/css" href="styles.css" />
        <!--[if gte IE 6]>
        <link rel="stylesheet" type="text/css" href="nycss.css" />
        <![endif]-->
    </head>
<body>

<div id="main">
    <div id="banner">
    <div id='cssmenu'>
    <ul>
    <li class='active '><a href='#'><span>Hem</span></a></li>
       <li><a href='#'><span>Information</span></a></li>
       <li><a href='#'><span>Om oss</span></a></li>
       <li><a href='#'><span>Anmäla</span></a></li>
       <li><a href='#'><span>Partners</span></a></li>
    </ul>
    </div>
    </div>

    <div id="content1">
        <div id="background">
        </div>



        <div id="textoperation"><h1> Operation Pixel 19/02-13 </br>Folkets Hus i Karlshamn </h1></div>
        <div id="textinled">
            <p> Operation Pixel drivs av fem elever från JB Gymnasiet </br> i Karlshamn som ett projekt arbete. Vi som står för lanet </br> är Adam Erlandsson, Isak Risberg Jönsson, Jonatan Tjärnberg, </br>Victor Johansson och Lucas Mattsson.</p>
            <p> Lanet kostar 200 kr och vara mellan 2013.02.19-2013-02.21. </br> Du kan även förhandsboka och betala 150 kr istället.</br> Klicka på <a href="#"> Anmäla </a> för att boka din plats. </p>
        </div>
        <div id="video">
            <iframe width="410" height="280" src="http://www.youtube.com/embed/qP40Liau6z4" frameborder="0" allowfullscreen></iframe>
        </div>

        <div id="mitten"></div>
        <div id="nyheter">
            <div id="nyhettext"><h2> Nyheter </h2></div>
            <div id="underline"></div>
            <div id="nyhet">
            <h4>Hemsidan är på gång nu</h4><p>Adam Erlandsson håller just nu på att utveckla Operation Pixelshemsida. Hemsidan kommer vara klart inom 1-2 veckor.</br> Mer information kommer inom kort.</p> 
            <h4> Datum och lokal är bestämd </h4><p> Vi har nu hittat en lokal (folkets hus) och datumet är </br> satt mellan  19/02-13 21/02-13. Lorem ipsum dolor sit amet, consectetur </br>adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </br></br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate. </p>
            <h4> Projekt arbete </h4> <p>ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem ap
            eriam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </br></br> Nemo enim ipsam voluptatem quia volup
            tas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
            </br></br></br><h3><a href="#" class="nyhetlänk"> Läs alla nyheter </a></h3>
        </div>
        </div>

        <div id="fb">
            <a href="#"><img src="images/fb.png" /></a>
        </div>
        <div id="twitter">
            <a href="#"><img src="images/twitter.png" /> </a>
        </div>

    </div>
    <div id="content2">
    <div id="textcontent">
        <div id="test"><a href="#"> Hem </a> </br></div>
        <div id="test"><a href="#"> Information </a> </br></div>
        <div id="test"><a href="#"> Om Oss </a> </br></div>
        <div id="test"><a href="#"> Anmäla </a> </br></div>
        <div id="test"><a href="#"> Partners </a></div>
    </div>
    <div id="kodad">
        <p> Code by Adam Erlandsson. Design by Adam Erlandsson & Victor Johansson </p>
    </div>
    <div id="copy">
        <p> © 2012 Operation Pixel </p>
    </div>

</div>
</div>
</body>
</html>

CSS:

body{
    background-image: url(images/bakgrund.png);
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    width: 100%;
    text-align: center;
}


#fb{
   height: 44px;
   width: 45px;
    margin-top: 510px;
    margin-left: 835px;
    position: absolute;
}



#nyheter{
    position: absolute;
    width: 460px;
    height: 210px;
    margin-top: 30px;
    margin-left: 500px;
}

#nyheter a{
    color: white;
    text-decoration: underline;
}

.nyhetlänk{
    margin-top: 30px;
    position: absolute;
}

#nyheter a:hover{
    color: #c4c4c4;
}

h4{
    font-size: 20px;
    color: white;

}

#nyheter p{
    margin-top: -18px;
    font-size: x-small;
}

h3{
    font-weight: 800;
    font-size: 20px;
}


h2{
    color: white;
    font-family: "Bebas Neue";
    font-weight: 400;
    font-size: 50px;
    position: absolute;
}

#twitter{
   height: 44px;
   width: 45px;
    margin-top: 510px;
    margin-left: 895px;
    color: black;
    position: absolute;
}

#banner{
    height: 180px;
    width: 1000px;
    background-image: url(banner.png);
    background-repeat: no-repeat;
    border: thin ridge #3a3a3a;
    text-align: left;
    margin: auto;
}


#content1{
    width: 1000px;
    height: 610px;
    color: white;
    font-family: Makisupa;
    z-index: 1;
    border: thin ridge #3a3a3a;
    background-color: black;
    text-align: left;
    margin: auto;
}

#content2{
    width: 1000px;
    height: 100px;
    color: #a8a8a8;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    border: thin ridge #3a3a3a;
    background-color: black;
    text-align: left;
    margin-top: 5px;
}


#textcontent{
    margin-left: 10px;
    margin-top: 10px;
    font-size: x-small;

}


#copy{
    margin-left: 850px;
    margin-top: 70px;
    position: absolute;
    font-size: x-small;
}

#kodad{
    margin-left: 320px;
    position: absolute;
    margin-top: 75px;
    font-size: xx-small;
}

a{
    text-decoration: none;
    color: #a8a8a8;
}

a:hover{
    color: white;
}

#textoperation{
    margin-top: 15px;
    margin-left: 20px;
}

#nyhet{
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    color: #bfbfbf;
    margin-left: 10px;
    margin-top: 40px; 
}

#huvudtext{
    margin-top: -10px;
}

#rubrik h3{
    font-size: 15px;
    font-weight: 400;
}

#textinled{
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    color: #bfbfbf;
    font-size: x-small;
    margin-left: 20px;
    margin-top: 130px;
}

#textinled a{
    color: white;
}

#textinled a:hover{
    color: #bfbfbf;
}

#video{
    position: absolute;
    margin-left: 20px;
    margin-top: 290px;
}

h2{
    color: white;
    font-family: "Bebas Neue";
    font-weight: 400;
    font-size: 40px;
    position: absolute;
}

#nyhettext{
    position: absolute;
    margin-top: -23px;
    margin-left: 10px;
}

#huvudtext{

}

#underline{
   background-color: #3a3a3a;
    position: absolute;
    margin-top: 20px;
    margin-left: 10px;
    /* position: absolute; */
    width: 450px;
    height: 3px;
    font-size: 1px;
}

#mitten{
    position: absolute;
    height: 560px;
    width: 3;
    background-color: #3a3a3a;
    margin-top: 10px;
    margin-left: 470px; 
    text-align: center;
}

h1{
    color: white;
    font-family: "Bebas Neue";
    font-weight: 400;
    font-size: 50px;
    position: absolute;
}

#cssmenu{
    margin-top: 170px;
}

#cssmenu ul
{
    margin: 0;
    padding:0;
    list-style-type:none;
    width:auto;
    position:relative;
    display:block;
    height:30px;
    font-size:12px;
    font-weight:bold;
    background:transparent url(images/nav_bg.png) repeat-x top left;
    font-family:Arial, Helvetica, sans-serif;
    border-bottom:1px solid #000000;
    border-top:1px solid #000000;
}

#cssmenu li
{
    display:block;
    float:left;
    margin:0;
    padding:0;
}

#cssmenu li a
{
    display:block;
    float:left;
    color: white;
    text-decoration:none;
    font-weight:bold;
    padding:8px 20px 0 20px;
}

#cssmenu li a:hover
{   
    color: #c4c4c4;
    height:22px;
    background:transparent url(images/nav_bg.png) 0px -30px no-repeat;      
}


#cssmenu li.active a
{
    display:inline;
    height:22px;
    background:transparent url(images/nav_bg.png) 0px -30px no-repeat;  
    float:left;
    margin:0;
}

score 0 · Accepted Answer

すみません、写真のリンクを貼り忘れました…。

http://img132.imageshack.us/img132/426/bugk.png

http://img259.imageshack.us/img259/6586/bugg1t.png

の幅はと#content1同じです#banner#content2

#content1おかしなことをしている者です。

html - 見つからない CSS の問題

1 に答える 1

Related

Reference