✔ Noch so ein CSS Bug?

Status
Nicht offen für weitere Antworten.
son gohan

son gohan

Erfahrenes Mitglied
Hallo,

hab da ne Seite wo zwei div Conatiner innerhalb eines Hauptcontainers einmal links und rechts gefloatet sind und in der mitte ein div Conatiner für Inhalt.

HTML:
PHP: 
<!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" xml:lang="de" lang="de">
</head>
<body>
<div style="margin:20px;border:1px solid #000;">

<div style="background:#009F00;width:126px;height:47px;float:left">&nbsp;</div>
<div style="background:#00BF00;width:126px;height:47px;float:right">&nbsp;</div>
<div style="background:#000;height:47px;">&nbsp;</div>

</div>
</body>
</html>

Was ich jetzt nicht kapier ist das im IE Brwoser zwischen den beiden gefloateten divs und dem mittleren Hauptdiv ein Abstand links und rechts sich bildet, mal im Brwoser bitte anschauen.

Ich hätte es aber gerne so, das die beiden gefloateten divs mit dem mittleren div verschmelzen.
 
Der Grund für das Darstellungsproblem im IE sind die festen Höhenangaben der DIVs.

Lösungsvorschlag: wenn auf die fixe Höhe nicht verzichtet werden kann, weise dem übergeordneten Parent-DIV die Hintergrundfarbe des mittleren Content-DIV zu ;)
 
Hallo maik,
du hast recht es liegt an den höhenangaben und der Tip mit dem Hintergrund des ParentDivs anpassen war auch Gold wert vielen Dank. ;)
 
Als Stamm-User von tutorials.de solltest du eigentlich mittlerweile wissen, was jetzt noch zu tun gewesen wäre ... siehe hierzu auch meine Signatur.

Habe den Thread daher mal als erledigt markiert ;)
 
Hi,

eine weitere Lösung:
Da es sich um den sogenannten 3-Pixel-Gap-Bug handelt, könntest du über die margin-Werte die
Aussenabstände um jeweils -3 Pixel versetzen.
HTML: 
<div style="margin:20px;border:1px solid #000;">
  <div style="background:#009F00;width:126px;height:47px;float:left; margin-right: 0 !important; margin-right: -3px;">&nbsp;</div>
  <div style="background:#00BF00;width:126px;height:47px;float:right; margin-left: 0 !important; margin-left: -3px;">&nbsp;</div>
  <div style="background:#000;height:47px;">&nbsp;</div>
</div>
Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück