• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem mit overflow: hidden;

R

Robin-Hood

Neues Mitglied
Hallo!
Ich habe eine Webseite erstellt und habe folgendes Problem:
Wenn ich nun auf ABDENDEN klicke, wird mein Layout
um 114px nach oben verschoben - so das wichtige Teile des Layouts nicht mehr zu sehen sind!
Wie kannich dieses Problem lösen?
HTML: 
<html><head>
<title>Kontakt</title>
</head>
<body>
<div id="grey"></div>
<div id="wrapper">
<div id="navigation">
<ul id="navisub">
<li><a href="index.html">START</a></li>
<li><a href="unternehmen.html">UNTERNEHMEN</a></li>
<li><a href="kontakt.html">KONTAKT</a></li></ul></div>
<div id="oben">
<div id="subnav"><ul id="subnavbar"><li><a href="2.html" title="Deutsch">DEUTSCH</a></li><li><a href="index-2.html" title="Englisch">ENGLISH</a></li></ul></div>
</div>
<div id="logo"></div>
<div id="image"></div>
<div id="subnav2"><ul id="subnavbar2"><li><a href="impressum.html" title="Impressum">IMPRESSUM</a></li><li><a href="disclaimer.html" title="Disclaimer">DISCLAIMER</a></li></ul></div>
    <div class="column">
<div class="textcontainer">
        <div class="ce"><div id="c64" class="csc-default">
    <div class="tx-powermail-pi1">
        
    <div class="tx-powermail-pi1_confirmation">
        <p>Sind diese Angaben korrekt?</p>
        <table class="powermail_all powermail_all_table">
            <tbody><tr class="powermail_all powermail_all_tr">
                <td class="powermail_all powermail_all_td" valign="top"><b>Name</b></td> 
                <td class="powermail_all powermail_all_td" valign="top">Max Mustermann</td>
            </tr>
            <tr class="powermail_all powermail_all_tr">
                <td class="powermail_all powermail_all_td" valign="top"><b>Email</b></td> 
                <td class="powermail_all powermail_all_td" valign="top">[email protected]</td>
            </tr>
            <tr class="powermail_all powermail_all_tr">
                <td class="powermail_all powermail_all_td" valign="top"><b>Telefon</b></td> 
                <td class="powermail_all powermail_all_td" valign="top">040 1715864</td>
            </tr>
            <tr class="powermail_all powermail_all_tr">
                <td class="powermail_all powermail_all_td" valign="top"><b>Ihre Nachricht</b></td> 
                <td class="powermail_all powermail_all_td" valign="top">Nachricht</td>
            </tr>
    </tbody></table>
        <form name="kontaktformular_confirmation_back" action="kontakt.html" method="post" class="tx_powermail_pi1_formconfirmation_back">
            <input value="Zurück" class="tx-powermail-pi1_confirmation tx-powermail-pi1_confirmation_back" type="submit">
        </form>
        <form name="kontaktformular_confirmation_submit" action="kontakt.html?&amp;tx_powermail_pi1[mailID]=64&amp;tx_powermail_pi1[sendNow]=1&amp;cHash=6da94bdc9e2acef7387c23ca5b4bb0b9#c64" method="post" class="tx_powermail_pi1_formconfirmation_submit">
            <input value="Angaben abschicken" class="tx-powermail-pi1_confirmation tx-powermail-pi1_confirmation_submit" type="submit">
        </form>
    </div>
    </div>
    </div></div>
</div>
<div class="clear"></div>
<div id="footer">
        <p>Strategien. Performance. Perspektiven.</p>
    </div>
