[HTML] Dartsellungsprobleme zwischen IE u. FireFox

**maynard**

Tach...

Bis jetzt hab ich nie Probleme gehabt, da ich nur mit dem FireFox Webseiten betrachte und jede immer recht gut ausgeschaut hat. Aber bei meinen eigenen Versuchen schaut alles scheiße aus...

Ein Beispiel HTML - Code ::

markieren

Code:

			<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>New Document</title>

    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

      <link rel="stylesheet" type="text/css" href="default3.css">

  </head>

  <body>

      <table class="tbl_header">

         <tr>

            <td>Fehler</td>

            <td>Fehler</td>

            <td>Fehler</td>

            <td>Fehler</td>

            <td>Fehler</td>

            <td>Fehler</td>

         </tr>

      </table>    

  </body>

</html>

Ein Beispiel CSS - Code ::

markieren

Code:

			body {

   margin-top:                   5%;

   margin-bottom:               5%;

   margin-left:                  3%;

   margin-right:                  3%;

   background-color:            #7E97A2;   

}

a:link, a:visited {

   font-family:                  Verdana, Tahoma, Arial;

   font-size:                     10pt;

   text-decoration:            none;

   color:                            #5A737D;

};

a:active, a:hover {

   font-family:                  Verdana, Tahoma, Arial;

   font-size:                     10pt;

   text-decoration:            none;

   color:                            #000000;

};

.tbl_header {

   width:                           100%;

   table-layout:                  fixed;

   background-color:            #FFFFFF;

   border-left-width:         1px;

   border-left-style:         solid;

   border-right-width:         1px;

   border-right-style:         solid;

   border-top-width:            1px;

   border-top-style:            solid;

   border-bottom-width:      0px;   

   border-bottom-style:      none;

   border-collapse:            collapse;

   border-color:                  #4F656E;

   border-spacing:               0px;

   font-family:                  Verdana;

}

Meiner Meinung nach müssten sich die kleinen Ausschnitte doch an sämtliche Standarts halten, doch irgendwie zeigt der IE (Version 6.0.2800.1106) aller korrekt an und FireFox (Version 1.0) färbt lediglich den Hintergrund des boys und schreibt den Text hintereinander weg ... vermutlich tatsächlich in die Zellen. Aber die Tabelle hat keinen Hintergrund und keine Rahmen. Was mach ich falsch?

MfG

**Sprint**

Syntax Fehler in deinem CSS Quelltext!

**maynard**

Tach...

Dann hilf mir mal auf die Sprünge ... ich seh nämlich keinen!

**Sprint**

Hinter "}" kommt kein ";".

**maynard**

Tach...

omg

jetzt wo dus sagst ... Hab ich voll übersehen ... Danke!

**maynard**

Tach...

Ganz ist das Problem doch noch nicht gelöst. Ich hab den Fehler in den Originaldateien behoben was eine teilweise Verbesserung gebracht hat, aber einen Fehler gibts immernoch.

HTML Code ::

markieren

Code:

			<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>New Document</title>

    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

      <link rel="stylesheet" type="text/css" href="default2.css">

  </head>

  <body>

      <table class="tbl_header">

         <tr>

            <td class="td_spacer_left_1"></td>

            <td class="td_spacer_left_2"></td>

            <td class="td_header_title">Das ist der Title</td>

            <td class="td_header_language">[img]gfx/flag_ger.png[/img]</td>

            <td class="td_spacer_right_2"></td>

            <td class="td_spacer_right_1"></td>

         </tr>

      </table>

      <table class="tbl_main">   

         <tr>

            <td class="td_spacer_left_1"></td>

            <td class="td_spacer_left_2"></td>

            <td class="td_spacer_vertical_menu"></td>

            <td class="td_spacer_vertical_content"></td>

            <td class="td_spacer_right_2"></td>

            <td class="td_spacer_right_1"></td>

         </tr>   

         <tr>

            <td class="td_spacer_left_1"></td>

            <td class="td_spacer_left_2"></td>

            <td class="td_menu">[url="test.html"]Link 1[/url]</td>

            <td class="td_content">Inhalt</td>

            <td class="td_spacer_right_2"></td>

            <td class="td_spacer_right_1"></td>

         </tr>

      </table>

  </body>

</html>

CSS Code ::

markieren

Code:

			body {

   margin-top:                   5%;

   margin-bottom:               5%;

   margin-left:                  3%;

   margin-right:                  3%;

   background-color:            #7E97A2;   

}

a:link, a:visited {

   font-family:                  Verdana, Tahoma, Arial;

   font-size:                     10pt;

   text-decoration:            none;

   color:                            #5A737D;

}

