✔ komischer IE-Bug mit CSS Hilfe gesucht !

melistik · 17. Januar 2006

Hallo ersteinmal zusammen

Ich habe mir ein schönes Template mit CSS gebastelt und es läuft auch alles
spitze, wenn das kleine Wörtchen Wenn nicht wäre und es den IE nicht geben würde.

Ich habe mehrer "Boxen" mit CSS gebastelt, Navigation und Banner mit
Position absolute gesetzt und den Inhalt, mit Position relative und dann width auto ...
wie es auch eigentlich so üblich ist, so weit ich weiß.

Man folgendes Problem liegt darin, das mit der IE ein Bild mit align Ausrichtungen,
nicht anzeigt oder eher gesagt wenn man etwas herumschiebt sieht man das das Bild
hinter der Inhalts-Box liegt. Nehme ich das align raus wird es komischerweise angezeigt.

Hoffentlich kann mir einer bei diesem komischen Phänomen helfen.
Im Firefox taucht diese Merkwürdigkeit nicht auf !

CSS ...

HTML:

body{
background-color: #FFFFFF;
Font: 14px Georgia;
color: #000000;
margin: 5px 0px 0px 10px;

overflow: auto;
}
#top{
	background-image:url(../img/banner.jpg);
	background-repeat:no-repeat;
	height:90px;
}
#navigation{
	position:absolute;
	width:200px;
	height:auto;
	top:95px;
	bottom:50px;
	left:5px;
	padding:0;
	z-index:1;
}
#middle{
	position:relative;
	width:auto;
	min-width:300px;
	min-height:450px;
	margin:5px 50px 10px 205px;
}
#content{
	width:auto;
	padding:10px 15px;
	background-color: #FAFAFA;
	border: 1px dashed #CCCCCC;
}
#hyper{
	width:auto;
	padding:5px;
	text-align:center;
	height:25px;
}
#counter{
Font: 11px Georgia;
color: #FFFFFF;
}
#fontchanger{
Font: 11px Georgia;
color: #000000;
}

das Template

HTML:

<html>
<head>
<title>$titel</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="top" align="right">
<div style="padding:50px 50px 0px 0px; vertical-align:bottom;">$fontchanger
<a href="$PHP_SELF?$QUERY_STRING&drucken" target='drucken'
	onclick="window.open('','drucken','top=20,left=20,height=480,width=680,scrollbars=yes,status=yes,toolbar=yes,menubar=yes')">
	<img src="./img/drucken.gif" border="0"></a></div></div>
<div id="navigation">
	bla blub
</div>
<div id="middle">
<div id="content">
 	<b>Bla blu</b><br><br>
 	<img src='http://www.tc-kellinghusen.de/admin/hilfe/img/hilfe.gif' align='right' border='1'><br><br>
	<img src='http://www.tc-kellinghusen.de/admin/hilfe/img/hilfe.gif' border='1'>
</div>
	
<div id="hyper"><a href="inhalt.php?id=6" class="copyright">Impressum</a>
	 &bull; <a href="anfahrt.php" class="copyright">Anfahrtsplan</a> 
</div>

</body>
</html>

Schiebt man das Fenster im IE kleiner ist irgendwann auch das zweite Bild zu sehen.

Maik · 17. Januar 2006

Da fehlt noch ein schliessendes </div> im Quelltext: entweder für das DIV#middle oder DIV#content.
Probier mal folgendes:

CSS-Code

Code:

#content p.right
{
text-align:right;
}

HTML:

<div id="middle">
<div id="content">
         <b>Bla blu</b>
         <p class="right"><img src="http://www.tc-kellinghusen.de/admin/hilfe/img/hilfe.gif" border="1"></p>
         <img src="http://www.tc-kellinghusen.de/admin/hilfe/img/hilfe.gif" border="1">
</div>
</div>

melistik · 20. Januar 2006

Ich habe es so versucht, wie du meintest,
jedoch löst dieses das Problem nicht !
das angebliche Fehler des </div> stimmt nicht ganz!
innerhalt des
<div id="middle>
<div id="content>
</div><di id="hyper">
</div></div>

so ist meins aufgebaut ... ich denke das sollte so richtig sein...
findet sonst jemand noch Fehler ?

Boof · 20. Januar 2006

edit:
Okhat sich erledigt war mein Fehler
hab was falsch gemacht
Tut mir leid

Maik · 20. Januar 2006