</div>
</div>
</body></html>
HTML: 
html,body{color:#444;font-family:Helvetica,Arial,sans-serif;sans-serif;font-size:14px;font-style:normal;height:100%;/* Streckt den Anzeigebereich auf 100% */ padding-left:8px;}
body{overflow-y:scroll;}
a{text-decoration:none;color:#023681;}
a:hover{text-decoration:underline;color:#023681;}
a img{border:0;}
/*--------------------weiße Deckflaeche--------------------*/
#oben{position:absolute;z-index:4;top:0px;height:38px;left:0px;width:100%;background-color:#fff;}
/*--------------------graue Hintergrundflaeche--------------------*/
#grey{
    background-color:#999900;
    width:100%;
    height:396px;
    top:120px;
    left:0px;
    position:absolute;
    z-index:0;
}
/*--------------------Wrapper--------------------*/
#wrapper{
    background-image:url(kontakt-Dateien/bg-1x904.gif);
    background-repeat:repeat-y;
    width:904px;
    min-height:100%;                
    height:auto !important;            
    height:100%;                     
    overflow:hidden; !important;    
    top:0px;
    left:50%;
    margin-top:0px;
    margin-left:-452px;
    position:absolute;
    z-index:3;
}
#logo{
    position:absolute;
    z-index:4;
    top:48px;
    height:93px;
    left:214px;
    width:216px;
    background-color: #990000;
}
#image{
    position:absolute;
    z-index:2;
    top:121px;
    height:100%;
    left:483px;
    width:405px;
    margin-bottom: 40px;
    background-color: #0099FF;
}
.column{padding-bottom:200px;width:600px;margin-top:250px;margin-right:0px;margin-bottom:0px;margin-left:150px;height:100%;}
.textcontainer{margin-bottom:40px;padding-left:23px;width:300px;font-size:12px;float:left;margin:0px 0 100px 0;position:relative;height:100%;}

#subnav{height:20px;width:169px;top:23px;left:735px;position:absolute;z-index:8;}
#subnavbar li{display:inline;list-style-type:none;}
#subnavbar a:link,#subnavbar a:visited{float:left;font-size:11px;margin:0 7px 4px 7px;text-decoration:none;color:#9db4c2;}
#subnavbar a.active:link,#subnavbar a:hover{color:#1f4157;}

#subnav2{left:710px; position:absolute; z-index: 8; bottom:0;width:400px;height:26px;/* Höhe der Navigation*/}
#subnavbar2 li{display:inline;list-style-type:none;}
#subnavbar2 a:link,#subnavbar2 a:visited{float:left;font-size:11px;margin:0 7px 4px 7px;text-decoration:none;color:#fff;}
#subnavbar2 a.active:link,#subnavbar2 a:hover{color:#1f4157;}

#navigation{
    height:auto;
    width:134px;
    top:275px;
    left:16px;
    position:absolute;
    z-index:8;
    background-color:#A9A700;
    padding-bottom:15px;
}
#navisub ul{list-style:none;margin-right:8px;padding-left:16px;}
#navigation li a:link,#navigation li a:visited{margin-right:8px;font-size:11px;display:block;text-align:right;padding:0.4em 0 0.4em 0.5em;color:#fff;text-decoration:none;}
#navigation li a:hover{color:#1f4157;}
#navigation ul ul{margin:0px;}
#navigation ul ul li{margin:0;}

