IE 3px gap erschwertes Problem

[3px gap]

Hallo,

ich nutze ein dreispaltiges Layout mit Kopf- und Fußzeile. Dabei taucht natürlich das 3px-GAP beim Internet-Explorer wieder zwei Mal auf (links und rechts). Der Holly-Hack funktioniert bei mir zwar (wenn ich das mittlere Div auch floate), aber dann wird es mangels Inhalt nicht hoch und breit genug. Dem mittleren Div gebe ich die absolute Höhe mit, um es hoch genug zu machen und die Breite nimmt es ja ohne floaten automatisch voll ein (bis auf die 3px im IE eben).

Weiß jemand eine Lösung? Vielen Dank schon mal im Voraus!

Grüßle

[Detlef G.]

Hallo 3px gap (komischer Name)

Weiß jemand eine Lösung? Vielen Dank schon mal im Voraus!

Leider ist meine Glaskugel zur Zeit nicht wirklich leistungsfähig, sie müsste
wohl mal gereinigt werden,. ;-)

Im Ernst, ohne dein konkretes Problem zu kennen (URI der Seite), wird dir wohl
niemand wirklich helfen können, zumal du die Standardhacks ja kennst.
(Es wäre Schattenboxen.)

Auf Wiederlesen
Detlef

[jochen]

Hallo 3px gap (komischer Name)

Im Ernst, ohne dein konkretes Problem zu kennen (URI der Seite), wird dir wohl
niemand wirklich helfen können, zumal du die Standardhacks ja kennst.
(Es wäre Schattenboxen.)

Auf Wiederlesen
Detlef

Hallo Detlef,

sorry, ich fürchte du hast leider recht (mit dem Schattenboxen :-)).
Also die url anbei: http://www.fc-lenzkirch.de/Test
Es ist alles noch ne kleine Baustelle :-P

Danke und Gruß
Jochen

[Detlef G.]

Hallo Jochen,

bei solchen Problemen gebe ich dann üblicherweise nicht dem Element selbst,
sondern einem Umschließenden die Hintergrundfarbe.

z.B. deinem zusätzlichen Seiten-Div:
<div style="width:58.5em;background-color:#FFFFDE;"> <!--hab ich neu eingefügt, müssen wir uns noch mal überlegen!!! :-)-->

Wobei du auch hierbei keine Inlinestyles verwenden solltest.

Überhaupt könntest du deinen Quelltext noch ein ganzes Stück aufräumen.

z.B.statt:

  
<div id="Header">  
 <div class="Lo">  
  <div class="Ro">  
   <div class="Content"><h1>FC Lenzkirch</h1></div>  
  </div>  
  
 </div>  
</div>  

so:

  
  <div id="Header">  
    <div>  
      <h1>FC Lenzkirch</h1>  
    </div>  
  </div>  

und dann im CSS:

  
#Header  
{  
 margin:0;  
 padding:0;  
 border: none;  
 background:#D71317 url("inc/lo.png") top left no-repeat;  
}  
  
#Header div  
{  
 background:url("inc/ro.png") top right no-repeat;  
 text-align:center;  
 color:white;  
 font-family:"Arial Rounded MT Bold",Helvetica,Arial,sans-serif;  
}  
  
#Header h1  
{  
 background:url("inc/fclogo.png") left no-repeat;  
 padding:0.1em;  
 margin:0em 0.8em;  
 font-weight:bold;  
 font-size:4em;  
}  

Auf Wiederlesen
Detlef

[jochen]

Hi Detlef!

Danke zunächst mal für deine Antwort. Ich vermute mittlerweile auch, dass es in diesem Fall keine andere Lösung gibt, als eine background-color zu setzen (hab mich neben zig Internetseiten noch mit nem anderen klasse Webmaster unterhalten). Das div mit dem Inlinestyle habe ich nur auf der Startseite eingebaut. Damit wollte ich nur etwas testen! (bezüglich Umbruch) :-) Auf den anderen Seiten kommt das eigentlich nicht vor und wenn wir (mein Homepage-Partner und ich) uns schlussendlich dafür entscheiden, werde ich es schon ne id oder ne Klasse festlegen. Danke trotzdem für dein Feedback. Das man das CSS noch verbessern kann, glaube ich dir gerne. Im Laufe der Entwicklungen hat sich einfach viel redundantes und überflüssiges angehäuft! Das hatte ich eigentlich noch vor. Aber das so für den Header zu Lösen ist noch ne gute Idee!

merci und ciao
Jochen

Hallo Jochen,

bei solchen Problemen gebe ich dann üblicherweise nicht dem Element selbst,
sondern einem Umschließenden die Hintergrundfarbe.

z.B. deinem zusätzlichen Seiten-Div:
<div style="width:58.5em;background-color:#FFFFDE;"> <!--hab ich neu eingefügt, müssen wir uns noch mal überlegen!!! :-)-->

Wobei du auch hierbei keine Inlinestyles verwenden solltest.

Überhaupt könntest du deinen Quelltext noch ein ganzes Stück aufräumen.

z.B.statt:

<div id="Header">
<div class="Lo">
  <div class="Ro">
   <div class="Content"><h1>FC Lenzkirch</h1></div>
  </div>

</div>
</div>

>   
> so:  
> ~~~html
  

>   <div id="Header">  
>     <div>  
>       <h1>FC Lenzkirch</h1>  
>     </div>  
>   </div>  
> 

und dann im CSS:

#Header
{
margin:0;
padding:0;
border: none;
background:#D71317 url("inc/lo.png") top left no-repeat;
}

#Header div
{
background:url("inc/ro.png") top right no-repeat;
text-align:center;
color:white;
font-family:"Arial Rounded MT Bold",Helvetica,Arial,sans-serif;
}

#Header h1
{
background:url("inc/fclogo.png") left no-repeat;
padding:0.1em;
margin:0em 0.8em;
font-weight:bold;
font-size:4em;
}

>   
>   
> Auf Wiederlesen  
> Detlef  
>