✔ Codeschnipsel -> IE - Darstellungs-"Fehler"

Status
Nicht offen für weitere Antworten.
Rexo

Rexo

Mitglied
Hallo zusammen,

ich habe ein Darstellungsproblem mit dem IE. Firefox stellt es "erwartungsgemäß" dar.
Das Problem stellt sich beim dem rechts-gefloateten Formular. Es sollte direkt unter dem Preis stehen.
Der IE verschiebt es imho recht willkürlich in den Raum hinein. :(

Hab unten den Code mal gepostet (alles Unnötige: Kopf, Footer, Grafiken, Navigation) hab ich aus der Datei entfernt.

Es handelt sich somit nur noch um das Problemkind ;)

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
	<title></title>	
<style type="text/css" media="screen">
	* {
			margin: 0;
			padding: 0;
		}
		body {
		   font-family: Arial, Helvetica, sans-serif;
			font-size: 11px;
		}
		

/* =content
	=================================================
		=========================================== */

		#content {
		margin-left: 201px;
		padding-top: 30px; /* EDIT */
		padding-left: 30px; /* EDIT */
		}
		



/* Produkt */

	#produkt {
		background-color:  #F3FBF0; /* EDIT */	
		margin: 0 80px 20px 15px;		
		padding: 20px 30px 0 20px;
		border-bottom: 2px solid #DDEAA5;
	}
	
	#produkt_abschluss {
			clear: left;
	}
		#produkt img {
			clear: left;
			float: left;
			border: 1px solid #C0CC8B;
			margin: 0 20px 20px 0; 
		}
		

		#produkt h2{
			float: left;
			color: #2f4e94;
			font-size: 14px;
			font-weight: bold;
			}
		#produkt em {
			display: block;
			float: right;
			font-style: normal;
			color: #2f4e94;
			font-size: 14px;
			font-weight: bold;
		}
		
		#produkt form {
			clear: right;
			float: right;
		}
		
		#beschreibung {
		margin-left: 140px;		
		padding: 0 80px 20px 0;
		}

		#produkt ul {
		padding-left: 158px;
		list-style: square;

		}

</style>
</head>

<body>

	<!-- content-->
	<div id="content">

	
	
		<div id="produkt">
			<img src="http://www.google.de/intl/de_de/images/logo.gif" height="120" width="120" alt="Test"  title="Test" />
				<h2>&Uuml;berschrift -> h2</h2>
				<!-- rechts -->
				<em>Preis &euro;</em>
				<form action="" method='post'><input type='text' id="sub_zahl" name='zahl' value='1' size="1"><input type='submit' id="sub_send" value="OK">
				</form><br />
				<br />
				Evtl. ein kleiner Text<br />
				<br />
				<ul>
					<li>Punkt 1</li>
					<li>Punkt 2</li>
					<li>Punkt 3</li>
				</ul>
				<br />
					<div id="produkt_abschluss"></div>
		</div>

		<div id="produkt">
			<img src="http://www.google.de/intl/de_de/images/logo.gif" height="120" width="120" alt="Test"  title="Test" />
				<h2>&Uuml;berschrift -> h2</h2>
				<!-- rechts -->
				<em>Preis &euro;</em>
				<form action="" method='post'><input type='text' id="sub_zahl" name='zahl' value='1' size="1"><input type='submit' id="sub_send" value="OK">
				</form><br />
				<br />
				Evtl. ein kleiner Text<br />
				<br />
				<ul>
					<li>Punkt 1</li>
					<li>Punkt 2</li>
					<li>Punkt 3</li>
				</ul>
				<br />
					<div id="produkt_abschluss"></div>
		</div>
		
	</div>	
</body>
</html>

Grüsse,
Rexo
 
Vorsicht: eine ID, wie z.B. #produkt, darf in einem Dokument nur einmal vergeben werden (!)

Im folgenden Lösungsvorschlag habe ich mal alle IDs (außer #content) in CSS-Klassen umgewandelt, denn die dürfen in einer Seite praktisch unendlich vorkommen ;)

Das Beispiel basiert auf den zwei floatenden Spalten .leftCol und rightCol, in denen die jeweiligen Elemente eingebettet sind:
  • Browsercheck: FF 1.5, IE 6.0, MOZ 1.7, NN 7.0, OP 8.50 | Win2000
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
        <title></title>
<style type="text/css" media="screen">
        * {
                        margin: 0;
                        padding: 0;
                }
                body {
                   font-family: Arial, Helvetica, sans-serif;
                        font-size: 11px;
                }


/* =content
        =================================================
                =========================================== */

                #content {
                margin-left: 201px;
                padding-top: 30px; /* EDIT */
                padding-left: 30px; /* EDIT */
                }




