FireFox und Internet Explorer

[Dsoltau]

Hallo,

ich habe auf der Seite http://www.solpac.de/halbautomaten.shtml das Problem, daß die oben links eingeblendete Navi-Leiste teilweise unterschiedliche Höhen (im FireFox 0.9.3) hat. Bsp.: Punkt Schlauchbeutel (class=mta) ist in der Höhe kleiner als Home (class=mt). Im IE sieht es okay aus (ich weiß, das hat nichts zu sagen!).

Ich kann den Fehler nicht finden. Ich schicke euch noch mal den Ausschnitt der betreffenden Klassen aus der .css Datei und den HTML-Code mit:

CSS:
mt  {
  color:#000000;
  background-color:#d7d7d7;
  text-align:center;
  line-height:13px;
  font-family:Tahoma,verdana,sans-serif;
  font-size:13px;
  text-decoration:none;
  width:125px;
  height:20px;
  margin:1px;
  border-top-color:#d7d7d7;
  border-left-color:#d7d7d7;
  border-right-color:#d7d7d7;
  border-bottom-color:#d7d7d7;
  border-width:1px;
  border-style:solid;
  }
.mta  {
  color:#000000;
  background-color:#d7d7d7;
  text-align:center;
  line-height:13px;
  font-family:Tahoma,verdana,sans-serif;
  font-size:13px;
  text-decoration:none;
  width:125px;
  height:20px;
  margin:1px;
  border-top-color:#d7d7d7;
  border-left-color:#d7d7d7;
  border-right-color:#d7d7d7;
  border-bottom-color:#d7d7d7;
  border-width:1px;
  border-style:solid
  }

HTML:
<div id="menu">
<table width="128" border="1">
<tr onmouseover="alert(this.height);">
 <td width="125">
        <DIV onmouseover="sl('1');" onmouseout="hl('1');">
            <DIV>
             <p class="mt">
                HOME
                </p>
                <DIV id="menu1">
                    <DIV>
                       <a class="mi" href="http://www.solpac.de/index.shtml" target="_parent" onmouseover="this.className='miho'" onmouseout="this.className='mi'">
                       Deutsch</a>
                    </DIV>
                </DIV>
            </DIV>
        </DIV>
 </td>
</tr>
<tr>
 <td width="125">
        <DIV>
            <DIV align="center">
                <a class="mta" href="schlauchbeutelmaschinen.shtml" target="_parent">
                Schlauchbeutel
                </a>
            </DIV>
        </DIV>
 </td>
</tr>
...usw.

Vielen Dank,
Dennis

[Anschinsan]

Hallo

Ich hab mir erlaubt, das ein bisschen zu vereinfachen:

