Browserprobleme firefox

Blue

Hallo zusammen,

ich habe plötzlich ein Problem mit der Darstellung folgender Testseite:

http://www.exist-cologne.de/index44.html

Bei FF stimmen die Zeilenabstände im Menue nicht u. die Tabelle insgesamt ist eindeutig zu groß. Bei ie paßt sie genau in meinem Bildschirm bei ff nicht.

Woran liegt das?

Ich habe die site mehrmals durch den Validator laufen lassen nur 6 Fehler *freu*, der gibt aber nur so Tipps wie Attribut bordercolor existiert nicht ... (tut es doch wie man sieht ....
Außerdem hab ich es sowohl mit festen px-werten für die Tabellengröße u. mit % Angaben versucht - die Darstellung im ff bleibt unbefriedigen!

Was kann ich tun um im FF das zu sehen, was ich sehen will?

Danke u. Gruß

p.s. ich habe natürlich zuerst im FF-forum nahcgefragt, aber dort bekomme ich trotz vieler views keine Antwort.

als erstes mach mal statt

und setz in die oberste tabelle:
cellspacing="0" cellpadding="0"

ich weiß nicht genau was du möchtest.
möchtest du das sich die seite komplett der größe des browserfensters anpasst?
und wieso läßt du freiräume zwischen den buttons der navi?
kannst du wenn du schon mit tabellen arbeitest doch auch gleich in zeilen einer tabelle haun obwohl man heut zu tage eher zu css greift

mfg katy

Blue

...das ist ja gerade das Problem. Die Abstände! Ein kleiner Abstand ist gewollt, damit sie nicht so aufeinander kleben.

Bei FF sind Abstände u. die Tabellenenden unterschiedlich - also der kleine hellgrüne Streifen ist z. B. ca. 2 cm kürzer als die darunter gelegene Menuespalte, obwohl <td> mit 25 % angegeben ist genau wie in der darunter liegendenden Tabelle und somit paßt das alles nicht. Die Tabelle bzw. sichtbare Seite ist außerdem viel größer als im ie - sie soll nicht das Browserfenster ausfüllen sondern nur ca. 80 % und mittig sitzen. Sowie es im IE aussieht war es gedacht!

css ist eine gute Idee, aber leider kann ich da bisher noch nicht so viel

hab ich in
geändert, hat aber nichts an der Darstellung geändert.

phore

schau mal ob du irgendwas mit margin oder padding falsch gemacht hast

Blue

@ kathie

Nun hab ich auch die navi noch in eine Tabelle mit einzelnen Zeilen gepackt! Im ie sieht es nach wie vor sehr gut aus im FF sind die Abstände noch größer geworden - und die Fraktion *Tabellen nicht für Layouts* habe ich damit wahrscheinlich völlig gegen mich

Hat den keiner eine Idee?

@ phore

ich glaube nicht, aber ich versuch es gerne noch mal

Blue

ich weiß woran es lag ....

@ phore deine Idee mit dem padding war gut es war in diesem
css:

Code

<!--
#navigation a {display: block; padding:0px; padding-left:0px; text-decoration:none; background-image:url(img/Button_1a_small.jpg); background-repeat:no-repeat; width: 189px; height:38px;}


#navigation a:hover {display: block; padding:0px; padding-left:0px; text-decoration:none; background-image:url(img/Button_2b_small.jpg); background-repeat:no-repeat; width: 189px; height:38px }
-->

um die Schrift in die Mitte der Buttons zu bekommen habe ich padding auf 9px u. padding-left auf 38 px gesetzt, das hat die Buttons bzw. den unsichtbaren Rand (?) darum vergrößert, sah man auch beim anklicken als gestrichelte Linie.

Nun paßt die Form der Seite aber ich hab keine Beschriftung mehr auf den Buttons.
Also ein neues Problem!!!

Ronald

Was hältst du davon:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>exist-cologne</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="Description" lang="de" content="Hier gibt es Informationen &uuml;ber Existenzgruendung, Finanzierung u. Restart">
<meta name="keywords" content="Existenzgruendung, Finanzierung, Restart, Wirtschaft">
<meta name="language" content="de">
<meta name="robots" content="index,follow">
<link rel="stylesheet" href="des1.css" type="text/css">
<style type="text/css">
<!--
#navigation a, #navigation a:visited {display: block; text-decoration:none; background-image:url(http://exist-cologne.de/img/Button_1a_small.jpg); background-repeat:no-repeat; width: 189px; height:38px; line-height:38px; text-indent:40px; font-weight:bold; color:#FFFFFF; font-size:11px;}


#navigation a:hover {background-image:url(http://exist-cologne.de/img/Button_2b_small.jpg);}
-->
</style>
</head>


<body style="margin:0px">
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="1">
 <tr>
  <td align="center" style="padding:5px">
   <table style="height:100%;width:870px;border:1px solid #4B5C4A" cellpadding="0" cellspacing="0">
    <tr>
     <td colspan="2" style="background-image:url(http://exist-cologne.de/img/header2.jpg);width:870px;height:125px">
     </td>
    </tr>
    <tr>
     <td colspan="2">
      <table style="width:100%;border:0px solid #4B5C4A" cellpadding="3" cellspacing="3">
       <tr>
        <td style="width:194px;background-color:#A0FF00"> </td>
        <td style="width:670px;background-color:#738D72">
         <font face="VERDANA"><font size="-1">
         [img]http://exist-cologne.de/img/pix.gif[/img]
         [url='text.html'][b]Informationen[/b][/url]
         [img]http://exist-cologne.de/img/pix.gif[/img]
         [url='start.html'][b]Termine[/b][/url]
         [img]http://exist-cologne.de/img/pix.gif[/img]
         [url='text.html'][b]Links[/b][/url]
         [img]http://exist-cologne.de/img/pix.gif[/img]
         [url='mailto:'][b]Kontakt[/b][/url]
         [img]http://exist-cologne.de/img/pix.gif[/img]
         [url='start.html'][b]Impressum[/b][/url]
         </font>
        </td>
       </tr>
      </table>
     </td>
    </tr>
    <tr>
     <td style="border-top:1px solid #4B5C4A;width:200px;border-bottom:1px solid #4B5C4A;width:200px" valign="top" align="center">
      <table id="navigation" cellspacing="0" cellpadding="3">
       <tr>
        <td>[url='start.html']Home[/url]</td>
       </tr>
        <td>[url='text.html']Existenzgr&uuml;ndung[/url]</td>
       </tr>
        <td>[url='start.html']Finanzmittel[/url]</td>
       </tr>
        <td>[url='text.html']Mikrofinanzierung[/url]</td>
       </tr>
        <td>[url='start.html']Existenzsicherung[/url]</td>
       </tr>
        <td>[url='text.html']Krisenmanagement[/url]</td>
       </tr>
        <td>[url='start.html']Restart[/url]</td>
       </tr>
      </table>
     </td>
     <td style="width:670px;background-color:#4B5C4A" align="center">
      <iframe src="start.html" style="width:100%;height:420" name="iframe" scrolling="auto" frameborder="0">



Ihr Browser kann leider keine eingebetteten Frames anzeigen! Bitte benutzen Sie ein Browser, der dem HTML 4.0 Standart entspricht. Dies ist der offizielle weltweite Internetstandart, welcher vom W3 Konsortium festgelegt wurde. Geeignete Browser sind zum Beispiel: Internet Explorer ab Version 5.0, Netscape Navigator ab Version 6.0, Konqueror 3.x, Mozilla ab Version 1.6 und einige Andere.</p>
      </iframe>
     </td>
    </tr>
    <tr>
     <td colspan="2" style="border:3px solid #FFFFFF;background-color:#FF9F00"></td>
    </tr>
   </table>
  </td>
 </tr>
</table>
</body>
</html>

Alles anzeigen

G.a.d.M.

Ronald

Blue

@ Ronald
superschön Danke dir. Es sieht im ie u. ff absiolut identisch aus!

Ich hab es mir kopiert, bin es durchgegangen, habe es etwas angepasst Farbe, Größe, sichtbare Ränder den optischen Schnickschack eben

Die Sache mit den Styledefinitionen werde ich mir sehr gut merken.
Außerdem wußte nicht, dass man problemlos % u. px Angaben zusammen verwenden kann.

Nur eine Frage: Warum funktioniert in Zeile 25 das ist die Definition der Spalte innerhalb der unsichtbaren 100 % großen Tabelle (ist das verständlich?°°) in der die 1. sichtbare Tabelle ist......... (ich hoffe es)

das Attribut valign="middle" nicht?

Ich habe jetzt das padding auf 30px erhöht um die Tabelle einigermaßen mittig zu kriegen.

Die Test url ist nun
http://www.exist-cologne.de/iindex55.html

Danke u. Gruß

Ronald

Hi!

Zitat von Blue

Nur eine Frage: Warum funktioniert in Zeile 25 das ist die Definition der Spalte innerhalb der unsichtbaren 100 % großen Tabelle (ist das verständlich?°°) in der die 1. sichtbare Tabelle ist......... (ich hoffe es)

<td align="center" style="padding:5px">

das Attribut valign="middle" nicht?

Stylesheets haben eine höhere Wertigkeit als HTML-Formatierungen. Durch das Padding bestimmst du einen Punkt, an dem die Ausgabe erfolgen soll - bei "padding:30px" ohne Zusatz beginnt deine Ausgabe in der Zelle genau 30 Pixel von oben und 30 Pixel von rechts. Das zuvor gesetzte "valign" ist dadurch ungültig und alles in der Zelle rutscht nach oben-rechts.

Die dann folgende Tabelle hat 100% Breite, von daher siehst du nicht, daß sie nach links gerutscht ist.

Du kannst in den Tags nachfolgender Elemente wieder neue Formatierungen/Ausrichtungen setzen, die sich dann aber immer nur auf den nachfolgenden Quelltext auswirken, nicht auf das, was vorher war.

G.a.d.M.

Ronald

Blue

Hi,

@ Ronald
Danke noch mal für Deine ausführlichen Erklärungen. Aber irgendwie ist mir immer noch nicht klar warum es hier:

Code

<td align="center" valign="middle" >
   <table style="height:70%;width:831px;border:1px solid #4B5C4A" cellpadding="0" cellspacing="0">

nicht funktioniert! Ein paar Reihen weiter aber:

Code

<td style="border:1px solid #4B5C4A;width:200px;height:400px" valign="middle" align="center">
      <table id="navigation" cellspacing="0" cellpadding="3">

funktioniert es einwandfrei. Ich habe die Gegenprobe gemacht mit kleineren Tabellenmaßen damit man die Bewegung sieht u. oben style="padding:30px" eingesetzt, man sieht deutlich wie die Tabelle nach unten rückt. Im unteren Abschnitt habe ich das valign="middle" rausgenommen u. die gesammte Navi springt an den oberen Rand der Tabelle. Im oberen Code tut sich aber mit valign="middle" überhaupt nix.

Einen schönen Silvesterabend u. einen Guten Rutsch euch allen.