/* Produkt */

        .produkt {
                background-color:  #F3FBF0; /* EDIT */
                margin: 0 80px 20px 15px;
                padding: 20px 30px 0 20px;
                border-bottom: 2px solid #DDEAA5;
        }

        .produkt div.leftCol {
                float:left;
                }

        .produkt div.rightCol {
                float:right;
                text-align: right;
                }

        .produkt_abschluss {
                        clear: both;
        }
        .produkt img {
                        clear: left;
                        float: left;
                        border: 1px solid #C0CC8B;
                        margin: 0 20px 20px 0;
                }

        .produkt h2 {
                        color: #2f4e94;
                        font-size: 14px;
                        font-weight: bold;
                 }

        .produkt em {
                        display: block;
                        font-style: normal;
                        color: #2f4e94;
                        font-size: 14px;
                        font-weight: bold;
                }

        .beschreibung {
                margin-left: 140px;
                padding: 0 80px 20px 0;
                }

        .produkt ul {
                padding-left: 158px;
                list-style: square;
                }
</style>
</head>

<body>

        <!-- content-->
        <div id="content">

                <div class="produkt">
                <!-- leftCol -->
                <div class="leftCol">
                     <img src="http://www.google.de/intl/de_de/images/logo.gif" height="120" width="120" alt="Test"  title="Test" />
                                <h2>Überschrift -> h2</h2>
                                <br />
                                Evtl. ein kleiner Text<br />
                                <br />
                                <ul>
                                        <li>Punkt 1</li>
                                        <li>Punkt 2</li>
                                        <li>Punkt 3</li>
                                </ul>
                                <br />
                </div><!-- end leftCol -->

                <!-- rightCol -->
                <div class="rightCol">
                          <em>Preis &euro;</em>
                          <form action="" method='post'><input type='text' id="sub_zahl" name='zahl' value='1' size="1"><input type='submit' id="sub_send" value="OK">
                          </form>
                </div><!-- end rightCol -->

                <div class="produkt_abschluss"></div>

                </div><!-- end produkt -->

                <div class="produkt">
                <!-- leftCol -->
                <div class="leftCol">
                     <img src="http://www.google.de/intl/de_de/images/logo.gif" height="120" width="120" alt="Test"  title="Test" />
                                <h2>Überschrift -> h2</h2>
                                <br />
                                Evtl. ein kleiner Text<br />
                                <br />
                                <ul>
                                        <li>Punkt 1</li>
                                        <li>Punkt 2</li>
                                        <li>Punkt 3</li>
                                </ul>
                                <br />
                </div><!-- end leftCol -->

                <!-- rightCol -->
                <div class="rightCol">
                          <em>Preis &euro;</em>
                          <form action="" method='post'><input type='text' id="sub_zahl" name='zahl' value='1' size="1"><input type='submit' id="sub_send" value="OK">
                          </form>
                </div><!-- end rightCol -->

                <div class="produkt_abschluss"></div>

                </div><!-- end produkt -->

        </div>
</body>
</html>
 
Vielen Dank für die Antwort.

Das Beispiel basiert auf den zwei floatenden Spalten .leftCol und rightCol, in denen die jeweiligen Elemente eingebettet sind
Zum Vergrößern anklicken....

Gibt es keine Möglichkeit das ganze ohne die beiden div's (.leftCol und rightCol) zu lösen?

Ich möchte so wenig div's und span's wie möglich verwenden: Das div (produkt_abschluss) war schon an der Schmerzgrenze, aber es hat sich leider keine andere Lösung gefunden, bei 2 gefloateten Bereichen ein gemeinsamer Abschluss zu finden, wobei ich mir das div schenken kann, wenn ich mit 2 "Spalten" arbeite.

Dann hab ich im Vgl. zur "alten" Lösung nur noch ein div mehr.. aber optimal ist das auch nicht. :(

Da es im FF funktioniert, sollte es doch nur ne Eigenheit vom IE sein, dass er es nicht in meinem Sinne darstellen möchte, oder? :rolleyes:

Grüsse
 
Selbstverständlich habe ich zunächst versucht, das Darstellungsproblem im IE so (ohne die Spalten) in den Griff zu bekommen, leider ohne Erfolg.
 
Eine Lösung ohne das zusätzliche div, seh ich nur in einem Conditional Comment für alle IE -Varianten (wie es dann mit dem Mac aussieht, müsste man natürlich testen).

Und in dem conditional comment ein position: relative;


Aber das halt ich für die schlechteste Lösung. Da nimmt man doch lieber ein weiteres div in Kauf ;)

Selbstverständlich habe ich zunächst versucht, das Darstellungsproblem im IE so (ohne die Spalten) in den Griff zu bekommen, leider ohne Erfolg.
Zum Vergrößern anklicken....

So ging es mir leider auch.

Wenn keiner nen neuen Ansatz bietet, werd ich nach llanger - leider erfolglosen -Lösungssuche, doch auf eine Lösung mit Spalten o. ä. zurückgreifen (naja ein div halt mehr).

Grüsse,
Rexo
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück