-3

Web ページに問題があります。Internet Explorer 以外のブラウザでは正常に表示されます。Mozilla Firefox、Opera、Safari、Torch、および Internet Explorer ブラウザでテストしました。私は自分の CSS で間違いを犯していることを知っています。誰かが私を助けてくれます。

HTML:

<html>
    <head>
        <meta http-equiv='content-type' content='text/html; charset=utf-8' />
        <title>|| My Page Tittle ||</title>
        <link href='style.css' rel='stylesheet' type='text/css'  />
    </head> 
    <body>
        <div id='container'>
            <div id='header'>
                My Header here
            </div>
            <div id='menu'>
                <ul>
                    <li><a href='#'>My MENU1</a></li>
                    <li><a href='#'>my MENU2</a></li>
                    <li><a href='#'>my MENU3</a></li>
                    <li><a href='#'>my MENU4</a></li>
                </ul>
            </div>                  
            <div id='content'>                          
                <div id='left'>                 
                    <h3>My Header</h3>
                    <p>My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph
                    My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph
                    My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph My paragraph</p>
                </div>
                <div id='right'>
                    <p>Some Stuff will come Here Some Stuff will come Here Some Stuff will come Here</p>
                </div>                              
            </div>                  
            <div id='footer'>
                <p>And Finally the footer</p>
            </div>
        </div>
    </body>
</html>

CSS:

body {
    background: #C89D38;
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    padding: 15px;
    font-size: 12px;    
    margin: 0px;
}

#container {
    position: relative;
    width: 900px;
    margin: auto;
    text-align: left;
}

#header {
    width: 900px;
    height: 100px;  
    background: #FFFFFF;
    margin: auto;
}

#menu {
    width: 900px;
    margin: auto;
    color: #FFFFFF;
    background: #303030;
    padding: 10px 0px 10px 0px;
    font-size: 14px;
}

#menu ul{
    margin: 0px;
    padding: 0px;
    list-style: none;
    text-align: center;

}

#menu li {
    display: inline;
    text-align: center;
}

#menu a{
    padding: 4px 30px 10px 30px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    color: #FFFFFF;
    height: 30px;
}

#menu a:hover {
    background-color: #C89D38;
    color: #303030;
}

#content {
    width: 820px;
    min-height: 350px;
    margin: auto;
    float: left;
    padding: 40px;
    background: #FFFFFF;
    border-top: 15px solid #C89D38;
}

#left{
    float: left;
    width: 590px;
    min-height: 350px;
    background-color: #EBE8F4;
    margin: 10px 0px;
    padding: 10px;
}

#right{
    float: right;
    width: 175px;
    min-height: 350px;
    background-color: #EBE8F4;
    margin: 10px 0px;
    padding: 10px;
}

#footer{
    width: 900px;
    height: 50px;
    margin: auto;
    padding: 0px;
    background: #FFFFFF;
    border-top: 15px solid #C89D38;
    clear: both;
}

#footer p {
    margin: 0px;
    padding: 20px 0px 20px 0px;
    color: #000000;
    text-align:center;  
}
4

1 に答える 1