✔ IE <8 verschiebt Menü

1

123arne

Mitglied
Hallo,

ich hab ein Layout mit mehreren verschachtelten div , basierend auf contenido.
In einem der div ist ein horizontales menü (navigation_oben), realisiert durch eine liste. Leider verschieben die IE kleiner als Nummer 8 die komplette menüleiste oben. weiß jemand hier eine Lösung, und gibt es eine elegantere Methode die Menüleiste unten im div zu platzieren?
Anbei mal die HTML und die css-Datei.

Gruß Arne

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
    <head>
<base href="http://www.penzel-dachsysteme.de/contenido/cms/" />
                <link rel="stylesheet" href="css/referenzen.css" type="text/css" media="all" />
                    <script type="text/javascript" src="js/referenzen.js"></script>
        <title>Contenido - Unternehmen - Willkommen auf der Homepage der Penzel Dachsysteme GmbH</title>
        <link rel="stylesheet" href="css/contenido_sample.css" type="text/css" media="all" />
        <link rel="shortcut icon" href="favicon.ico" />
                <!--[if lte IE 6]>
            <style type="text/css">
                .clearfix {height:1px;}
            </style>
        <![endif]-->
    <meta name="generator" content="CMS Contenido 4.8.12" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<meta name="keywords" content="unternehmen, durch" />
<meta name="description" content="Willkommen auf der Homepage der Penzel Dachsysteme GmbH" />
<meta name="date" content="2009-07-13 20:41:38" />
<meta name="author" content="Systemadministrator" />

</head>
    <body>
<div id="page">
        <div id="outerContainer">
            
            <div id="head">            
                <div id="logo">
                    <img src="http://www.tutorials.de/forum/images/penzel_logo.png" width="177" height="106" />
                </div>
                <div id="navigation_oben" class="clearfix">
                    <ul><li><a class="active" target="_self" href="front_content.php?idcat=2">Unternehmen</a></li><li><a target="_self" href="front_content.php?idcat=12">Leistungen</a></li><li><a target="_self" href="front_content.php?idcat=39">Referenzen</a></li><li><a target="_self" href="front_content.php?idcat=11">Kontakt</a></li></ul>
                </div>
            </div>

            <div id="contentContainer" class="clearfix">
                <div id="navigation">
                    <p>
                      <ul><li class="navfirstoff"><a target="_self" href="front_content.php?idcat=35">Zahlen und Fakten</a></li><li class="navfirstoff"><a target="_self" href="front_content.php?idcat=36">Personal</a></li><li class="navfirstoff"><a target="_self" href="front_content.php?idcat=37">Stellenangebote</a></li><li class="navfirstoff"><a target="_self" href="front_content.php?idcat=38">techn. Ausrüstung</a></li></ul>

                                          <div id="search">
                        <form action="front_content.php?idcat=32&amp;idart=37" method="post">
                            <h2 for="searchterm">Suche</h2>
                            <input type="text" id="searchterm" name="searchterm" class="input_text" />
                            <!-- <input type="image" id="search_send" name="search_send" src="http://www.tutorials.de/forum/images/navi_pfeil_zu.gif" class="sbmt" /> -->
                            <input type="submit" id="search_send" name="search_send" class="sbmt" />
                        </form>
                    </div>
                    </p>

                    <div id="logo_top">
                       <img src="http://www.tutorials.de/forum/images/holzfenster_oben.gif"  />
                    </div>

              </div>
                <div id="whiteBg">
                    <div id="content">
                        <h1>Willkommen auf der Homepage der Penzel Dachsysteme GmbH</h1>
                        
                        <div class="textItem">
    <p><img style="float: left; margin-left: 5px; margin-right: 5px;" title="Firmengeb&auml;ude" alt="Firmengeb&auml;ude" src="upload/images_content/unternehmen/image_00004.jpg" width="300" /></p>
