✔ IE und <h1>-tag

Status
Nicht offen für weitere Antworten.
J

jdgf

Mitglied
Hallo,

die Darstellung der Überschrift im IE funktioniert nicht. FF und Opera sind ok. Die Schrift soll zentriert zwischen den Fotos stehen. Testseite: http://testpage.kolping-hohenfels.de/index.htm

Ich habe den Code nach Rat von Maik (siehe vorhergehenden Thread) verwendet.
Code: 
<div id="container"><!-- Anfang Container-->
   <div id="banner" style="height:100px;text-align:center;"><!-- Anfang Banner-->
   <img style="float:left" src="http://testpage.kolping-hohenfels.de/gif/Rahmen1.jpg" alt="Hohenfels">
   <img style="float:right" src="http://testpage.kolping-hohenfels.de/gif/Rahmen2.jpg" alt="Kolping">
   {TEMPLATE FILE="titel_index.tpl"}
</div><!-- Ende Banner-->

Code der titel_index.tpl ist:
Code: 
<h1 style="position:relative; width:100%; height:34px; line-height:34px; font-size:34px; left:0px; top:0px; color:#666">{TITEL EDITTYPE="TEXT" SIZE="25"}</h1>
<h1 style="position:relative; width:100%; height:34px; line-height:34px; font-size:34px; left:-1px; top:-31px; color:#F4F4F4">{TITEL}</h1>

Ursache ist wohl, dass der IE den h1-Block, der durch die grüne Umrandung kenntlich ist, anders behandelt wie Opera und Firefox.

Mit display:inline kann ich zwar die Schrift in allen Browsern zwischen den Fotos zentrieren, aber es zerreißt die Schattenschrift.

Weiß jemand Rat?
Vielen Dank für die Hilfe und
lG Dietmar
 
Hi,

grundsätzlich funktioniert mein Vorschlag im IE tadellos.

Kommentier mal in der neu.css im h1-Selektor die width:100%-Deklaration aus:

Code: 
h1 { position:relative; /*width:100%;*/ height:22px;line-height:22px; font-size:22px;}

und nimm für das zweite h1-Element eine Korrektur bzgl. der oberen Positionsangabe vor, da es ansonsten im IE zu weit unten sitzt:

Code: 
<h1 style="position:relative; height:34px; line-height:34px; font-size:34px; left:-1px; top:-31px !important; top:-65px; color:#F4F4F4">Täglich aktuell aus dem Hohenfelser Land</h1>
 
Hallo Maik,

mit deiner Lösung funktioniert es; ist das ein bekannter Bug?

Der Bannerbereich beim IE <div id="banner"> hat eine Höhevorgabe von 100px, im IE werden aber etwa 140 px dargestellt.
Code: 
#banner {width:810px; margin:auto; height:100px; text-align:center;}

Hängt das mit der Schrift zusammen? IE reagiert erst ab 140px und macht größere Höhenvorgaben.

Wie kann man IE zwingen maximal 100px Bannerhöhe darzustellen?

Gruß Dietmar
 
Durch die negative Positionierung nach oben rücken die nachfolgenden Elemente im Dokumentfluss nicht nach, oder anders ausgedrückt: der ursprünglich eingenommene Raum des relativ positionierten Elements bleibt erhalten, und es entsteht eine Lücke zum nachfolgenden Element.

Hier ein grundsätzliches Beispiel, das die Situation verdeutlicht, und für alle Browser gilt:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_jdgf</title>

<style type="text/css">
<!--
html,body {
margin:0;
padding:10px;
}

#box1 {
position:relative;
top:-10px;
background:#aaa;
}

#box2 {
background:#ccc;
}

#box3 {
background:#ddd;
}
-->
</style>

</head>
<body>

<div id="box1">box 1</div>
<div id="box2">box 2</div>
<div id="box3">box 3</div>

</body>
</html>
Hinzu kommt, dass der IE die height-Deklaration als "Mindesthöhe" für ein Element interpretiert und sie nicht, wie die übrigen Browser, als fixe Angabe behandelt.

Häng daher mal ein overflow:hidden an:
Code: 
#banner {width:810px; margin:auto; height:100px; text-align:center; overflow:hidden;}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück