✔ Pixelproblem, Abstand

Status
Nicht offen für weitere Antworten.
N

Nexlamar

Erfahrenes Mitglied
Hallo!

Ich weiß, mein Problem wurde gerade schon angesprochen, aber bei mir funktioniert es nicht:

Situation siehe Bilder Anhang: Der Sollzustand ist aus Firefox, ist bezieht sich auf den IE.
Wie bekomme ich die Lücke geschlossen? Wie gesagt unter 3-Pixel-Bug habe ich nichts funktionierendes gefunden - vielleicht habe ich was übersehen ...



HTML: 
#box_large
{
  margin: 10px;
}

#box_large div.header
{
  background-image:url(../images/box_head_large.jpg);
  background-repeat: no-repeat;
  height:14px;
  padding-bottom:-3px;
  padding-bottom:0 !important;
}

#box_large div.content
{
  background-color: #ADCF74;
  float:left;
  width:345px;
  padding:4px;
}

Vielen Dank!

Nexlamar
 

Anhänge

  • ist.gif
    ist.gif
    1 KB · Aufrufe: 85
  • soll.gif
    soll.gif
    1,2 KB · Aufrufe: 84
Der 3px-Bug bezieht sich eigentlich auf die Horizontale, taucht also zwischen zwei nebeneinander liegenden (floatenden) Elementen auf.

Könntest du mal den dazugehörigen HTML-Quelltext zeigen, oder noch besser einen Link zur Problemseite nennen?

Anmerkung: dein CSS-Codeschnippsel erzeugt bei mir im IE keine Lücke. Aber vielleicht hilft es weiter, wenn du die !important-Regel zuerst notierst, so wie es sich gehört:

Code: 
padding-bottom:0 !important; /* Für nicht-IE-Browser */
padding-bottom:-3px; /* Für IE */
 
michaelsinterface hat gesagt.:
Der 3px-Bug bezieht sich eigentlich auf die Horizontale, taucht also zwischen zwei nebeneinander liegenden (floatenden) Elementen auf.
Zum Vergrößern anklicken....

Ok.

michaelsinterface hat gesagt.:
Könntest du mal den dazugehörigen HTML-Quelltext zeigen, oder noch besser einen Link zur Problemseite nennen?
Zum Vergrößern anklicken....

Link geht leider nicht, da noch alles auf localhost. Aber HTML sieht so aus:

HTML: 
<div id="box_large">
      <div class="header">&nbsp;</div>
      <div class="content">Text<br><br><br><br><br><br><br></div>
</div>

Doctype so:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
 
Wie gesagt, ich kann da keine Lücke zwischen den DIVs entdecken, Testumgebung: Win2000, FF 1.5, IE 6.0.

Quelltext meiner Testseite:

HTML: 
<!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">
<title></title>

<style type="text/css">
<!--
#box_large
{
  margin: 10px;
}

#box_large div.header
{
  background:url(../images/box_head_large.jpg) #ffff00;
  background-repeat: no-repeat;
  height:14px;
  padding-bottom:0 !important; /* Für nicht-IE-Browser */
  padding-bottom:-3px; /* Für IE */
}

#box_large div.content
{
  background-color: #ADCF74;
  float:left;
  width:345px;
  padding:4px;
}
-->
</style>

</head>
<body>

<div id="box_large">
     <div class="header">header</div>
     <div class="content">content</div>
</div>

</body>
</html>
Selbst ohne die speziellen padding-Angaben entstehen keine Lücken im Layout:

Code: 
#box_large div.header
{
  background:url(../images/box_head_large.jpg) #ffff00;
  background-repeat: no-repeat;
  height:14px;
}
 
Zum Beweis ein IE-Screenshot:

.
 

Anhänge

  • ss_nexlamar.png
    ss_nexlamar.png
    9,4 KB · Aufrufe: 23
Dadurch verändert sich bei mir nichts. Egal, ob im Stylesheet festgelegt, oder über Ansicht -> Schriftgrad.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück