IE - Unerwünschte Lücken im Layout

Knickedi · #1 (**permalink**) 16.10.2006, 23:46

Hi ihr,

Ich hab ja neulich wieder mal ins Forum "geplärt", aber ich komm einfach nicht drauf.
Das Problem hatte ich schon damals, hatte nichts gefunden, aufgegeben und jetzt bin ich wieder darauf gestoßen und ich hoffe, dass ihr mir helfen könnte.
Hab die Suche genutzt, aber weider vergeblich. Falls es doch was gibt einfach drauf verweisen...

Ich hab da etwas Kleines gebastelt und es sieht einfach komisch aus im IE.

Link zu dem Problem:Hässliche Lücken im IE

HTML-Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>H&auml;ssliche L&uuml;cken im IE</title>
  <meta http-equiv="content-type" content="charset=ISO-8859-1" />
  <link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>
  <div class="row1"><div class="left"></div><div class="right"></div><div class="middle"></div></div>
  <div class="row2"><div class="left"></div><div class="right"></div><div class="middle"></div></div>
</body>

</html>

CSS-Code:

Code:

body {
   margin:0;
   padding:0; }
img {
   margin:0;
   padding:0;
   border-width:0;}

.row1 {
   padding:0 20px;
   margin-top:20px; }
.row1 .left, .row1 .right {
   height:20px;
   width:20px; }
.row1 .left {
   float:left;
   background-image:url(images/main-top-left.gif); }
.row1 .right {
   float:right;
   background-image:url(images/main-top-right.gif);  }
.row1 .middle {
   height:18px;
   margin:0 20px;
   background-color:#f5f5f5;
   border-top:2px solid #5c5c5c; }

.row2 {
   padding:0 20px;
   margin-bottom:20px; }
.row2 .left, .row2 .right {
   height:20px;
   width:20px; }
.row2 .left {
   float:left;
   background-image:url(images/main-bottom-left.gif); }
.row2 .right {
   float:right;
   background-image:url(images/main-bottom-right.gif);  }
.row2 .middle {
   height:18px;
   margin:0 20px;
   background-color:#f5f5f5;
   border-bottom:2px solid #5c5c5c; }

Ich komm einfach nicht drauf...
(Bitte nicht sowas wie: "Warum willst du das eigentlich"...)

Ich danke wie immer im Voraus
MfG Knickedi

fricca · #2 (**permalink**) 17.10.2006, 00:00

Die horizontalen Lücken werden durch den 3px-Bug verursacht. Lösung ist umständlich: http://xhtmlforum.de/33087-noch-einm...tml#post240999

Die vertikalen Lücken entstehen, weil der IE Elemente erweitert, wenn potentieller Text nicht hineinpassen würde. Gib eine kleine Schriftgröße an und die Lücke verschwindet.

Wenn du Boxen mit "runden Ecken" willst, dann verschachtele Elemente statt sie nebeneinander zu setzen. Dann erledigt sich das Problem.
Beispiel: Runde und andere Ecken

Knickedi · #3 (**permalink**) 17.10.2006, 00:05

Vielen Dank für deine schnelle Antwort.
Ich habe die Links jetzt sehr schnell überflogen, da ich etwas Schlaf brauche.
Werde mir diese morgen dann genauer anschauen...

MfG Knickedi

Knickedi · #4 (**permalink**) 17.10.2006, 17:17

Kleiner Nachteil bei dieser Technik für runde Ecken ist, dass die gif's nicht transparent sein dürfen und dass die bilder "unnötig" größer werden, da sie sich sowieso wiederholen...

Zu welcher Methode würdest du/ihr mir raten?
Ist es ratsam dem Hack aus dem Weg zu gehen?
Dass ich dem IE so einen Code ins Auge drücke ist mir egal, aber irgendwie dreht sich mir der Magen um bei dem Gedanken etwas so dermaßen "Undefiniertes" den anderen Browsern zu präsentieren...

MfG Knickedi

fricca · #5 (**permalink**) 17.10.2006, 17:37

Zitat:

Zitat von Knickedi

Zu welcher Methode würdest du/ihr mir raten?

Ich kenne deine konkreten Anforderungen nicht.
Eine Lösung mit Bildern bläht in jedem Fall den Quelltext auf -- je nach dem welche vorhandenen Elemente sich nutzen lassen eben etwas weniger.
Es gibt noch die Möglichkeit, die runden Ecken auf Mozillas zu beschränken und/oder Scriptlösungen.

Knickedi · #6 (**permalink**) 17.10.2006, 20:35

Okay, ich wähle doch die Methode mit den runden Ecken als Grafik.
Solange ich weiß welche Farben mein Design haben soll, ist die Trasparenz egal. Ich werde es nicht genauso machen, es ist eher damit verwandt.

Zitat:

Zitat von fricca

Ich kenne deine konkreten Anforderungen nicht.

Ist schwer zu erklären, wenn das Design noch nicht steht. Ich poste es dann einfach wenn ich soweit bin.

Ansonst kann ich mich nur noch recht herzlich bedanken.
Die von dir geposteten Links waren aufjedenfall lesenswert.

MfG Knickedi

Knickedi · #7 (**permalink**) 17.10.2006, 22:51

Das Design
Sowas sollte es werden (man sieht wo ich ein "bisschen" abgekupfert habe^^)...
Soll (wie man unschwer erkennen kann) unsere Klassenpage werden.

Die Methode alles in eine Tabelle zu packen, mag umstritten sein und hab ich bis jetzt auch nur bei mir gesehen, aber ich finde, dass es die bequemste Art ist ein min-width effektiv durchzusetzen.
Und die Navigationsleiste ist mit Absicht so schlicht, da es als Forum Template dienen soll und ich diese deshalb dynamisch haben möchte.
Naja soviel dazu. Wollte nur die Frage nach meinen Vorstellungen beantworten.

Danke an dieser Stelle nochmal recht herzlich für die freundlich Hilfe!
MfG Knickedi

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bitte um Hilfe - CSS und Prozentangaben	sprefer	CSS	3	01.03.2011 04:11
Untermenü im IE	nici	CSS	10	22.06.2009 21:19
Probleme mit Layout	kruemelchen26	CSS	0	15.05.2007 22:40
Positionierung und Layout Probleme	dabidu	CSS	9	22.10.2006 09:57
Lücken im Layout (z.T. erst nach Angabe von Doctype)	Leeloo	(X)HTML	12	21.07.2006 12:51