<p style="text-align: justify;">Die Penzel Dachsysteme GmbH ist ein&nbsp;
erfahrenes und leistungsstarkes Unternehmen auf dem Gebiet der
Dachabdichtungen und der Dachdeckungen mit Firmensitz in B&uuml;tzow.</p>
<p style="text-align: justify;">Durch
die Verarbeitung hochwertiger Materialien und durch die st&auml;ndige&nbsp;
Weiterbildung unserer Mitarbeiter sorgen wir f&uuml;r eine qualit&auml;ts- und
termingerechte Realisierung Ihrer Auftr&auml;ge.</p>
<p>
          Unser Unternehmen ber&auml;t Sie individuell, pr&uuml;ft die &ouml;rtlichen Gegebenheiten und zeigt Ihnen Alternativen auf.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
                        
                        
                        
                        
                        
                        
                        
                        <img src="http://www.tutorials.de/forum/images/hr_article.gif" alt="" class="hr" />
                    </div>
                    <div id="teasersRight">
                        
                    </div>
                </div>
            </div>
            
        </div> <!-- /outerContainer -->
        
        <div id="footer">
            <div id="footerContainer">
                <a id="logoBottom" href="http://www.penzel-dachsysteme.de/" title="Zur Startseite"><img src="http://www.tutorials.de/forum/images/holzfenster_unten.gif" alt="Holzfenster" /></a>
                <div id="footerContentContainer" class="clearfix">
                    <div id="footerContentLeft">
                                                    <ul id="metaNavigation">
                                
                                <li><a href="front_content.php?idcat=24" title="Datenschutz">Datenschutz</a></li>

                                <li><a href="front_content.php?idcat=25" title="Impressum">Impressum</a></li>
                                <li><a href="front_content.php?idcat=26" title="Sitemap">Sitemap</a></li>

                                <li><a href="front_content.php?idcat=54" title="___">___</a></li>

                            </ul>
                        <strong>&copy; 2009 <a href="http://www.penzel-dachsysteme.de" title="penzel-dachsysteme">penzel-dachsysteme</a></strong>

                    </div>
                   
                </div>

            </div>
        </div>

</div>
    </body>

</html>
PHP: 
/**
 * CSS styles for Contenido sample client.
 * 
 * @author Rudi Bieller
 * @copyright four for business AG <www.4fb.de>
 * @version 1.0.0
 * 
 * created 2008-03-04
 */

/* ----------------- general html structure */
html, body, div, p, td, a, input, textarea, select {
    font:normal normal normal small sans-serif;
    font-family:sans-serif, Verdana, Arial ;
    color:#000000;
}
html, body {
    margin:0;
    padding:0;
    /*overflow:auto;*/
}
html {
    background-image:url('../images/pattern_contenido.gif');
    background-position:0 140px;
    height:100%;
}
body {
    background-image:url(../images/bg.gif);
    background-repeat:repeat-y;
    background-position:right;
    height:70%;
}
form {
    margin:0;
    padding:0;
}

textarea {
    width:418px;
    height:85px;
}

img {
    border:0;
}
/* /----------------- general html structure */

/* ###################################################### */
/* ####################### HEADER ####################### */
/* ###################################################### */

#head {
}

#logo {
    float:left;
    background-color:#FFFFFF;
    width:240px;
    height:120px;
    text-align:center;
    vertical-align:bottom;
/*    border-right:#FF0000 thin solid ;*/

}

/* Navigation Oben */

#navigation_oben {
    background-image:url('../images/hg_oben.gif');
    padding:0px;
    border-left:#FF0000 1px solid ;
    height:120px;

}

#navigation_oben ul {
    list-style-type:none;
    position:absolute;
    top:86px;
    display:block;
    margin-left:240px;
    padding:0px;
    background: #91A4A4;
    height:20px;
    padding-left:15px;
    width:705px;
}


#navigation_oben li {
    background:transparent;    
    float: left;
}

#navigation_oben li a {
   display:block;
   width:148px;
   padding:2px 0px 2px 0px;
   text-decoration:none;
   text-align:center;
   background:url(../images/menue_norm1.gif) no-repeat;
   color:#446A68;
   margin:0px -15px 0px 0px;
   background-attachment: scroll;
   background-position: 0% 0%;   
}

