mizekatze: Internetbrowser zeigt alles anders an

Beitrag lesen

Guten Tag,

Ich habe ein Problem. Ich arbeite zur Zeit mit PsPad und nutze auch den internen Browser von PsPad. In PsPad sieht alles schön und gut aus,aber sobald ich die Seite in z.B. Firefox öffne sieht alles anders aus verschoben etc. Hier sieht man den Browser im PsPad PsPad

Und hier sieht man den Firefox Browser

Firefox

Woran liegt das? Und wie kann ich das ändern?

Habe euch mal den Code auch reinkopiert! Vielleicht kann mir jemand den Fehler sagen


<!DOCTYPE html>
<html>

  <head>
   <link  rel="stylesheet" type="text/css" href="formatindex.css"  />
   <meta chraset="UTF-8">
   <title> Willkommen auf der Startseite des BKWI </title>
   <link href="bilder/favicon.ico" rel="shortcut icon">
  </head>

<body>
<div class="titel">
<img src="bilder/bkwi.png" alt="BKWI" width="200" height="90" />

</div>


<div class="navioben">


<a href="index.html"><img src="bilder/930.png" alt="BKWI" width="43" height="43"/></a>
<a href="schulplan.html">Schulplan</a>
<a href="anmeldeformular.html">Anmeldeformular</a>
<a href="kontakt.html">Kontakt</a>



</div>


<div class="navilinks">


</div>

<div class="inhalt">


<div class="mitte">
<img src="bilder/bkwi.png" alt="BKWI" width="400" height="200"  />
<h1> Berufskolleg Wirtschaftsinformatik </h1>
<h2> Eine Schulart der <a href="www.ks-bb.de">Kaufmännischen Schule</a> in Böblingen</h2>
</div>
<p>Zweijährige Schulart, die auf ein kaufmännisch orientiertes Tätigkeitsfeld in IT-Berufen vorbereitet .</p>

<p>Die Ausbildung vermittelt fachtheoretische und fachpraktische Kenntnisse. Sie soll die Absolventen befähigen,</p>
<p>kaufmännische und verwaltende Tätigkeiten in informationstechnologisch geprägten Aufgabenfeldern zu bewältigen,</p>
und die Chancen auf einen Ausbildungsplatz in IT-Berufen verbessern



</div>

<div class="navirechts">

<br /><br /><br />
<div class="mitte">
<a href="schulplan.html"><img src="bilder/ha1.png" alt="Hausaufgaben" onmouseover="src='bilder/ha2.png'" onmouseout="src='bilder/ha1.png'" width="35" height="35" /></a>
<a href="schulplan.html"><img src="bilder/info1.png" alt="Informationen" onmouseover="src='bilder/info2.png'" onmouseout="src='bilder/info1.png'" width="35" height="35" /></a>
<a href="schulplan.html"><img src="bilder/mail.png" alt="E-Mail" onmouseover="src='bilder/mail2_1.png'" onmouseout="src='bilder/mail.png'" width="35" height="35" /></a>
</div>
</body>

</html>


Und hier der CSS-Code



body
    {
     font-size: 12pt;
     color: black;
     background-color: #FFFFFF;
     font-family: verdana;
     /* cursor:  url(bilder/cat.ani), progress; */
    }
h1
    {
     font-size: 16pt;
    }

h2
    {
     font-size: 14pt;
    }
h3
    {
     font-size: 14pt;
     color: #0066FF;
    }
h4
    {
     font-size: 13pt;
    }

h5  {
     background-color: darkred;
     color: FFFFFF;
     padding: 8px;
    }




a:link
    {
     text-decoration: none;
     color: #C0C0C0;
     text-underline: none;
     font-size: 18pt;
    }

a:active
    {
     text-decoration: none;
     text-underline: none;
     color: #C0C0C0;
    }


a:visited
    {
     text-decoration: none;
     text-underline: none;
     color: #C0C0C0;

    }

a:hover
    {
      cursor:  url(bilder/finger.cur), progress;;
    }
 /*       Nicht mehr wichtig da a:hover
.mauszeiger
          body, a:hover {cursor: url(bilder/mittelfinger.cur), progress;} */

/* a.Tabelle ist die Klasse für die Tabelle */

a.tabelle:link
    {
     text-decoration: none;
     text-underline: none;
    }

a.tabelle:active
    {
     text-decoration: none;
     text-underline: none;
    }


a.tabelle:visited
    {
     text-decoration: none;
     text-underline: none;
    }

a.tabelle:hover
    {
      cursor:  url(bilder/finger.cur), progress;
    }
/* a.links ist die Klasse für die Navi links */

a.links:link
    {
     text-decoration: none;
     text-underline: none;
    }

a.links:active
    {
     text-decoration: none;
     text-underline: none;
    }


a.links:visited
    {
     text-decoration: none;
     text-underline: none;
    }

a.links:hover
    {
      cursor:  url(bilder/finger.cur), progress;
      background-color: #C0C0C0;
    }

ul
    {
     list-style-type: circle;
    }

.mitte
    {
     text-align:center;
    }
.rechts
    {
     text-align:right;
    }

table
    {
      width: 85%;
      border-width: 3pt;
      border-style: solid;
      border-color: #000000;
      background-color: #C0C0C0;
    }

th
    {
      background-color: #99FFFF;
    }

td
    {
      border-width: 1pt;
      border-style: solid;
      border-color: #000000;
    }

.spalte1
    {
      background-color: #C0C0C0;
      width: 15%;
    }

.farbe1
    {
      background-color: #99CCFF;
    }

.farbe2
    {
      background-color: #FFFF00;
    }

.farbe3
    {
      background-color: #FFFFFF;
    }

.farbe4
    {
      background-color: #FF0000;
    }

.farbe5
    {
      background-color: #00CC00;
    }

.farbe6
    {
      background-color: #FF00FF;
    }

.farbe7
    {
      background-color: #FFCCFF;
    }

.farbe8
    {
      background-color: #800080;
    }

.farbe9
    {
      background-color: #FFCC00;
    }


.titel
       {
          width: 1300px;
          height: 100px;
          background-color: #FFFFFF;

       }

       }
.navioben
       {
          width: 1300px;
          height: 45px;
          background-color: #494949;
          color: #D2D2D2;
          padding-bottom: 15px;
          padding-top: 15px;
       }

.navilinks
       {
          width: 150px;
          height: 1000px;
          background-color: #E0E0E0;
          color: #000000;
          float: left;

       }

.inhalt
       {
          text-algin: left;
          width: 950px;
          height: 1000px;
          background-color: #FFFFFF;
          overflow: auto;
          float: left;
          margin: 5px;
       }

.navirechts
       {
          width: 200px;
          height: 1000px;
          background-color: #FFFFFF;
          color: #000000;
       }