Site wird im Firefox falsch angezeigt

lukiB · 13 November 2007

Hallo,
Habe vor kurtzer Zeit jetzt mit CSS angefangen (habe daher noch fast keine kenntnisse damit) meine Homepage zu designen und stehe nun vor folgendem Problehm:

Ich arbeite mit dem HTML Studio1.4.
Meine Seite wird immer automatisch im IE 7.0 angezeigt und da funkt sie auch super... wenn ich sie jetzt aber im FireFox öffne sind die Boxen verschoben und alles falsch. Ich weis nicht warum.

Dies ist der Code der Seite:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">


 <div id="seitenbereich">

  <div id="kopfzeile">

    <FONT SIZE=1 COLOR=#ffffff>
 <FONT FACE="Comic Sans MS">
    Kontakt: [email protected]
    

</div>

<head>
<link rel="stylesheet" type="text/css"
media="screen" href="design.css" />
</head>

<body>


  <FONT SIZE=3 COLOR=#ffffff>
 <FONT FACE="Comic Sans MS">


<div id="navi">
 <ul>
  <li><a href="indeRx.htm">Startseite</a></li>
  <li><a href="uebTer-mich.htm">Über mich</a></li>
  <li><a href="terSDmine.htm">Modellbau</a></li>
  <li><a href="computer.htm">Computer</a></li>
   <li><a href="xxHxxx.htm">Links</a></li>
  </ul>

   </div>


<div style="background-color:#4169e1;
            width:797px;
            height:600px;
            border:2px black solid
">
<FONT SIZE=3 COLOR=#000000>
 <FONT FACE="Comic Sans MS">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  UnterNavi

  <div>
  <div style="float: left;">
    <div style="background-color:white;
            width:130px;
            height:200px;
            border:2px black solid;
            margin-top:20px;
            margin-left:10px;

">

<FONT SIZE=3 COLOR=#000000>
 <FONT FACE="Comic Sans MS">

<b>   <a href="http://www.der-schweighofer.de/" target="_blank">Modellbaushop</a></b>  <br/>


</div>

  </div>
  <div style="float: right;">
    <div style="background-color:#ffffff;
            width:600px;
            height:500px;
            border:2px black solid;
            margin-top:20px;
            margin-left:10px;
            margin-right:10px;

">

<FONT SIZE=2 COLOR=#000000>
 <FONT FACE="Comic Sans MS">

<B> text </br>    text <a href="ueber mich.htm"> Das bin ich </a></b>

<p align=center>
<p><p align=center>  <IMG SRC="zahnrad-8.gif" ALT="Ein Bild" WIDTH=100 HEIGHT=100>   </p>   </p>    </br>
<b>text


</div>

  </div>
</div>

</div>

   <div style="background-color:#4169e1;
            width:797px;
            height:150px;
            border-bottom:2px black solid;
             border-left:2px black solid;
             border-right:2px black solid;

">


<FONT SIZE=3 COLOR=#000000>
 <FONT FACE="Comic Sans MS">


 </div>

<div style="background-color:#000080;
            width:797px;
            height:60px;
            border-bottom:2px black solid;
             border-left:2px black solid;
             border-right:2px black solid;

">
<FONT SIZE=3 COLOR=#000000>
 <FONT FACE="Comic Sans MS">

  <p align=center>
  <a href="http://www.wieistmeineip.de/cometo/?de"><img src="http://www.wieistmeineip.de/ip-adresse/?size=468x60" border="0" width="468" height="60" alt="IP" /></a>


 </div>
</font>
</body>
 
 </html>

Möglicherweise weis einer von euch was ich ändern muss damit sei im FireFox auch richtig angezeigt wird... Ich währe euch sehr dankbar.
Sagt mir wenn ihr den DesignCode auch sehen müsst

Vielen Dank!!!

threadi · 14 November 2007

Zwischen <html> und <head> darf nichts stehen.

Schmeiß die <font>-Tags raus.

Validiere die Seite mit einem Validator und beseitige evtl. vorhandene weitere Probleme.