#navigation ul ul a:link,#navigation ul ul a:visited{color:#5b7a8d;}
#navigation ul ul a:hover{color:#1f4157;}
.active{color:#1f4157;text-decoration:none;}

#footer{position:absolute;bottom:0;width:400px;height:30px;/* Höhe des Footers */}
#footer p{color:#023681;font-family:"Times New Roman",Times,serif;letter-spacing:2pt;word-spacing:0pt;sans-serif;font-size:13px;font-style:normal;margin:0;padding-left:18px;}

ul.liste{font-size:13px;line-height:18px;padding-bottom:20px;}
li.listenelement{font-size:12px;font-weight:normal;font-style:normal;line-height:19px;}
.image-01{height:102px;width:101px;top:0px;left:0px;position:relative;float:left;}
.clear {
  clear: both;
}

span.powermail_mandatory {
    /* Color of mandatory error message */
    color: red;
}
input.validation-failed,
textarea.validation-failed {
    /* Background color if validation failed 
    background-color: red;*/
    background-image: url(/typo3conf/ext/powermail/img/icon_exclamation.gif);
    background-repeat: no-repeat;
    background-position: 98% 2px;
    border:none;
}
div.powermail_mandatory_js {
    /* DIV container of errormessage */
    color: red;
    margin: 3px 0 5px 0px;
}
fieldset.tx-powermail-pi1_fieldset {
    /* Fieldset */
    background-color: #f2f2f6;
    padding: 0px; /*links ausrichten*/
    padding-top: 6px;
}
fieldset.tx-powermail-pi1_fieldset legend {
    /* legend of Fieldset */
    padding-left: 0;
    margin-left: 0;
    font-weight: bold;
    color: #f2f2f6;
}
fieldset.tx-powermail-pi1_fieldset label {
    /* label */
    display: block;
    width: 200px;
    float: left;
    clear: both;
    font-weight: normal;
    padding-bottom: 4px;
}
fieldset.tx-powermail-pi1_fieldset input.powermail_text,
fieldset.tx-powermail-pi1_fieldset textarea.powermail_textarea,
fieldset.tx-powermail-pi1_fieldset select.powermail_select {
    /* Input and textarea */
    width: 287px;
    border:none;
}    
fieldset.tx-powermail-pi1_fieldset input.powermail_text{
        height:  20px;
}
fieldset.tx-powermail-pi1_fieldset div.tx_powermail_pi1_fieldwrap_html_radio input.powermail_radio {
    /* Radiobuttons */
    margin: 5px 0;
}
div.tx_powermail_pi1_fieldwrap_html {
    /* DIV container arround every field */
    margin-top: 10px;
    margin-bottom: 10px;
    /*margin: 10px 0;*/
}
fieldset.tx-powermail-pi1_fieldset input.powermail_submit {
    /* submit button */
    margin: 0px 0 10px 186px;
    font-weight: normal;
}
p.tx_powermail_pi1_fieldwrap_html_checkbox_title,
p.tx_powermail_pi1_fieldwrap_html_radio_title {
    margin: 0;
    padding: 0;
    font-weight: bold;
}
div.countryzone {margin: 10px 0 0 200px;}
div.tx_powermail_pi1_fieldwrap_html label a,
div.tx_powermail_pi1_fieldwrap_html p a {/* Description */cursor: help;text-decoration: none;}
div.tx_powermail_pi1_fieldwrap_html label a dfn,
div.tx_powermail_pi1_fieldwrap_html p a dfn {/* Description */display: none;text-decoration: none;}
div.tx_powermail_pi1_fieldwrap_html label a:hover dfn,
div.tx_powermail_pi1_fieldwrap_html p a:hover dfn {
    /* Description on mouseover */
    display: block;
    position: absolute;
    width: 250px;
    padding: 5px;
    background-color: #ddd;
    border: 1px solid red;
    color: black;
    text-decoration: none;
    font-size: 0.8em;
    text-decoration: none;
}
div.tx_powermail_pi1_fieldwrap_html img.icon_info {
    /* Description icon */
    padding: 2px 2px 0 2px;
}
fieldset.tx-powermail-pi1_fieldset div.even {
    background-color: #f2f2f6;
}
    /* Confirmation */
td.powermail_all_td {
    padding: 3px 10px 3px 0;
}
    /* THX */
td.powermail_all p.bodytext {
    margin: 0;
}
Für eventuelle Hilfe wäre ich Dankbar!
 
Hallo und willkommen im Forum.

Du scheinst keinen DOCTYPE zu nutzen, ändere das unbedingt.

- DOCTYPE-Switch und seine Auswirkungen

Dein CSS enthält ein paar Fehler.

Code: 
overflow:hidden; !important;
    /* Richtig: overflow: hidden !important; */

html,body{color:#444;font-family:Helvetica,Arial,sans-serif;sans-serif;font-size:14px;font-style:normal;height:100%;/* Streckt den Anzeigebereich auf 100% */ padding-left:8px;}

#footer p{color:#023681;font-family:"Times New Roman",Times,serif;letter-spacing:2pt;word-spacing:0pt;sans-serif;font-size:13px;font-style:normal;margin:0;padding-left:18px;}
    /* sans-serif steht in beiden Fällen an der falschen Stelle */

Dazu kann ich den Fehler nicht rekonstruieren. In welchem Browser tritt er auf, wenn man was macht? Wenn ich das Formular abschicke, lädt lediglich eine nicht vorhandene weitere Seite.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben