Expanding Box Problem

nieselfriem · 27 April 2011

Ich habe unten stehendes Design mit im IE6 angeschaut. Dort wird es offenbar wegen des Expanding-Box Problems nicht richtig dar gestellt. Ich habe es versucht mittel

Code:

 overflow:hidden

oder

Code:

 word-wrap:break-word

in der Klasse Sidebar zu fixen. Das klapp aber nicht wie ich mir das vorstellte. Was kann ich da machen?

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
    <head>
        <title>
        </title>
        <link rel="stylesheet" type="text/css" href="css/basic.css" media="screen"/>
		<!--[if IE]>
 <style type="text/css">
  body {overflow: hidden;}
   </style>
<![endif]-->
    </head>
    <body>
        <div id="wrap">
            <div id="header">
            </div>
            <div id="sidebar">
                <div id="sidebarpic">
                </div>
                    <div id="sidebarlist">
                    <ul id="navigation">
                        <li>
                            <a href="index.html" title="Zur&uuml;ck zur Hauptseite" class="sidemenu">Start</a>
                        </li>
                        <li >
                            <a href="anmeldung.html" title="Zur laufseite" class="sidemenu">Anmeldung</a>
                        </li>
                        <li >
                            <a href="agb.html" title="Zur den AGBs" class="sidemenu">AGBs</a>
                        </li>
                    </ul>
                </div>
				<div id="sidebarcolor">
                </div>
            </div>
            <div id="content">
                <div id="centerpic">
                </div>
                <div id="centertext">
                    <div>
                        <h1>Joggen ohne Ende</h1>
                        <p>
                            Tetempus, magna et pellentesque condimentum, neque mi ultrices turpis, quis varius enim urna at metus. Nulla.
                        </p>
                    </div>
                </div>
            </div>
            <div id="footer">
			    <ul>
                     <li><a href="index.html" class="footermenu">Home</a></li>
                    <li><a href="impressum.html" class="footermenu">Impressum</a></li>
                    <li><a href="kontakt.html" class="footermenu">Kontakt</a></li>
                </ul>
            </div>
        </div><!--End Wrap -->
        <!-- Insert HTML here -->
    </body>
</html>

das Css:

Code:

body {
    font-size: 85%;
    font-family: 'Trebuchet MS', Verdana, Arial, Sans-Serif;
    text-align: center;
    background-image:url("hin1.jpg");
}

#wrap {
    width: 900px;
    margin: 0 auto;
    text-align: left;
    border-left: 1px solid #999;
    text-align:left;
}

#header {
    float: left;
    width: 900px;
    height: 50px;
    text-align:right;
    /* border: 1px solid #999;
   border-top: 1px solid #999;*/

#footer {
    float: left;
    width: 900px;
    height: 22px;
    text-align:left;
	font-size: 8pt;
    margin:0px;
    padding-left: 150px;
    background:#2f4f4e;
}

#content {
    float: left;
    height: 460px;
    width: 745px;
}

#sidebar {
    float: left;
    height: 460px;
    width: 150px;
    text-align:left;
  
    /*border-left: 1px solid #999;*/
    padding: 0px;
	word-wrap: break-word;
	overflow:hidden;
}

#centerpic {
    width:742px;
    height:210px;
     /* border:  5px solid lightgrey;*/
    border-left:  5px solid lightgrey;
    border-right:  5px solid lightgrey;
    border-top:  5px solid lightgrey;
    background-image:url("header.jpg");
    border-bottom: 3px solid #2f4f4e;
}

#centertext {
    width:745px;
    height:232px;
    background: white;
    padding:1px;
    overflow:auto;
    border-bottom: 5px solid lightgrey;
    border-left: 5px solid lightgrey;
}

#sidebarpic {
    width: 150px;
    height: 45px;
    /*background: blue;*/
    background-image:url("joggenlogo2.jpg");
    /*border-bottom: 5px solid lightgrey;*/
}

#sidebarlist{
    width: 148px;
    height: 171px;
    background: white;
    padding:1px;
    /*border-bottom: 5px solid lightgrey;*/
  	word-wrap: break-word;
}

#sidebarcolor{
    width: 150px;
    height: 25px;
    background: #2f4f4e;
    /*border-bottom: 5px solid lightgrey;*/
    text-align: left;
    padding-left: -36px;
}

#navigation  {
    list-style-type: none;
    text-align: right;
    margin-left: -50px;
}

h1, h2, h3, h4, h5, h6 {
    margin: 20px;
}

h1 {
    text-align:center;
}

p {
    margin: 15px 20px;
}

#footer ul {
    list-style-type: none;
    margin:0px;
    padding: 0px;  
}

#footer ul li {
    display: inline;
}

a.sidemenu:link, a.sidemenu:visited {
    color: #666666;
    text-decoration: none;
    /*background-color:grey;*/
    width:144px;
  
    display: block;
    padding:2px;
    margin-bottom:5px;
    text-align: right;
}

a.sidemenu:hover, a.sidemenu:active, a.sidemenu:focus {
    color: lightblue;
    text-decoration: none;
}

a.footermenu:link, a.footermenu:visited {
    color: white;
    text-decoration: none;
}

a.footermenu:hover, a.footermenu:active, a.footermenu:focus {
    color: lightblue;
    text-decoration: none;
}

Ich hoffe das lange Listing schreckt nicht ab. Gruß niesel

Expanding Box Problem

nieselfriem

Mitglied

Neueste Beiträge