position: relative; bottom: 0px; geht im Internet Explorer nicht

[Ralf]

Hallo,

ich hab ein kleines Problem mit der Positionierung eines Bildes am unteren Ende der Homepage, aber nur im IE. Folgendes Problem. Ich positioniere ein Bild so, dass es immer ganz unten auf der HP ist. Im IE ist da jetzt aber noch ein weißer, leerer Streifen von 3px den ich nicht weg krieg. Vllt kann mir ja einer Helfen.

Hier der HTML-Teil:

<div class="main">

<div class="footer_bg">

<center>

<img src="img/footer.png" alt="Bild">

</center>

</div>

</div>

und noch der CSS-Teil:

body {

margin: 0px auto;

background-color: #F89D17;

}

.main {

padding: 0px;

background-color: #FFFFFF;

border: 0px solid black;

}

.footer_bg {

height: 120px;

width: 100%;

background: url(../img/footer_bg.png);

position: relative;

bottom: 0px;

border: 0px solid black;

}

Wäre super wenn jemand einen Änderungsvorschlag oder eine Lösung für mein Problem hätte. Mfg ralf

[Gunnar Bittersmann]

Hello out there!

Im IE ist da jetzt aber noch ein weißer, leerer Streifen von 3px den ich nicht weg krieg.

Kriegst du ihn größer, wenn du die Schrift vergrößerst? Dann hat’s wohl was mit der Schrift zu tun – Unterlängen ist dein Stichwort.

<center>

Das möchtest du noch aus dem HTML eliminieren und die Zentrierung auch mit CSS machen.

See ya up the road,
Gunnar

[gaby]

Hallo,

ich hab ein kleines Problem mit der Positionierung eines Bildes am unteren Ende der Homepage, aber nur im IE. Folgendes Problem. Ich positioniere ein Bild so, dass es immer ganz unten auf der HP ist. Im IE ist da jetzt aber noch ein weißer, leerer Streifen von 3px den ich nicht weg krieg. Vllt kann mir ja einer Helfen.

Hallo,

Ergänzend zu dem, was Gunnar bereits sagte:
Falls die Lücke der Platz ist, den die Unterlängen eines Textes benötigen würden, so erklärt sich das damit, daß IMG, genau wie Fließtext, ein Inline-Element ist und der IE in diesem Fall das Bild wie einen Text behandelt.

Wenn du das Bild ganz unten im footer  positionieren willst, dann mache das Bild zum Block-Element und gib ihm 'position:absolute; bottom:0'.

BTW
IMO hat beim #footer 'bottom:0' in Verbindung mit 'position:relative' keine Auswirkung.

Grüße
gaby

[Powl]

Hallo,

Ergänzend zu dem, was Gunnar bereits sagte:
Falls die Lücke der Platz ist, den die Unterlängen eines Textes benötigen würden, so erklärt sich das damit, daß IMG, genau wie Fließtext, ein Inline-Element ist und der IE in diesem Fall das Bild wie einen Text behandelt.

Soweit, so gut.

Wenn du das Bild ganz unten im footer  positionieren willst, dann mache das Bild zum Block-Element und gib ihm 'position:absolute; bottom:0'.

Wie wär statt dessen:

  
img.bottomlinie {  
  vertical-align:bottom;  
}  

netten Tag
^da Powl

[gaby]

Hallo,

Wie wär statt dessen:

img.bottomlinie {
  vertical-align:bottom;
}

  
Das funktioniert aber nicht mehr, wenn der #footer ein größeres 'height' hat,  als das Bild.  
  
  

> netten Tag  
  
dir ebenso, oder was davon noch übrig ist ;-)  
  
  
Grüße  
gaby  

[Powl]

Hallo,

Das funktioniert aber nicht mehr, wenn der #footer ein größeres 'height' hat,  als das Bild.

Is' wohl so. Aber abolute Positionierung finde ich in dem Fall nicht optimal.

Wie wäre es denn so:

  
<p id="footer">  
  <img src="img/footer.png" alt="'Bild' als alt-Text ist doof ;)">  
</p>  

mit CSS dazu:

  
p#footer {  
  height:100px;  
  line-height:100px;  
  text-align:center;  
}  
p#footer img {  
  vertical-align:bottom;  
}  

Ungetestet, sollte aber so funktionieren.
HTML ist semantischer, Tags gespart und keine absolute Pos. nötig.
Einverstanden?

dir ebenso, oder was davon noch übrig ist ;-)

bedankt, ist ja echt nicht mehr allzuviel.

schönes Wochenende
^da Powl