Allgemeiner Fragethread

[Bluescreen]

Ich hab ja leider nicht die totale Ahnung von CSS,
wollte mit diesem Halbwissen nun aber eine "Leiste" rechts oben ins HTML-Dokument machen, was auch gut geklappt hat - ausser beim IE.
Der macht die Leiste imemr nur so breit, wie der Text drin ist. Bilder:

1. Bild Firefox, 2. Bild MS IE:


CSS von der Leiste, die per DIV-Tag definiert ist:

Code:

#Navigation {
   background-image: url(navi_bg.gif);
   background-color: #336;
   position: absolute;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   background-color: #339;
   padding: 2px 1px 1px 1px;
   margin: 0px;
   color: #fff;
   height: 20px;
   background-repeat: repeat-x;
   }

Was muss ich modifizieren, damit das auch der IE blickt? (Mit width:100% wurde nichts draus, der Firefox zeigt die Scrolleiste an, beim IE fehlt immer noch ein fitzelchen bis zum Ende)

[Blakkeight]

Ich denke mal du hast zuviel Definiert.

So sieht es bei mir aus und klappt auch ueberall, soweit ich das getestet habe.

Code:

div#navigation{
	background-color: #d6ab68;
	margin: 0; padding: 0.5em;
}

Das sollte nun bei dir gehen.

Code:

#Navigation {
   background-image: url(navi_bg.gif);
   background-color: #336;
   margin: 0px; padding: 2px 1px 1px 1px;
   color: #fff;
   height: 20px;
   background-repeat: repeat-x;
   }

[Bluescreen]

Nein, klappt noch nicht.
Das ganze breitet sich zwar weit aus, allerdings hat es jetzt einen unschönen Abstand zu den Ecken genommen:


Der muss noch eliminiert werden!

Edit: mitakis Post kam grad' erst - bitte noch mit weiterer Antwort warten!

Edit 2:
Äh, Ok, aber was soll ich jetzt ändern, damit's klappt?

[NPC Fighter]

Den Abstand kriegst du mit einem

Code:

html {
  padding: 0px;
  margin: 0px;
}

body {
  padding: 0px;
  margin: 0px;
}

Eintrag in der CSS Datei in den Griff.

[mitaki]

Äh, Ok, aber was soll ich jetzt ändern, damit's klappt?

...

Steht im zweiten Absatz.

@NPC: html und body kannst auch kombinieren (html, body {})

[Bluescreen]

Ah, Ok, na so geht's auch.

Ich hab's jetzt nur BODY zugewiesen, dass scheint auch zu reichen.

Danke an Alle!

[NPC Fighter]

Ich hab's jetzt nur BODY zugewiesen, dass scheint auch zu reichen.

...

Hast dus mal in Opera probiert?

[Bluescreen]

Äh, ja, es geht dort auch.

Version 9.10.

Wieso?

[mitaki]

Opera verhält sich was html bzw. body in Verbindung mit margin bzw. padding angeht etwas anders als IE und Fx. Opera verwendet padding statt margin.

Ich selbst setze aber für html und body immer beides Null.

[Tessio]

Ja, ich wollte ein Formular bzw mehrere Abteilungen eines Formulars in verschiedenen Fieldsets unterbringen und habe als Backgroundimage des Fieldsets nen schönen Verlauf genommen.
Beim Firefox siehts auch wie gewünscht aus, nur der IE meint dem Legend-Element ebenfalls diesen Background zuzuweisen, also geht der Background noch gute 5-8 Pixel über den oberen Rand des Fieldsets.
Sieht scheiße aus.
Nun habe ich das Bild weg gelassen und nur eine Farbe als Hintergrund definiert, was im IE ebenfalls gute 5-8 Pixel zu weit oben ansetzt.
Hab schon versucht, über CSS dem Legend-Element keinen Background zuzuweisen, aber trotzdem schnallt dieser dümmliche IE nicht, dass ich da keinen Background haben will.
Zur Veranschaulichung :

Im dümmlichen IE.
Im rocking Firefox.

CSS :

Code:

  fieldset {
    background-color: #ffffff;
    background-image: url('layout/verlauf_1.gif');
    background-repeat: repeat-x;
    padding-left: 10px;
    padding-right: 10px;
  }
  
  legend {
    font-size: 12px;
    font-family: Tahoma;
    font-weight: bold;
    color: #651011;
    background: transparent;
  }
  
  textarea, input {
    display: block;
    background-color: #fff;
    border: 1px #a3a3a3 solid;
    margin-bottom: 10px;
  }

HTML :

HTML-Code:

<form id="kommentarformular" method="post" action="index.php?site=comment">
          <fieldset>
                    <legend>Formular</legend>
                    <p><label for="name">Ihr Name* :</label><input type="text" id="name" name="name" /></p>
                    <p><label for="email">E-Mail Adresse :</label><input type="text" id="email" name="email" /></p>
                    <p><label for="text">Nachricht* :</label>
                    <textarea id="text" name="text" rows="10" cols="67"></textarea></p>
          </fieldset>
          <fieldset>
          [...]
          </fieldset>
</form>

[mitaki]

Ein nerviger Fehler, der auch in Version 7 noch enthalten ist. Und wiedermal machts nur der IE falsch.

Es gibt aber einen Workaround (en).