#navigation_oben li a:hover {
   background:url(../images/menue_oflow1.gif) no-repeat;
}

#navigation_oben li a.active {
   background:url(../images/menue_akt1.gif) no-repeat;
}

/* ###################################################### */
/* ####################### MAIN BODY #################### */
/* ###################################################### */
#outerContainer {
    /*background-image:url('../images/pattern_contenido.gif');*/
    min-height:100%;
    width:960px;
    margin:auto;
    margin-right:0px;
}

* html #outerContainer {
    height:90%;
}
#contentContainer {
    width:960px;
position: relative;
margin: 0 auto;

height: 100%;
min-height: 100%;
height: auto !important;

background: url(3cols.png) repeat-y;
border-left: 1px solid #b8b8b8;
border-right: 1px solid #b8b8b8;

}

#outerContainer, #contentContainer {
    padding:0;
}

/*#whiteBg {
    float:left;
    background-color:#fff;
    padding:0;
    margin:0;
    height:100%;
}
*/
#navigation, #content, #teasersRight {
    float:left;
    padding-top:30px;
}
#outerContainer #contentContainer #content {
    padding-top:30px;
}

#content, #teasersRight {
    background-color:#fff;
}

#contentContainer #navigation {
    width:240px;
    background-color:transparent;
    border-left:#FFFFFF;

}

#contentContainer #content {
    width:530px;
    padding:0 30px;
    margin:0;
/*    border-left:#003300 1px solid;*/
}

#contentContainer #teasersRight {
    width:130px;
}


/* ###################################################### */
/* ####################### NAVIGATION ################### */
/* ###################################################### */

/* Level 1 */
/*
#navigation ul {
    width:230px;
    margin:0;
    padding:0;
    background-color:transparent;
}
#navigation ul li {
    width:220px;
    margin:0;
    padding:0 0 0 10px;
    list-style-type:none;
}
#navigation ul li a {
    display:block;
    width:220px;
    height:19px;
    line-height:19px;
    margin:0;
    padding:0 0 0 10px;
    font-size:11px;
    color:#666;
    background-image:url(../images/navi_pfeil_zu.gif);
    background-repeat:no-repeat;
    background-position:210px 3px;
    border-bottom:1px solid #ccc;
    text-decoration:none;
}
#navigation ul li a:hover, #navigation ul li.active a {
    background-image:url(../images/navi_over.gif);
    background-repeat:no-repeat;
    background-position:0 0;
    color:#fff;
}
*/
/* Level 2 */
/*
#navigation ul.subNavigation {
    width:210px;
    margin:0;
    padding:0;
}
#navigation ul.subNavigation li a {
    background-image:url(../images/subnavi_pfeil_zu.gif);
    background-repeat:no-repeat;
    background-position:199px 8px;
    border-bottom:1px dotted #ccc;
    color:#666;
    width:210px;
}
#navigation ul.subNavigation li.active a {
    color:#fff;
}
#navigation ul.subNavigation li a:hover, #navigation ul.subNavigation li.active a {
    background-image:url(../images/subnavi_over.gif);
    background-repeat:no-repeat;
    background-position:0 0;
}

*/


/* splitted Navigation level 2 */
#navigation li {
   padding:0px 0px 0px 13px;
   list-style:outside url(../images/li_pfeil_ol.gif);
}

#navigation li.navfirstoff {
   margin:3px;
}

#navigation li.navfirstopen {
   margin:3px;
   background:#BECBCB;
   color:#000000;
}
#navigation li.navfirstopen a {
    color:#000000;
}

#navigation a {
    text-decoration: none;
font-family: sans-serif;
font-style: normal;
font-variant: normal;
font-weight: bolder;
font-size: small;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
-x-system-font: none;
}
#navigation a.navfirstoff{
   color:#446A68;
   font-weight:bolder;
   padding:0px 3px;
}

#navigation a.navfirstoff:hover{
   color:#446A68;
}

#navigation a.navfirstopen{
   color:#000000;
   font-weight:bolder;
   padding:0px 3px;
}