/* -------- CSS -----------------+/
.mt                       // Eine Klasse ist das nur, wenn ein . davor steht
{
  color:#000000;
  background-color:#d7d7d7;
  text-align:center;
  line-height:13px;
  font-family:Tahoma,verdana,sans-serif;
  font-size:13px;
  text-decoration:none;
  width:125px;
  height:20px;
  margin:1px;
  border:1px solid #d7d7d7;     // Warum ein border in der gleichen Farbe wie der background?
}
.mta         // diese Klasse scheint gleich zu sein wie .mt, du kannst Klassen ruhig mehrmals verwenden. ID (Zeichen vor Name ist #) darfst du nur einmal verwenden
{
  color:#000000;
  background-color:#d7d7d7;
  text-align:center;
  line-height:13px;
  font-family:Tahoma,verdana,sans-serif;
  font-size:13px;
  text-decoration:none;
  width:125px;
  height:20px;
  margin:1px;
  border:1px solid #d7d7d7;     // Warum ein border in der gleichen Farbe wie der background?
  }

HTML:
<div id="menu">
<table width="128" border="1">

<!-- Was bezweckst du denn mit diesem tr - onmouseover ???? -->
<tr onmouseover="alert(this.height);">
 <td width="125">
        <DIV onmouseover="sl('1');" onmouseout="hl('1');">
             <p class="mt">
                HOME
                </p>
                <DIV id="menu1">
                       <a class="mi" href="http://www.solpac.de/index.shtml" target="_parent" onmouseover="this.className='miho'" onmouseout="this.className='mi'">
                       Deutsch</a>
                </DIV>
        </DIV>
 </td>
</tr>
<tr>
 <td align="center" width="125">
                <a class="mta" href="schlauchbeutelmaschinen.shtml" target="_parent">
                Schlauchbeutel
                </a>
 </td>
</tr>

Beim Testen deiner Seite hab ich jede Menge Javascript Fehler bekommen ... Vielleicht solltest du das nochmal kontrollieren.

Fürs CSS .... Ganz ehrlich, ich würde dir empfehlen zuerst Mal bei CCS4You vorbeizuschauen und dich ein bisschen zum Thema schlau machen.... Dann wirds einfacher.
Bei deinem Quellcode ist es kaum zu glauben, dass die Höhe des div containers das einzige Problem war.

http://www.css4you.de/

mfg

Anschinsan

[dsoltau]

Hallo,

Hallo

Ich hab mir erlaubt, das ein bisschen zu vereinfachen:

/* -------- CSS -----------------+/
.mt                       // Eine Klasse ist das nur, wenn ein . davor steht

Der Punkt ist bei Copy&Paste verloren gegengen, sorry, ist aber definitiv da!

....

margin:1px;
  border:1px solid #d7d7d7;     // Warum ein border in der gleichen Farbe wie der background?
}
.mta         // diese Klasse scheint gleich zu sein wie .mt, du kannst Klassen ruhig mehrmals verwenden. ID (Zeichen vor Name ist #) darfst du nur einmal verwenden

Die Site ist gewachsen, da schleppt man leider halt etwas doppelt. Das kann aber nicht der Fehler sein.

....

border:1px solid #d7d7d7;     // Warum ein border in der gleichen Farbe wie der background?
  }

HTML:
<div id="menu">
<table width="128" border="1">

<!-- Was bezweckst du denn mit diesem tr - onmouseover ???? -->
<tr onmouseover="alert(this.height);">
<td width="125">
        <DIV onmouseover="sl('1');" onmouseout="hl('1');">
             <p class="mt">
                HOME
                </p>
                <DIV id="menu1">
                       <a class="mi" href="http://www.solpac.de/index.shtml" target="_parent" onmouseover="this.className='miho'" onmouseout="this.className='mi'">
                       Deutsch</a>
                </DIV>
        </DIV>
</td>
</tr>
<tr>
<td align="center" width="125">
                <a class="mta" href="schlauchbeutelmaschinen.shtml" target="_parent">
                Schlauchbeutel
                </a>
</td>
</tr>

Beim Testen deiner Seite hab ich jede Menge Javascript Fehler bekommen ...

Welchen Browser benutzt Du?

Vielleicht solltest du das nochmal kontrollieren.

Ich benutze FireFox 0.9.3 und habe keine Meldungen auf der Konsole und der IE zeigt mit auch keine Fehler. Die Fehlermeldung ist ein alert() mit dem ich versucht habe die Höhe auszulesen.

Fürs CSS .... Ganz ehrlich, ich würde dir empfehlen zuerst Mal bei CCS4You vorbeizuschauen und dich ein bisschen zum Thema schlau machen.... Dann wirds einfacher.

Erfolgreich bei W3C-CSS Validator geprüft.

Bei deinem Quellcode ist es kaum zu glauben, dass die Höhe des div containers das einzige Problem war.

Die Seite bei W3C erfolgreich als HTML4.01 Transitional geprüft. Wenn man selbst den Überblick behält, ist das kein Problem auch komplex anmutenden Syntax zu schreiben.

Aber all das hat mich der Lösung noch nicht näher gebracht.

Dennis

[wahsaga]

hi,

Fürs CSS .... Ganz ehrlich, ich würde dir empfehlen zuerst Mal bei CCS4You vorbeizuschauen und dich ein bisschen zum Thema schlau machen.... Dann wirds einfacher.

Erfolgreich bei W3C-CSS Validator geprüft.

das besagt höchstens, dass der CSS-code _syntaktisch_ korrekt ist.
logischer "murks" kann er durchaus immer noch sein.

Aber all das hat mich der Lösung noch nicht näher gebracht.

dann solltest du vielleicht doch Anschinsans rat befolgen, dich ml eingehender mit CSS zu beschäftigen.

gruß,
wahsaga

[Dsoltau]

Hi,

ich habe jetzt den CSS Code bereinigt, sprich aufs Wesentliche runtergekürzt.
Ich habe eine class die vorher mta war auf die Klasse mt gesetzt und trotzdem den gleichen Effekt.

.mt  {
  color:#000000;
  background-color:#d7d7d7;
  text-align:center;
  line-height:13px;
  font-family:Tahoma,verdana,sans-serif;
  font-size:13px;
  text-decoration:none;
  width:125px;
  height:20px;
  margin:1px;
  }
.mta  {
  color:#000000;
  background-color:#d7d7d7;
  text-align:center;
  line-height:13px;
  font-family:Tahoma,verdana,sans-serif;
  font-size:13px;
  text-decoration:none;
  width:125px;
  height:20px;
  margin:1px;
  }

Die Klassen sind identisch weil weiter unten im File a.mta:link, visited, hover & active gesetzt werden. Ein interessantes Ergebnis habe ich wenn ich "margin" auskommentiere, dann wird alles, was mt ist _sehr_ hoch und mta nicht.

Was kann das sein?

BTW: Ich habe mich schon mal intensiv mit CSS auseinander gesetzt. Ich kann, IMHO, keinen logischen murks finden.

Danke,
Dennis

[Detlef G.]

Hallo Dennis

HTML:
...
             <p class="mt">
                HOME
                </p>

Die Klasse mt bezieht sich also auf einen Absatz, ein Blockelement für
welches die Browser unterschiedliche Dafaultwerte für margin oder/und
padding haben.

...
                <a class="mta" href="schlauchbeutelmaschinen.shtml" target="_parent">
                Schlauchbeutel
                </a>

Die Klasse mta bezieht sich auf ein a-Element, ein Inlineelement.

Wenn du bestimmte Werte für margin und padding willst (auch wenn der
Gewünschte 0 ist) solltest du diese auch selbst setzen.

Auf Wiederlesen
Detlef

[dsoltau]

Hallo,

ich hab jetzt padding:1px; das ändert aber garnichts. Um Abstände zu definieren gibt es nur, IMHO, margin und padding. Wie gesagt; beides mittlerweile die _gleiche_ Klasse.

Wenn ich den Anker a href in ein Blockelement p ändere klappt es, egal ob unterschiedliche (die gleich definiert sind) oder gleiche Klasse.

Dennis

[Detlef G.]

Hallo Dennis

ich hab jetzt padding:1px; das ändert aber garnichts.

2 * (margin:1px + padding:1px) ergibt einen Abstand des Textes von 4px
2 * (margin:1px + padding:0) ergibt 2px

Um Abstände zu definieren gibt es nur, IMHO, margin und padding. Wie gesagt; beides mittlerweile die _gleiche_ Klasse.

Mit dem padding oder ohne?

Wenn ich den Anker a href in ein Blockelement p ändere klappt es, egal ob unterschiedliche (die gleich definiert sind) oder gleiche Klasse.

Natürlich, denn nicht deine Definitionen sondern die Elemente sind
unterschiedlich. (Blockelement <> Inlineelement).
Was passiert, wenn du z.B statt des <p> auch ein <a> verwendest, oder ein
<span> oder du dem <a> ein display:block gibst, immer vorausgesetzt die
Werte für margin, padding, height und line-height sind identisch.

Auf Wiederlesen
Detlef