Im Gegensatz zur empfohlenen Variante, rate ich aber zu einem extra Stylesheet für den IE, damit sparst du dir unnötige hackerei.

[Tessio]

Wunderbar, so hab ichs mit CC geschafft.
Und schon das nächste IE Problem.
Meine Navigation besteht als einer Liste.
Beim Mouseover von den Listenlinks werden diese mit einer grauen Hintergrundfarbe hinterlegt, die Links werden mit display: block; angezeigt, damit sich der Link über das ganze Element erstreckt (funktioniert zwar im IE nicht, aber netter Effekt für vernünftige Browser).
Nun geht alles prima in allen Browsern, außer dem IE.
Dort werden die Listenpunkte mit großem Abstand getrennt.
Wieder Screenshots :

Im Firefox.
Im IE.

HTML :

HTML-Code:

     <div id="navigation">
          <h2>Main</h2>
              <ul>
                  <li><a href="index.php">News</a></li>
                  <li><a href="index.php?site=steckbrief">Steckbrief</a></li>
                  <li><a href="http://blog.rpg-generation.com">Blog</a></li>
                  <li><a href="index.php?site=some_links">Some Links</a></li>
                  <li><a href="index.php?site=kontakt">Kontakt</a></li>
                  <li><a href="index.php?site=impressum">Impressum</a></li>
              </ul>
          <h2>Projekte</h2>
              <ul>
                  <li><a href="index.php?site=gamers_teahouse">Gamer's Teahouse</a></li>
                  <li><a href="index.php?site=jewelia_world">Jewelia World</a></li>
                  <li><a href="index.php?site=princess_zelda">Princess Zelda</a></li>
                  <li><a href="index.php?site=rpg_generation">RPG Generation</a></li>
                  <li><a href="index.php?site=sv_mardorf">SV Mardorf v1927 eV</a></li>
              </ul>
         <img src="layout/navend.gif" alt="" />
     </div>

Ja, ich weiss, ich hätte das auch mit mehreren Listen ineinander machen können, aber so habe ich das erst gar nicht für den IE hin bekommen, vielleicht versuch ichs später nochmal.

CSS :

Code:

  #navigation {
    font-size: 12px;
    font-family: Tahoma;
    color: #651011;
    width: 143px;
    float:left;
    text-align: center;
    background-color: #e8e7e7;
    background-image: url('layout/navbg.gif');
    background-repeat: repeat-y;
  }
  
  #navigation h2 {
    font-size: 12px;
    font-weight: bold;
    font-family: Tahoma;
    color: #ffffff;
    width: 141px;
    text-align: center;
    margin-bottom: 6px;
    margin-top: 3px;
    margin-left: 1px;
    margin-right: 1px;
    border-top: 1px #c1c1c1 solid;
    border-bottom: 1px #c1c1c1 solid;
    background-image: url('layout/navcapbg.gif');
    background-repeat: repeat-y;
  }
  
  #navigation ul {
    list-style-type: none;
    width: 141px;
    margin: 0 auto;
    margin-bottom: 15px;
    padding: 0;
  }
  
  #navigation ul li {
    font-weight: normal;
    color: #651011;
    text-align: left;
    margin: 0;
    padding: 0;
  }
  
  #navigation a:link, #navigation a:visited {
    padding-left: 8px;
    font-size: 12px;
    font-family: Tahoma;
    text-decoration: none;
    color: #651011;
    display: block;
  }
  
  #navigation a:active, #navigation a:hover {
    padding-left: 8px;
    font-size: 12px;
    font-family: Tahoma;
    text-decoration: none;
    color: #651011;
    background-color: #ececec;
    display: block;
  }

Auch hier steck ich wieder in ner Schaffenskrise. ._.

[mitaki]

Das ist ein klassischer Internet-Explorer-6-Fehler.

Du musst dem a-Element noch eine Breite oder Höhe zuweisen, dadurch erhält das Element Layout (das Konzept zur Elementdarstellung im IE, damit lassen sich viele Dinge beeinflussen).

Im Internet Explorer 7 ist der Fehler inzwischen behoben.

Unabhänig davon würde ich für die Listenpunkte eine größere Zeilenhöhe (line-height) definieren, z.B. 1.5em, damit man das ganze besser lesen kann. Nebenbei sieht es dann auch nicht so zusammengequetscht aus.

Nebenbei noch zum a-Element in der Stildatei. Wenn du Angaben für a definierst gelten diese auch für a:*, d.h. es reicht aus, wenn du abweichende Definitionen innerhalb von a:hover usw. angibst.

[mitaki]

Zunächst hast du einen Fehler des IE gefunden: Dieser kann die Breite (oder auch die Höhe) eines absolut positionierten Elements nicht berechnen, wenn für zwei gegenüberliegende Seiten Angaben gemacht wurden. Das Ergebnis siehst du ja.

Dass width: 100%; bei dir nicht den gewünschten Effekt erzielt liegt daran, dass du auch padding angegeben hast, im Endeffekt kommt also mehr als 100% raus (standardkonformer Modus angenommen). Wenn du dem absolut positionierten Element nur die Breitw zuweist und innerhalb des Elements ein weiteres Element mit den padding-Angaben setzt müsste sich der Scrollbalkenfehler beheben lassen. Dann sollte das ganze auch im IE funktionieren.