/* Level 3 */
#navigation ul.subSubNavigation {
    width:200px;
    margin:0;
    padding:0;
}
#navigation ul.subNavigation li ul.subSubNavigation li a {
    background-image:none;
    border-bottom:0;
    color:#666;
    width:200px;
}
#navigation ul.subNavigation li ul.subSubNavigation li a:hover, #navigation ul.subNavigation li ul.subSubNavigation li.active a {
    background-image:url(../images/subsubnavi_over.gif);
    background-repeat:no-repeat;
    background-position:0 0;
}

/* ###################################################### */
/* ####################### SEARCH INPUT ################# */
/* ###################################################### */
#search {
    margin:20px 0 0 20px;
    border:1px solid #d6e0e0;
    width:145px;
    background-color:transparent;
}
#search.text {
   border:1px solid #735942;
   background:#D6E0E0;
   width:98%;
}
#search label {
    font-size:11px;
    display:block;
    float:left;
    width:42px;
    padding:2px 0 0 0;
}
#search .input_text {
   border:1px solid #735942;
   background:#D6E0E0;
   width:98%;
   margin:3px 0px;
/*   
    border:1px solid #ccc;
    width:140px;
    height:12px;
    font-size:10px;    */
}

#search input.sbmt {
   border:1px solid #336666;
   background:#99B2B2;
   filter:progid:DXImageTransform.Microsoft.Gradient( endColorstr='#99B2B2', startColorstr='#ADC1C1', gradientType='0');
}/*    border:0;
    width:5px;
    height:8px;
    margin:0 0 0 10px;
}*/
/* ###################################################### */
/* ####################### SEARCH OUTPUT ################ */
/* ###################################################### */
#searchResults {
    margin:0 0 10px 0;
}
#searchResults p.message {
    margin:20px 0 30px 0;
}
#searchResults div.searchResultItem {
    border-bottom:1px solid #ccc;
    margin:0 0 10px 0;
    padding:0 0 10px 0;
}
#searchResults div.searchResultItem h2 {
    font-size:14px;
    margin:0 0 5px 0;
    padding:0;
    color:#0060b1;
    font-style:normal;
}

/* ###################################################### */
/* ####################### Fenster unten ################ */
/* ###################################################### */

#logo_top {
    margin:auto;
    margin-bottom:0px;
}

/* ###################################################### */
/* ####################### MAIN CONTENT ################# */
/* ###################################################### */
#content {
    font-size:11px;
    color:#333;
    line-height:14px;
}

/*
#content h1, #content h2 {
    margin:0 0 10px 0;
    padding:0;
    font-size:20px;
    font-weight:normal;
    color:#333;
}

/*#content h1 {
    line-height:22px;
}
*/
#content h1 {
   margin:0px 0px 3px 0px;
   page-break-after:avoid;
   font-size:14px;
   font-weight:bolder;
   height:18px;
   color:#735942;
   border-bottom:3px solid #336666;
   padding:1px 3px;
}

#content h1 a {
    color:#0060b1;
    text-decoration:none;
}

#content h2, #search h2 {
   margin:0px 0px 3px 0px;
   page-break-after:avoid;
   font-size:100%;
   font-weight:bolder;
   color:#735942;
   border-bottom:3px double #336666;
   padding:1px 3px;
}

img.hr {
    display:block;
    margin:10px 0;
    padding:0;
}

/* ###################################################### */
/* ####################### RIGHT COLUMN ################# */
/* ###################################################### */
#teasersRight .teaserItem {
    color:#333;
    font-size:11px;
}
#teasersRight .teaserItem h3 {
    color:#0060b1;
    font-size:14px;
    margin:0 0 5px 0;
    font-weight:normal;
}

#teasersRight .teaserItem a.more {
    display:block;
    width:230px;
    margin:10px 0;
    padding:0 0 0 15px;
    background-image:url(../images/link_pfeil_klein.gif);
    background-repeat:no-repeat;
    background-position:0 5px;
}
* html #teasersRight .teaserItem a.more {
    width:200px;
}