melistik hat gesagt.:
Ich habe es so versucht, wie du meintest,
jedoch löst dieses das Problem nicht !

Bei mir funktioniert der Lösungsvorschlag einwandfrei: die Grafik wird rechtsbündig ausgerichtet und innerhalb des DIV#content angezeigt

Hier der Quelltext der Testseite:

HTML:

<html>
<head>
<title>$titel</title>
<link href="css.css" rel="stylesheet" type="text/css">

<style type="text/css">
body{
background-color: #FFFFFF;
Font: 14px Georgia;
color: #000000;
margin: 5px 0px 0px 10px;
overflow: auto;
}
#top{
        background-image:url(../img/banner.jpg);
        background-repeat:no-repeat;
        height:90px;
}
#navigation{
        position:absolute;
        width:200px;
        height:auto;
        top:95px;
        bottom:50px;
        left:5px;
        padding:0;
        z-index:1;
}
#middle{
        position:relative;
        width:auto;
        min-width:300px;
        min-height:450px;
        margin:5px 50px 10px 205px;
}
#content{
        width:auto;
        padding:10px 15px;
        background-color: #FAFAFA;
        border: 1px dashed #CCCCCC;
}
#content p.right
{
text-align:right;
}
#hyper{
        width:auto;
        padding:5px;
        text-align:center;
        height:25px;
}
#counter{
Font: 11px Georgia;
color: #FFFFFF;
}
#fontchanger{
Font: 11px Georgia;
color: #000000;
}
</style>

</head>
<body>

<div id="top" align="right">
<div style="padding:50px 50px 0px 0px; vertical-align:bottom;">$fontchanger
<a href="$PHP_SELF?$QUERY_STRING&drucken" target='drucken'
        onclick="window.open('','drucken','top=20,left=20,height=480,width=680,scrollbars=yes,status=yes,toolbar=yes,  menubar=yes')">
        <img src="./img/drucken.gif" border="0"></a></div></div>
<div id="navigation">
        bla blub
</div>
<div id="middle">
<div id="content">
         <b>Bla blu</b>
         <p class="right"><img src="http://www.tc-kellinghusen.de/admin/hilfe/img/hilfe.gif" border="1"></p> 
        <img src="http://www.tc-kellinghusen.de/admin/hilfe/img/hilfe.gif" border="1">
</div>

<div id="hyper"><a href="inhalt.php?id=6" class="copyright">Impressum</a>
         &bull; <a href="anfahrt.php" class="copyright">Anfahrtsplan</a>
</div>
</div>

</body>
</html>

melistik hat gesagt.:
das angebliche Fehler des </div> stimmt nicht ganz!
innerhalt des
<div id="middle>
<div id="content>
</div><di id="hyper">
</div></div>

Wo das fehlende </div> in deinem HTML-Code hingehört, habe ich ja nur vermutet

melistik · 21. Januar 2006

ok es klappt :/,
aber nicht so wie ich es mir vorstelle

Das Bild soll rechts ausgerichtet sein, und ein Textumfluss vorhanden haben.
Sprich rechts das Bild und links aber in gleicher Höhe der Text.
Ich verstehe einfach nicht warum das nicht mit align geht ?!
Kann mir das jemand vielleicht erklären.
Hoffe du weisst darauf auch noch eine Antwort und kannst mir
bei meinem Wunsch rechts Bild links Text helfen.

Vielen Dank aber schonmal

Maik · 21. Januar 2006

Nach eingehendem Experimentieren und Testen habe ich festgestellt, daß der Grund für das IE-spezifische Darstellungsproblem in der CSS-Eigenschaft position:relative für das DIV#middle liegt.

Wenn ich sie im Stylesheet auskommentiere bzw. entferne, ist der vermeintliche IE-Bug fixed.

melistik · 22. Januar 2006

So komisch komisch,
habe nun fixed genommen und es geht einwandfrei...
vielen Dank und auch vielen Dank an deine Geduld

Maik · 22. Januar 2006

melistik hat gesagt.:
habe nun fixed genommen und es geht einwandfrei...

Was meinem Tipp entspricht, sprich auf's gleiche rauskommt, da position:fixed vom IE nicht unterstützt wird.

✔ komischer IE-Bug mit CSS Hilfe gesucht !

melistik

Erfahrenes Mitglied

Maik

melistik

Erfahrenes Mitglied

Boof

Mitglied

Maik

melistik

Erfahrenes Mitglied

Maik

melistik

Erfahrenes Mitglied

Maik

Neue Beiträge