Hans: DIV richtet sich nicht ganz oben aus

Hallo,
ich habe das Problem, dass ich ein Div-Element einfach oben wie ein Banner haben will. Im IE geht das auch wunderbar, aber im Firefox habe ich immer zwischen oberem Rand und Div-Anfang ein freies Stück.
An was kann das liegen?

Hier der Link:
http://www.baumanagement-babilon.de/

Hier ein Ausschnitt aus dem Quelltext:

<body style="font-family: arial; background-color: #FBFBFF; background-image: url('hg.gif'); background-attachment: fixed; margin:0px; line-height:200%; border:0;">

<div style="margin:0; padding:0; background: #3f3f9f; background-image: url(banner.gif); background-repeat:no-repeat; color: #ffffff; line-height: 300%; font-size:14pt;">
 <p align="center">Projektmanagement&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Projektsteuerung&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Facility
   Management Consulting&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Bauherrenberatung
</div>

  1. hi,

    ich habe das Problem, dass ich ein Div-Element einfach oben wie ein Banner haben will. Im IE geht das auch wunderbar, aber im Firefox habe ich immer zwischen oberem Rand und Div-Anfang ein freies Stück.
    An was kann das liegen?

    Am Default-Padding von body?

    Hier der Link:
    http://www.baumanagement-babilon.de/

    Hier ein Ausschnitt aus dem Quelltext:

    <body style="font-family: arial; background-color: #FBFBFF; background-image: url('hg.gif'); background-attachment: fixed; margin:0px; line-height:200%; border:0;">

    Für Beispielcode inline-Styles zu verwenden, ist OK - aber innerhalb eines echten Dokumentes, Pfui.

    Und den Quirks Mode solltest du auch verlassen, in dem du eine Doctype-Angabe ins Dokument einfügst.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Am Default-Padding von body?

      habs geändert, funzt aber trotzdem nicht (sonst wären ja auch links und rechts ränder gewesen...)

      Für Beispielcode inline-Styles zu verwenden, ist OK - aber innerhalb eines echten Dokumentes, Pfui.

      Ja, ist schon klar, aber es geht im Moment nur ums Design, und da kann ichs schneller direkt im Dokument ändern.

      1. Hallo,

        » » Am Default-Padding von body?

        Kann es vielleicht am "line-height:200%;" liegen?

        Gruß,
        Floater

      2. Hello out there!

        Für Beispielcode inline-Styles zu verwenden, ist OK

        Ganz entschiedenes Nein, denn ...

        es geht im Moment nur ums Design, und da kann ichs schneller direkt im Dokument ändern.

        ... potentielle Helfer können den Code aber schlechter überschauen und das Problem schwerer finden.

        Und wozu willst du dir doppelte Arbeit machen anstatt gleich richtig[tm]?

        See ya up the road,
        Gunnar

        --
        „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
  2. Hello out there!

    ich habe das Problem, dass ich ein Div-Element einfach oben wie ein Banner haben will. Im IE geht das auch wunderbar, aber im Firefox habe ich immer zwischen oberem Rand und Div-Anfang ein freies Stück.
    An was kann das liegen?

    An der Voreinstellung des Werts für die 'margin'-Eigenschaft des 'p'-Elements.

    Hier der Link:
    http://www.baumanagement-babilon.de/

    Das ist kein Link.  Das ist einer: http://forum.de.selfhtml.org/hilfe/bedienung.htm#verweise-einbinden

    <body style="font-family: arial; background-color: #FBFBFF; background-image: url('hg.gif'); background-attachment: fixed; margin:0px; line-height:200%; border:0;">

    Pfui inline-Styles! [</archiv/2006/8/t134850/#m875140>, </archiv/2006/8/t134910/#m875774>]

    <p align="center">Projektmanagement&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Projektsteuerung&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Facility
       Management Consulting&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Bauherrenberatung

    Wenn mehr als ein '&nbsp;' hintereinander auftaucht, machst du etwas falsch. Abstände erzeugst du mit CSS.

    See ya up the road,
    Gunnar

    --
    „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
    1. An der Voreinstellung des Werts für die 'margin'-Eigenschaft des 'p'-Elements.

      Aaah danke, das wars :-)

      Hier der Link:
      http://www.baumanagement-babilon.de/

      Das ist kein Link.  Das ist einer: http://forum.de.selfhtml.org/hilfe/bedienung.htm#verweise-einbinden

      <body style="font-family: arial; background-color: #FBFBFF; background-image: url('hg.gif'); background-attachment: fixed; margin:0px; line-height:200%; border:0;">

      Pfui inline-Styles! [</archiv/2006/8/t134850/#m875140>, </archiv/2006/8/t134910/#m875774>]

      Wäre nett, wenn nicht immer so abschätzige Kommentare kommen würden... ;-)

      <p align="center">Projektmanagement&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Projektsteuerung&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Facility
         Management Consulting&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Bauherrenberatung

      Wenn mehr als ein '&nbsp;' hintereinander auftaucht, machst du etwas falsch. Abstände erzeugst du mit CSS.

      Wie genau mach ich das (Ich bin immernoch quasi CSS-Anfänger)? Brauch ich da für jedes Wort n eigenes Div oder so?

      Vielen Dank

      Hans

      1. Wenn mehr als ein '&nbsp;' hintereinander auftaucht, machst du etwas falsch. Abstände erzeugst du mit CSS.
        Wie genau mach ich das (Ich bin immernoch quasi CSS-Anfänger)? Brauch ich da für jedes Wort n eigenes Div oder so?

        Naja, ein DIV wäre da eher fehl am Platz, wie bereits vorgeschlagen, sollte eine Liste die erste Wahl sein. Und wenn es um Navigationslisten geht, verlinke ich immer wieder gern auf http://css.maxdesign.com.au/listamatic/ (Warum das Rad neu erfinden?)

        Siechfred

        --
        Ein Selbständiger ist jemand, der bereit ist, 16 Stunden am Tag zu arbeiten, nur um nicht 8 Stunden für einen Anderen arbeiten zu müssen.
  3. ich habe das Problem, dass ich ein Div-Element einfach oben wie ein Banner haben will. Im IE geht das auch wunderbar, aber im Firefox habe ich immer zwischen oberem Rand und Div-Anfang ein freies Stück.
    An was kann das liegen?

    Außenabstände werden zusammengezogen, und zwar so, dass der größte gewünschte Abstand bleibt (du kannst nebenbei bemerkt davon ausgehen, dass der IE es falsch macht, auch wenn's das passiert, was du möchtest). Daher:

    <div style="margin:0; padding:0; …">
    <p align="center">

    Der Abstand, der dich stört, stammt vom <p>-Element.

    Davon unabhängig macht es nicht allzu viel Sinn, ein <p> auf diese Weise in ein <div> zu stecken. Schmeiß' das <div> raus und formatiere das <p>-Element, das Ergebnis wird das Gleiche sein (ohne Abstand, da dann <p> mit margin=0).

    Weiterhin sollten sich Arien à la

    Projektmanagement&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Projektsteuerung&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    durch Angabe eines Seitenabstands vermeiden lassen.
    Verwendest Du statt des <p> bzw. <div> eine <ul>/<li>-Kombination, hättest du auch gleich eine feine Möglichkeit, diesen Seitenabstand sinnvoll (also ohne <span>) unterzubringen.

    Das sähe dann ungefähr so aus:

    <style type="text/css">
    ul {
      text-align:center;
      margin:0;
      padding:0;
      background: rgb(63, 63, 159); color:white;
      line-height: 300%;
      font-size: 110%"
    }
    li {
      display:inline;
      padding:0 1em;
      margin:0;
      list-style:none;
    }
    </style>

    […]

    <ul>
    <li>Projektmanagement</li>
    <li>Projektsteuerung</li>
    <li>Facility Management</li>
    <li>Consulting</li>
    <li>Bauherrenberatung</li>
    </ul>

    Schön, oder?

    1. Wunderbar :-)
      Da werden die Fragen während man sie stellt an der anderen Stelle schon beantwortet :-)
      Danke!