/* ###################################################### */
/* ####################### FOOTER ####################### */
/* ###################################################### */
#footer {
    /*width:100%;*/
    height:104px;
    font-size:11px;
    background-image:url(../images/streifen_hg_unten.gif);
    background-color:#ccc;
    overflow:hidden;
    background-repeat:repeat-x;
}
#footerContainer {
    width:960px;
    margin-right:0px;
    margin-left:auto;
    margin-bottom:auto;
    margin-top:auto;
}
#footer a#logoBottom {
    display:block;
    float:left;
    position:relative;
    top:0px;
    z-index:2;
    overflow:visible;
}

#footer #footerContentContainer {
    float:left;
    background-color:transparent;
    width:720px;
    height:104px;
    margin-right: 0px;
    margin-left: auto;
}
#footerContentLeft, #footerContentRight {
    float:left;
    color:#999;
}
#footerContentLeft {
    width:450px;
    margin:10px 0 0 30px;
    font-size:10px;
    padding-right:10px;
}
* html #footerContentLeft {
    margin-left:15px; /* hae? */
}
#footerContentRight {
    width:220px;
    font-size:11px;
    background-color:#F9FBDD;
    padding-left:10px;
    height:104px;
}
* html #footerContentRight {
    padding-top:10px;
}

#footerContentRight h3 {
    font-size:11px;
}

#footerContentRight input {
    width:150px;
    height:12px;
    border:1px solid #ccc;
    font-size:10px;
    margin:0 0 4px 0;
}
* html #footerContentRight input {
    width:142px;
}

#footerContentRight label {
    display:block;
    width:60px;
    float:left;
    margin:0 0 4px 0;
}

#footer input#loginBtn {
    background-color:#F9FBDD;
    border:0;
    color:#0060b1;
    padding:0 20px 0 0;
    background-image:url(../images/link_pfeil_klein.gif);
    background-repeat:no-repeat;
    background-position:right 6px;
    font-size:12px;
    width:auto;
    height:auto;
    float:right;
    margin:0 10px 0 0;
}
* html #footer input#loginBtn {
    margin:0 14px 0 0;
}

ul#metaNavigation {
    margin:0 0 20px 0;
    padding:0;
}
ul#metaNavigation li {
    margin:0;
    padding:0 1px 0 8px;
    display:inline;
    border-left:1px solid #D7D7D6;
}

#logoutText {
    position:relative;
    height:70px;
}
#logoutText a {
    position:absolute;
    right:10px;
    bottom:10px;
    text-decoration:none;
}

/* ###################################################### */
/* ####################### LINKS ######################## */
/* ###################################################### */
a {
    color: #446a68;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}

/* ###################################################### */
/* ####################### CONTACT FORM ############'#### */
/* ###################################################### */
#contactForm {
    font-size:11px;
}
#contactForm .contactRow {
    margin:4px 0;
}
#contactForm label {
    display:block;
    float:left;
    width:80px;
}
#contactForm .contactRow input, #contactForm .contactRow textarea {
    border:1px solid #ccc;
    width:346px;
}
#contactForm .contactRow select {
    border:1px solid #ccc;
    width:172px;
}
* html #contactForm .contactRow input, * html #contactForm .contactRow textarea {
    width:343px;
}

#contactForm .contactRow input {
    height:14px;
}

#contactForm .contactRow textarea {
    height:105px;
    font-size:10px;
}

#contactFormSubmit #contactFormSubmitLeft {
    float:left;
    margin:0 0 0 80px;
    width:174px;
}
* html #contactFormSubmit #contactFormSubmitLeft {
    margin:0 0 0 26px;
}
#contactFormSubmit #contactFormSubmitRight {
    float:right;
    width:174px;
}

#contactFormSubmit #contactFormSubmitLeft input, 
#contactFormSubmit #contactFormSubmitRight input {
    background-color:#fff;
    border:0;
    color:#0060b1;
    padding:0 20px 0 0;
    background-image:url(../images/link_pfeil.gif);
    background-repeat:no-repeat;
    background-position:right 4px;
    font-size:10px;
    width:auto;
    height:auto;
    float:right;
    margin:0;
}
#contactFormSubmit #contactFormSubmitLeft input {
    background-image:none;
    padding:0;
    float:left;
}