Danach kann man vielleicht mal weitersehen ...

lukiB · 14 November 2007

Was genau heist Validieren?

mi-schi · 14 November 2007

Google Übersetzer

threadi · 15 November 2007

Und um es in HTML-Fachsprache zu übersetzen: die Überprüfung des Codes auf seine Gültigkeit anhand der vom W3C spezifizierten möglichen Angaben. An diese halten sich auch Hersteller moderner Browser (meist), was die Darstellung in diesen Browsern einheitlich sicherstellt (oder sicherstellen sollte).

mi-schi · 15 November 2007

Ich hatte doch die Englisch-Deutsch-Übersetzung gepostet. Warum ist der nicht mehr da?

Maxi · 15 November 2007

lukiB schrieb:
Meine Seite wird immer automatisch im IE 7.0 angezeigt und da funkt sie auch super... wenn ich sie jetzt aber im FireFox öffne sind die Boxen verschoben und alles falsch. Ich weis nicht warum.

Nicht der Internet-Explorer zeigt dein design richtig an, sondern Firefox schon eher. Das heißt, dass dein Code irgednwas enthält, was einen guten Browser daran stört, die Seite korrekt anzeigen zu lassen.

lukiB · 16 November 2007

Ja aber was ist das Problehm?

von threadi:
Schmeiß die <font>-Tags raus...

Wie kann ich die Schrift denn sonst gestalten?

Danke!

threadi · 16 November 2007

Mit CSS natürlich: SELFHTML: Stylesheets / CSS-Eigenschaften / Schriftformatierung

nikisback · 17 November 2007

1. wäre gut, wenn du den css code von der design.css nochmal angegeben hättest

2. dein code ist so unübersichtlch, dass sich mir sämtliche rückenhaare aufrichten

3. der code macht auf mich den Eintrug, als hättest du ihn von irgendeiner
schlecht gecodeten page kopiert und für dich zurecht gebastelt.

4. du hast hast div anweisungen teilweise total falsch benutzt, bzw. ist der stil teilweise richtig schlecht.

5. Der Firefox zeigt alles richtig an. Du hast nur immer für den IE gecoded,
und den Dialekt vom Firefox kennst du noch nicht.

6. Das ost jetzt mein subjektives Empfinden, aber du solltest immer für den Firefox coden. Dadurch müsstest du automatisch einen bessern Syntax bekommen.
Der IE unterstützt z.B. keine Transparenz, für den musst du immer irgendwelche Filter einbauen....
Firefox ist einfach besser... ich denke mal, da werden mir so ziemlich alle zustimmen.

lukiB · 17 November 2007

Ja tut mir leid das mein Code so unübersichtlich und falsch ist, ich mache das mit dem CSS einfach noch nicht lange und habe in dem Bereich auch noch keine erfahrungen... Ich habe den Code allerdings NICHT von irgeneiner Page geholt sondern selbst aufgebaut... Möglicherweise habt ihr mir einen Tipp, wo ich richtig CSS lernen kann!? Das wäre sehr nett.

Hier mal mein Design Code:

Code:

<html>

<head>
<style type="text/css">
<!--





body {
  text-align: center; 
}

#seitenbereich {
  text-align:left;  
  margin: 0 auto;   
  width: 800px;
  border-left:2px solid black;
  border-right:2px solid black;

   background-image: url("higru234.jpg");

}





 #kopfzeile {

  background-image: url("higru123.jpg");


  border-bottom:1px solid black;
}





 #navi {
   text-align:left;               
   margin-top:10px;               
   margin-bottom:10px;           
   margin-left:20px;             
   margin-right:15px;             
 }

 #navi ul {
   list-style:none;               
 }

 #navi li {
   float:left;                    
   margin-left:15px;              
   width:100px;                    


   background-image:<img src="button.jpg"></a>
   background-color:none;      
   border-top:2px black solid;    
   border-left:2px black solid;  
   border-bottom:2px black solid;    
   border-right:2px black solid;    
   margin-top:10px;              
   margin-bottom:20px;
   padding-top:8px;                
   padding-bottom:8px;             
   padding-left:8px;               
   padding-right:8px;              
 }


 #navi a:link { color:blue; text-decoration:none; }
  #navi a:visited { color:black; text-decoration:none; }
 #navi a:focus { color:green; text-decoration:overline; }
 #navi a:hover { color:red; text-decoration:none; }
 #navi a:active { color:orange; text-decoration:underline; }
 
 
 
 
