falsche darstellung des footers im ie7

falsche darstellung des footers im ie7

Beitragvon citycobra » 28.06.2007, 20:26

zunächst einmal möchte ich hier kurz ein paar lobende worte loswerden. ihr macht mit diesem forum wirklich einen sehr guten job und ich bin froh eine solche community gefunden zu haben. als hobby webdesigner ist man nunmal oft auf hilfe angewiesen und da kommt man bei speziellen problemen mit standard-faq's oft nicht weit.

nun zu meinem problem... ich habe endlich meine erste css-gestaltete seite am laufen (auf basis von joomla). mein problem stellt nun der ie7 dar. in firefox und früheren ie's wird die seite korrekt angezeigt. die darstellungsprobleme beziehen sich lediglich auf den footer, welcher im ie7 nicht am ende der seite sondern mittendrin angezeigt wird.

in der index.php meines template-ordners habe ich nun eine abfrage für den ie7 eingefügt, damit hierfür eine andere css-datei gezogen wird (dies funktioniert einwandfrei):

Code: Alles auswählen
   <!--[if IE 7.0000]>
   <?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/ie7.css\" type=\"text/css\"/>" ; ?>
   <![endif]-->


nun verzweifle ich jedoch etwas, weil sich im ie7 die floats nicht sauber clearen lassen und das wohl auch der grund für den unsauber dargestellten footer sein wird. der body meiner seite ist wie folgt aufgebaut:

Code: Alles auswählen
<body>

   <div id="centerpage">

   <div id="header">
   </div>

   <div id="left_outer">
   <div id="left_inner">
   <?php mosLoadModules ( 'left', -2 ); ?>
   </div>
   </div>

   <div id="content_outer">
   <div id="pathway_text">
   </div>
   <div id="content_inner">
   <?php mosMainBody(); ?>
   </div>
   </div>

   </div>

   <div id="footer">
   <?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?>
   <?php mosLoadModules( 'debug', -1 );?>
   </div>

</body>


die für das layout wichtigen punkte in der css-datei sehen folgendermaßen aus:

Code: Alles auswählen
html {
height:100%;
}

body {
height:100%;
font-family:Verdana, Arial, sans-serif;
font-size:11px;
margin:0px;
padding:0px;
background: #cccccc url(../images/site_bg.jpg) repeat-y top center;
}

#centerpage {
height:100%;
width:900px;
margin-left:auto;
margin-right:auto;
margin-top: 0px;
margin-bottom: 0px;
background: #cccccc url(../images/site_bg.jpg) repeat-y top center;
}

#header {
padding:0px;
margin:0px;
width:900px;
height:180px;
background:url(../images/header.jpg) no-repeat;
}

#left_outer {
width: 159px;
float: left;
margin:0px;
background-color: #bbbbbb;
}

#left_inner {
padding:0px;
}

#content_outer {
float:right;
width:741px;
}

#content_inner{
padding: 15px 25px;
margin: 0px;
background-color:#c0c39b;
}

#footer {
clear:both;
height:15px;
width:900px;
background: url(../images/subhead_bg.png) repeat-x;
margin-left:auto;
margin-right:auto;
}

#pathway_text {
background: url(../images/subhead_bg.png) repeat-x;
height:21px;
border:0px solid #ccc;
}

#pathway_text img {
margin-left: 5px;
margin-right: 5px;
margin-top: 6px;
}


meine frage ist nun wie ich die css-befehle in der ie7.css-datei abändern muss, damit der footer auch im ie7 am ende der seite dargestellt wird. ich zerbreche mir nun seit zwei tagen den kopf und finde einfach keine lösung. ich hoffe ihr habt eine. ;)

lg
citycobra
citycobra
neu hier
 
Beiträge: 3
Registriert: 28.06.2007, 19:47

Beitragvon Laus » 28.06.2007, 21:21

Hallo

Versuche es mal mit -->Easy Clearing<-- im DIV centerpage.

Dein footer ist ja nicht mehr im Div centerpage und desshalb greift hier das clear im footer nicht.
Gruß Xaver
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald

Beitragvon citycobra » 29.06.2007, 21:39

Hallo Laus,

vielen Dank für die schnelle Hilfe.

Ich habe mir die Seite zum Thema "Easy Clearing" nun mehrmals durchgelesen und ehrlich gesagt glaube ich das Thema zu verstehen. Nur leider versagt jeder Versuch es auf meiner Page anzuwenden kläglich. Vielleicht bin ich heute auch einfach nicht mehr aufnahmefähig genug. Ich stelle mal den Link zur Homepage hier rein. Wäre super, wenn da vielleicht einer von euch mal einen kurzen Blick drauf werfen könnte. Ich verzweifle langsam an diesem Problem und das nur wegen der immer wieder erfrischenden Art der Microsoft-Programmierung, unmöglich.

http://www.islandpferde-beienbach.de

Vielen Dank im Voraus. ;)
citycobra
neu hier
 
Beiträge: 3
Registriert: 28.06.2007, 19:47

Beitragvon Laus » 30.06.2007, 06:31

Hallo

Dein footer ist genau dort wo du ihn platziert hast nämlich bei 100% höhe der sichtbaren Seite.

Als die einfachste der Möglichkeiten verschiebe doch mal deinen kompletten footer im HTML Quelltext um ein DIV nach oben, soll heißen das es am Schluss des centerpage div steht. Dadurch wird der footer dann automatisch zum Kindelement von centerpage und nicht wie jetzt vom body. dann funktioniert auch dein clear:both wie es eigentlich soll.
Code: Alles auswählen
<span class="article_seperator">&nbsp;</span>

      </td></tr></table></td></tr></table>   </div>
   </div>
   

<div id="footer">
   <div align="center">&copy; 2007 Islandpferde Beienbach e.V.</div>      
</div>
</div>
</body>


Gruß Xaver
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald

Beitragvon citycobra » 30.06.2007, 17:53

Hi Xaver,

ich habe mich heute noch einmal an das Problem gesetzt. Den Footer einen DIV nach oben zu schieben wäre eine Möglichkeit, hat jedoch einen Nachteil. Ich benutze auf der Seite ein durchgehendes Hintergrundbild im body, damit die Farbgestaltung im Browser durchgängig ist. Setze ich den Footer einen DIV höher, dann hängt er auf Seiten mit wenig Inhalt mitten auf der Seite. Er wäre dann also kein echter Footer, weil die Farben im Hintergrund trotzdem weitergehen und das eben auch unterhalb des Footers.

Ich habe mich nun dazu entschlossen den Footer komplett weg zu lassen. Die dort enthaltenen Copyright-Hinweise habe ich nun unter das Hauptmenü gesetzt. Sieht meiner Meinung nach auch garnicht so verkehrt aus.

Einen Pseudo-Footer mit der Höhe von einem Pixel habe ich trotzdem noch auf der Seite stehen lassen, damit die Scrollbar dauerhaft angezeigt bleibt. Dies funktioniert nun in allen Browsern ohne Hacks einwandfrei.

Trotzdem nochmal vielen Dank für deine Hilfe.

Gruß
citycobra
citycobra
neu hier
 
Beiträge: 3
Registriert: 28.06.2007, 19:47


Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "falsche darstellung des footers im ie7"

Zurück zu: CSS für Fortgeschrittene

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 3 Gäste