a:active, a:hover {

   font-family:                  Verdana, Tahoma, Arial;

   font-size:                     10pt;

   text-decoration:            none;

   color:                            #000000;

}

.tbl_header {

   width:                           100%;

   table-layout:                  fixed;

   background-color:            #FFFFFF;

   border-left-width:         1px;

   border-left-style:         solid;

   border-right-width:         1px;

   border-right-style:         solid;

   border-top-width:            1px;

   border-top-style:            solid;

   border-bottom-width:      0px;   

   border-bottom-style:      none;

   border-collapse:            collapse;

   border-color:                  #4F656E;

   border-spacing:               0px;

}

.td_spacer_left_1 {

   width:                           2%;

   text-align:                     left;

   vertical-align:               top;

   background-color:            #C7D2D6;

}

.td_spacer_left_2 {

   width:                           2%;

   text-align:                     left;

   vertical-align:               top;

   background-color:            #FFFFFF;

}

.td_spacer_right_1 {

   width:                           2%;

   text-align:                     right;

   vertical-align:               top;

   background-color:            #C7D2D6;

}

.td_spacer_right_2 {

   width:                           2%;

   text-align:                     right;

   vertical-align:               top;

   background-color:            #FFFFFF;

}

.td_header_title {

   width:                           72%;

   border-bottom-width:      1px;

   border-bottom-style:      dashed;

   border-bottom-color:      #C7D2D6;

   padding-left:                  0px;

   padding-right:               5px;

   padding-top:                  5px;

   padding-bottom:               5px;

   text-align:                     left;

   vertical-align:               middle;

   font-family:                  Verdana, Tahoma, Arial;

   font-size:                     12pt;

   font-weight:                  bold;

   color:                           #5A737D;

}

.td_header_language {

   width:                           20%;

   border-bottom-width:      1px;

   border-bottom-style:      dashed;

   border-bottom-color:      #C7D2D6;

   padding-left:                  5px;

   padding-right:               0px;

   padding-top:                  5px;

   padding-bottom:               5px;

   text-align:                     right;

   vertical-align:               middle;

}

.tbl_main {

   width:                           100%;

   table-layout:                  fixed;

   background-color:            #FFFFFF;

   border-left-width:         1px;

   border-left-style:         solid;

   border-right-width:         1px;

   border-right-style:         solid;

   border-top-width:            0px;

   border-top-style:            none;

   border-bottom-width:      1px;   

   border-bottom-style:      solid;

   border-collapse:            collapse;

   border-color:                  #4F656E;

   border-spacing:               0px;

}

.td_spacer_vertical_menu {

   height:                           10px;

   width:                           20%;

}

.td_spacer_vertical_content {

   height:                           10px;

   width:                           72;

}

.td_menu {

   width:                           20%;

   text-align:                     left;

   vertical-align:               top;

   border-right-width:         1px;

   border-right-style:         dashed;

   border-right-color:         #C7D2D6;

}

.td_content {

   width:                           72%;

   padding-left:                  2%;

   padding-right:               2%;

   text-align:                     left;

   vertical-align:               top;

   font-family:                  Verdana, Tahoma, Arial;

   font-size:                     10pt;

   font-weight:                  normal;

   color:                           #000000;

}

Wenn ich im HTML die Tabellen - Zeile unter dem ersten Kommentar weglasse oder durch die Tabellen - Zeile unter dem Kommentar ersetze wird alles korrekt dargestellt. Das ist aber nicht was ich will, es soll ein Abstand bleiben, damit der linke Rahmen des Menubereichs nicht komplett durchgezogen ist. Wie es ausschaut siehe Anhang. Der grau Rand (rechts u. links) ist in der unteren Tabelle viel zu breit ... er müsste sich genauso verhalten wie oben .. auch dürfte das Menu nur 20 % haben u. der Content 72 % ... hat sich aber alles verschoben.
Der grau Ran

MfG

**noch_ein_hannes**

es könnte evtl. auch an den Unterstrichen in den Style-Klassen-Namen liegen.
Hilfreich ist übrigens im Firefox die "Developer Toolbar", damit kann man ne Menge testen ....

**Hasse**

Moin..

Zitat:

markieren

Code:

			.td_spacer_vertical_content { 

   height:                           10px; 

   width:                           72;

Setzt mal hinter die 72 ein Prozentzeichen.

Gruß Hasse

**maynard**

Tach...

Danke, dass hab ich in dem ganzen WirrWarr übersehen. Leider hauts immer noch nicht ganz hin, und dass obwohl CSS und HTML W3C valid sind. Vor 3 - 4 Jahren hab ich viele HPs erfolgreich entwickelt. Da gabs noch nicht die Vorteile von CSS u. PHP bzw. sie waren grad im Kommen ... aber man hat sich auch ein bischen Ärger erspart.

MfG

**Hasse**

Verwende mal die padding-Befehle in den unteren zwei Zeilen genau so, wie in der oben (5px...)

[HTML] Dartsellungsprobleme zwischen IE u. FireFox

[HTML] Dartsellungsprobleme zwischen IE u. FireFox

Re: [HTML] Dartsellungsprobleme zwischen IE u. FireFox

Re: [HTML] Dartsellungsprobleme zwischen IE u. FireFox

Re: [HTML] Dartsellungsprobleme zwischen IE u. FireFox

Re: [HTML] Dartsellungsprobleme zwischen IE u. FireFox

Re: [HTML] Dartsellungsprobleme zwischen IE u. FireFox

Re: [HTML] Dartsellungsprobleme zwischen IE u. FireFox

Re: [HTML] Dartsellungsprobleme zwischen IE u. FireFox

Re: [HTML] Dartsellungsprobleme zwischen IE u. FireFox

Re: [HTML] Dartsellungsprobleme zwischen IE u. FireFox

Forumregeln

Sprint Registriert seit: 18. Aug 2004 Ort: Edewecht 712 Beiträge Delphi 5 Professional	#2 Re: [HTML] Dartsellungsprobleme zwischen IE u. FireFox 4. Mär 2005, 01:04 Syntax Fehler in deinem CSS Quelltext! Ciao, Sprint. "I don't know what I am doing, but I am sure I am having fun!"
	Zitat

maynard Registriert seit: 22. Jun 2004 Ort: Deutschland 72 Beiträge Delphi 7 Enterprise	#3 Re: [HTML] Dartsellungsprobleme zwischen IE u. FireFox 4. Mär 2005, 03:10 Tach... Dann hilf mir mal auf die Sprünge ... ich seh nämlich keinen! "Denkst Du dasselbe wie ich, Pinky?" - "Ich glaube schon, Brain, aber was ist, wenn das Huhn die Strumpfhosen nicht anziehen will...?" http://www.programmierer-board.de/ph...fc628a1239.jpg
	Zitat

Sprint Registriert seit: 18. Aug 2004 Ort: Edewecht 712 Beiträge Delphi 5 Professional	#4 Re: [HTML] Dartsellungsprobleme zwischen IE u. FireFox 4. Mär 2005, 03:32 Hinter "}" kommt kein ";". Ciao, Sprint. "I don't know what I am doing, but I am sure I am having fun!"
	Zitat

maynard Registriert seit: 22. Jun 2004 Ort: Deutschland 72 Beiträge Delphi 7 Enterprise	#5 Re: [HTML] Dartsellungsprobleme zwischen IE u. FireFox 4. Mär 2005, 12:57 Tach... omg jetzt wo dus sagst ... Hab ich voll übersehen ... Danke! "Denkst Du dasselbe wie ich, Pinky?" - "Ich glaube schon, Brain, aber was ist, wenn das Huhn die Strumpfhosen nicht anziehen will...?" http://www.programmierer-board.de/ph...fc628a1239.jpg
	Zitat

noch_ein_hannes Registriert seit: 18. Sep 2003 130 Beiträge	#7 Re: [HTML] Dartsellungsprobleme zwischen IE u. FireFox 4. Mär 2005, 16:36 es könnte evtl. auch an den Unterstrichen in den Style-Klassen-Namen liegen. Hilfreich ist übrigens im Firefox die "Developer Toolbar", damit kann man ne Menge testen .... - everything is possible -
	Zitat

Hasse Registriert seit: 24. Sep 2004 Ort: Bad Kösen 35 Beiträge Delphi 7 Professional	#8 Re: [HTML] Dartsellungsprobleme zwischen IE u. FireFox 4. Mär 2005, 18:05 Moin.. Zitat: markieren Code: .td_spacer_vertical_content { height: 10px; width: 72; Setzt mal hinter die 72 ein Prozentzeichen. Gruß Hasse
	Zitat

Hasse Registriert seit: 24. Sep 2004 Ort: Bad Kösen 35 Beiträge Delphi 7 Professional	#10 Re: [HTML] Dartsellungsprobleme zwischen IE u. FireFox 5. Mär 2005, 12:44 Verwende mal die padding-Befehle in den unteren zwei Zeilen genau so, wie in der oben (5px...)
	Zitat