Delphi-PRAXiS

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)
-   Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)
-   -   [HTML] Dartsellungsprobleme zwischen IE u. FireFox (https://www.delphipraxis.net/41475-%5Bhtml%5D-dartsellungsprobleme-zwischen-ie-u-firefox.html)

maynard 3. Mär 2005 23:50
[HTML] Dartsellungsprobleme zwischen IE u. FireFox
 
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 ::
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 ::
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 4. Mär 2005 01:04
Re: [HTML] Dartsellungsprobleme zwischen IE u. FireFox
 
Syntax Fehler in deinem CSS Quelltext!

maynard 4. Mär 2005 03:10
Re: [HTML] Dartsellungsprobleme zwischen IE u. FireFox
 
Tach...

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

Sprint 4. Mär 2005 03:32
Re: [HTML] Dartsellungsprobleme zwischen IE u. FireFox
 
Hinter "}" kommt kein ";".

maynard 4. Mär 2005 12:57
Re: [HTML] Dartsellungsprobleme zwischen IE u. FireFox
 
Tach...

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

maynard 4. Mär 2005 16:28
Re: [HTML] Dartsellungsprobleme zwischen IE u. FireFox
 
Liste der Anhänge anzeigen (Anzahl: 1)
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 ::
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 ::
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 4. Mär 2005 16:36
Re: [HTML] Dartsellungsprobleme zwischen IE u. FireFox
 
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 4. Mär 2005 18:05
Re: [HTML] Dartsellungsprobleme zwischen IE u. FireFox
 
Moin..
Zitat:
Code:
.td_spacer_vertical_content { 
   height:                          10px;
   width:                          72;
Setzt mal hinter die 72 ein Prozentzeichen.:cyclops:

Gruß Hasse

maynard 4. Mär 2005 22:38
Re: [HTML] Dartsellungsprobleme zwischen IE u. FireFox
 
Liste der Anhänge anzeigen (Anzahl: 1)
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. :x

MfG

Hasse 5. Mär 2005 12:44
Re: [HTML] Dartsellungsprobleme zwischen IE u. FireFox
 
Verwende mal die padding-Befehle in den unteren zwei Zeilen genau so, wie in der oben (5px...)


Alle Zeitangaben in WEZ +1. Es ist jetzt 11:57 Uhr.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO © 2011, Crawlability, Inc.
Delphi-PRAXiS (c) 2002 - 2023 by Daniel R. Wolf, 2024 by Thomas Breitkreuz