-->
</style>

 <div id="seitenbereich">

  <div id="kopfzeile">



 <FONT SIZE=1 COLOR=#ffffff>
 <FONT FACE="Comic Sans MS">
    Kontakt: [email protected]

</div>

</head>
<body>
</body>

</html>

Also ich verstehe das einfach nicht... Ich habe mir im Internet Sachen angeschaut für CSS und so meine Seite aufgebaut. Ich habe nie etwas davon gelesen das der Code im Firefox anders sein muss... Ich finde den Firefox auch besser als den IE und ich benutze den auch immer. Aber das
HTML Studio 1.4 benutzt halt für die schnellansicht des Codes bei mir den IE. Ich weis auch nicht warum!!?

Danke für eure Hilfe!!!

threadi · 17 November 2007

HTML-Code der im Firefox und anderen modernen Browsern korrekt dargestellte Seiten erzeugen soll muss erstmal den einfachsten HTML-Regeln entsprechen. Valider Code nach W3C-Vorgaben erleichtert dabei oft die Suche nach Fehlern im HTML-Code. In deinem Code sind 5 sehr grobe Fehler enthalten:

- ein DOCTYPE fehlt: nur wenn der vorhanden ist wird der Quellcode auch im Firefox korrekt interpretiert (einfach ausgedrück)
- der eigentliche Inhalt der ausgegeben wird kommt in den body, nicht in den head
- 2 font-Tags öffnen, werden aber nicht geschlossen
- font-Tags sollte man nicht verwenden!
- 2 div-Tags werden geöffnet, aber nur eines geschlossen

Statt der font-Tags sollte man wie schon gesagt CSS verwenden! Habe daher die Angaben von diesen Tags im CSS bei #kopfzeile ergänzt und die font-Tags natürlich entfernt.

Richtig sähe es so aus:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
body {
  text-align: center; 
}
#seitenbereich {
  text-align:left;  
  margin: 0 auto;   
  width: 800px;
  border-left:2px solid black;
  border-right:2px solid black;

   background-image: url("higru234.jpg");

}
 #kopfzeile {
  background-image: url("higru123.jpg");
  border-bottom:1px solid black;
  font-family: Comic Sans MS;
  font-size: 0.7em;
}
 #navi {
   text-align:left;               
   margin-top:10px;               
   margin-bottom:10px;           
   margin-left:20px;             
   margin-right:15px;             
 }
 #navi ul {
   list-style:none;               
 }
 #navi li {
   float:left;                    
   margin-left:15px;              
   width:100px;                    
   background-image:<img src="button.jpg"></a>
   background-color:none;      
   border-top:2px black solid;    
   border-left:2px black solid;  
   border-bottom:2px black solid;    
   border-right:2px black solid;    
   margin-top:10px;              
   margin-bottom:20px;
   padding-top:8px;                
   padding-bottom:8px;             
   padding-left:8px;               
   padding-right:8px;              
 }
 #navi a:link { color:blue; text-decoration:none; }
 #navi a:visited { color:black; text-decoration:none; }
 #navi a:focus { color:green; text-decoration:overline; }
 #navi a:hover { color:red; text-decoration:none; }
 #navi a:active { color:orange; text-decoration:underline; }
 -->
</style>
</head>
<body>
 <div id="seitenbereich">
  <div id="kopfzeile">
    Kontakt: [email protected]
  </div>
 </div>
</body>
</html>

Falls dieser Code von diesem HTML Studio erzeugt wurde oder auch so von diesem akzeptiert wurde würde ich das schnell vergessen. Nutze lieber einen reinen Text-Editor zum Bearbeiten und lies dir nochmal selfhtml durch (Link hatte ich schon gesetzt).

lukiB · 22 November 2007

Ja Danke für die hilfe aber der Code ändert nichts im FireFox...!! genau das selbe wie mit dem alten Code.
Komisch aber ich werde das jetzt mal Validieren und schau dann weiter.
Ich habe jezt die font tags aus meinem Code geworfen und das mit CSS gemacht... wenn ich jetzt aber den
Code Validiere kommen immernoch ungefär 30 fehler, die ich aber nicht beheben kann blöderweise. Hier mein geänderter Code

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

 <head>
 <title>lukiB´s Hp</title>

  <link rel="stylesheet" type="text/css"
media="screen" href="design.css" />



 </head>

 <body>



 <div id="seitenbereich">

    <div id="kopfzeile">


   <p><span style="font-family:'monospace',Times,serif;font-size:0.7em;font-weight:none;color:white"> </p>

  Kontakt: [email protected]
  </span><br>

</div>












<p><span style="font-family:'monospace',Times,serif;font-size:1.0em;font-weight:bold;color:white"> </p>





<div id="navi">
 <ul>
  <li><a href="indeRx.htm">Startseite</a></li>
  <li><a href="uebTer-mich.htm">Über mich</a></li>
  <li><a href="terSDmine.htm">Modellbau</a></li>
  <li><a href="computer.htm">Computer</a></li>
   <li><a href="xxHxxx.htm">Links</a></li>
  </ul>

   </div>
 </span><br>



   <div style="background-color:#4169e1;
            width:797px;
            height:600px;
            border:2px black solid
">




<div>
  <div style="float: left;">
    <div style="background-color:white;
            width:130px;
            height:200px;
            border:2px black solid;
            margin-top:20px;
            margin-left:10px;


">

</div>

  </div>
  <div style="float: right;">
    <div style="background-color:#ffffff;
            width:600px;
            height:500px;
            border:2px black solid;
            margin-top:20px;
            margin-left:10px;
            margin-right:10px;

">


<p><span style="font-family:'monospace',Times,serif;font-size:0.9em;font-weight:bold;color:black"> </p>





<b> xxx <br>    xxxxx
xxx<br> xxx<a href="ueber mich.htm"> Das bin ich </a>
 </b>
<p align=center>
<p><p align="center">  <IMG SRC="zahnrad-8.gif" ALT="Ein Bild" WIDTH="100" HEIGHT="100">   </p>       <br>   </p>
<b>An dieser Seit wird noch gearbeitet. Ansehen kann man sie aber....immer </b>
<<
 </span><br>


</div>

  </div>
</div>

</div>

   <div style="background-color:#4169e1;
            width:797px;
            height:150px;
            border-bottom:2px black solid;
             border-left:2px black solid;
             border-right:2px black solid;



">

</div>

<div style="background-color:#000080;
            width:797px;
            height:60px;
            border-bottom:2px black solid;
             border-left:2px black solid;
             border-right:2px black solid;




">


<p align=center>
  <a href="http://www.wieistmeineip.de/cometo/?de"><img src="http://www.wieistmeineip.de/ip-adresse/?size=468x60" border="0" width="468" height="60" alt="IP" /></a>

</div>

 </div>
</span><br>
 </body>
 
 </html>

Wenn ihr euch diesen Code mal im validator anschaun könntet wäre das sehr nett.....

mfg lukiB

Site wird im Firefox falsch angezeigt

lukiB

Mitglied

threadi

Moderator

lukiB

Mitglied

mi-schi

Neues Mitglied

threadi

Moderator

mi-schi

Neues Mitglied

Maxi

Neues Mitglied

lukiB

Mitglied

threadi

Moderator

nikisback

Neues Mitglied

lukiB

Mitglied

threadi

Moderator

lukiB

Mitglied

Neueste Beiträge