#contactForm table {
    width:100%;border-collapse:collapse;
}
#contactForm table td {
    padding:0;
}
#contactForm table td.pt {
    padding-top:2px;
}
* html #contactForm table td.pt {
    padding-top:0;
}
/* ###################################################### */
/* ####################### BACKEND STYLES ############### */
/* ###################################################### */
#modHeaderImgEdit {
    position:absolute;
    top:60px;
    left:270px;
}


/* good old clearfix - remember to use conditional comment for ie6 with .clearfix {height:1px;} */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */



/**** IMAGE GALLERY ****/
table.gallery {
    margin: 20px 10px 0px 0px;
    width: 410px;
}

table.gallery td.gallery-navigation {
    /*font-size: 0.6875em;*/    
}

table.gallery tr.thumbnails td {
    padding: 0;
}

table.gallery dd {
}

div.download {
    padding: 3px 0 3px 10px;
    background: url(../images/link_pfeil_klein.gif) no-repeat 0px 7px;

}

div.downloadImg {

    padding: 0;
    margin-top:10px;
    background: url(../images/navi_pfeil_rechts.gif) no-repeat 10px 7px;
}

dl.gallery-detail {
    margin: 20px 10px 0px 0px;
}

dl.gallery-detail dt {
    text-align: left;
    padding: 0;
}


td.gallery_image{
    height: 220px;
    padding:0px;
    
}
td.gallery_image div.link_image{
    padding:0;  
    background-position:top center; 
    min-height:120px; 
    margin-bottom:5px; 
    overflow:hidden;
}
td.gallery_image .bottom_links{
     height:40px; margin-top:10px;
}
td.gallery_image .bottom_links{
    margin-bottom: 0px; 
    text-align:left; 
    width:180px; 
}
td.gallery_image .links{
    margin-bottom: 0px;
}


/**
 * CSS styles for Contenido Sitemap.
 * 
 * @author Frederic Schneider
 * @copyright four for business AG <www.4fb.de>
 * @version 0.1.0
 * 
 * created 2008-04-11
 */

.sitemap, .sitemap ul {
        margin-left:0;
        padding-left: 0;
}

.sitemap li {
    border-bottom: 1px solid #ffffff;
    list-style-type: none;
}

.sitemap .level1 {
        background-color: #e6f1fb;
        padding: 3px 3px 3px 10px;
}

.sitemap .level2 {
        background-color: #f4f9fd;
        padding: 3px 3px 3px 30px;
}

.sitemap .level3 {
        background-color: #ffffff;
        padding: 3px 3px 3px 50px;
}

/* Only for IE */
*+html .sitemap .list2, * html .sitemap .list2 {
        margin-top: -14px;
}
 
Moin,

mach es mal so:
Code: 
#navigation_oben {
    background-image:url('../images/hg_oben.gif');
    padding:0px;
    border-left:#FF0000 1px solid;
    height:120px;
    margin-left:240px;

}

#navigation_oben ul {
    list-style-type:none;
    position:absolute;
    top:86px;
    display:block;
    margin:0;
    /*margin-left:240px;*/ /* auskommentiert = deaktiviert */
    padding:0px;
    background: #91A4A4;
    height:20px;
    padding-left:15px;
    width:705px;
}

#outerContainer {
    /*background-image:url('../images/pattern_contenido.gif');*/
    min-height:100%;
    width:960px;
    margin:auto;
    /*margin-right:0px;*/ /* auskommentiert = deaktiviert */
}


mfg Maik
 
so funktioniert es, Vielen Dank

die Änderung am #outerContainer habe ich allerdings weggelassen, weil damit die gesamte Seite am rechten Bildschirmrand ausgerichtet wird. Und das ist so gewollt.

Funktioniert aber auch so.

Gruß und Dank
Arne
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück