HTML/ Browser Problem

wamalu

Hallo,
ich bin absoluter Neuling (mit diversen Kenntnissen in VBA etrc) und versuche mich in HTML, CSS, JS und MySQL einzuarbeiten
auf meinem Bürorechner Win7/IE8 wird das html script korrekt angezeigt
auf gleichem Rechner mit Mozilla Firefox wird das Layouit nicht mehr korrekt angezeigt (siehe angehängte png files)
der default charset wird wohl utf-8 sein ... und ich hatte bereits <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> zu beginn der Seite zu dokumentieren ... aber dies bringt keien Änderung

Was fehlt an dieser Stelle?

vielen Dank für eure Mühe
Marc

Bazs

Versuch es mal so:

Leere deine Cache bei Firefox und stelle folgendes ein

Einstellungen - Sicherheit - die Chronik löschen wenn Firefox gelassen ist und dort auf Einstellungen - dort ein haken bei Cache setzen und auf ok

djheke

Das Problem dürfte wohl an das mangelhafte HTML liegen.

wamalu

Hallo,
Bazs : das hat nichts gebracht .. habe heute auch an einem anderen Rechner mit Win8, IE10, Chrome & Firefax getestet .. hat nicht funktioniert

@djehke : ja ich stimme dir zu, das muss mit Fehlern im HTML zu tun haben ... aber was genau fehlt / bzw was mache ich falsch ??
ich habe mich an Seiten wie http://www.w3schools.com/ und http://www.homeandlearn.co.uk
orientiert, die die einzelenn Themen für einen Neueinsteíger ziemlich gut vermitteln.. und wie gesagt das erste Ergebnis war aj auch ganz OK

Bandit

Stelle die Seite online (zur Not bei einem Freehoster) und poste einen Link dazu, damit man sich das ansehen kann.

djheke

Hier mal eine aufgeräumte Version.

HTML

<!DOCTYPE HTML> 
 
<html> 
<head>
<title>Testseite</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<style>  
* {
 margin:0;
 padding:0;
 box-sizing:border-box;
 list-style:none;
 text-decoration:none;
}


header  {
 padding:20px;
 background:#ff0;
 text-align:right;
}


nav {
 background:#ada;
 float:left;
 width:100%;
}


nav li {
 float:left;
}


nav a {
 display:block;
 padding:10px;
 margin-right:5px;
 background:#ede;
 color:#000;
}


#section1 p {
 display:inline-block;
 margin-right:50px;
 padding:10px;
}
form {
 width:80%;
 margin:10px auto;
 font-size:.75em;
}


.spalte {
 margin:30px;
 float:left;
 width:calc(50% - 2*30px);
 border:none;
} 


form #text {
 clear:both;
 float:left;
 margin-left:30px;
 margin-bottom:20px;
 border:none;
}


form textarea {
 width:100%;
}


form p , form label {
 padding:10px 0;
}


form p input , form p select {
 float:right;
}


form legend {
 font-weight:bold;
}


footer {
 clear:both;
 padding:10px;
 margin-top:20px;
 background:#ede;
} 
</style> 
</head> 
 
<body> 
<header> 
<h1> HHRd | Fac </h1>
</header>     
 
<nav>
<ul>     
<li><a href="">Home</a></li>     
<li><a href="">Create</a></li> 
<li><a href="">Change</a></li> 
<li><a href="">Delete</a></li> 
<li><a href="">Logout</a></li>     
</ul> 
</nav> 
 
<div id="section1"> 
<p>  Company Nr: </p> 
<p>  User : </p>     
</div> 
 
 
<form action="action_page.php" method="POST"> 
<fieldset class="spalte">
<legend> Create Customer</legend> 
<p><label for="name"> Name:</label><input type="text" id="name" name="cstrm_1_Name" PLACEHOLDER="" REQUIRED></p> 
<p><label for="typeof">Type of Company(SA/GmbH):</label> <input id="typeof" type="text" name="cstrm_1_Gesellschaftsart" PLACEHOLDER="" REQUIRED></p> 
<p><label for="address">Address:</label><input type="text" id="address" name="cstrm_1_Adresse" PLACEHOLDER="address" REQUIRED></p> 
<p><label for="postcode">PostCode:</label><input type="text" id="postcode" name="cstrm_1_Postleitzahl" PLACEHOLDER="" REQUIRED></p> 
<p><label for="town">Town:</label><input type="text" id="town" name="cstrm_1_Ort" PLACEHOLDER="" REQUIRED><br> 
<p><label for="country">Country:</label> 
<SELECT id="country"> 
 <OPTION Value="Luxembourg">Luxembourg</OPTION> 
 <OPTION Value="Deutschland">Deutschland</OPTION> 
 <OPTION Value="France">France</OPTION> 
 <OPTION Value="UnitedKingdom">UnitedKingdom</OPTION> 
 <OPTION Value="Schweiz">Schweiz</OPTION> 
</SELECT>
</p> 
<p><label for="vat"> VAT-Nr:</label><input type="text" id="vat" name="cstrm_1_MwStNummer" PLACEHOLDER="" REQUIRED></p> 
<p><label for="reg"> Registration Nr:</label><input type="text" id="reg" name="cstrm_1_Handelsgericht_Nr" PLACEHOLDER="" REQUIRED></p> 
<p><label for="phone">Phone (incl.pre-select):</label><input type="text" id="phone" name="Telefon" PLACEHOLDER="" REQUIRED></p> 
<p><label for="fax"> Fax (inkl.pre-select):</label><input type="text" id="fax" name="cstrm_1_Fax" PLACEHOLDER="" REQUIRED></p>
</fieldset>


<fieldset class="spalte">
<legend>Banking</legend> 
<p>
<label for="mailing">Mailing language :</label> 
<SELECT id="mailing"> 
 <OPTION Value="Luxembourg">Deutsch</OPTION> 
 <OPTION Value="Deutschland">Französisch</OPTION> 
 <OPTION Value="France">Englisch</OPTION> 
</SELECT>
</p> 
<p><label for="office">Office openhours:</label><input type="text" id="office" name="cstrm_1_Bürozeiten" value=""></p> 
<p><label for="person1">eMailContact person1:</label><input type="email" id="person1" name="cstrm_1_Ansprechpartner1" PLACEHOLDER="" REQUIRED></p> 
<p><label for="person2">eMailContact person2:</label><input type="email" id="person2" name="cstrm_1_Ansprechpartner2" value=""></p> 
<p><label for="dep">eMailContact finance dep:</label><input type="email" id="dep" name="cstrm_1_Buchhaltung" value=""></p> 
<p><label for="bank">Bankreference/SWIFT:</label><input type="text" id="bank" name="cstrm_1_Bankreferenz_SWIFT" PLACEHOLDER="" REQUIRED></p> 
<p><label for="iban">IBAN:</label><input type="text" id="iban" name="cstrm_1_IBAN" PLACEHOLDER="" REQUIRED></p> 
<p><label for="sepa">SEPA Mandat:</label><input type="text" id="sepa" name="cstrm_1_SEPA_Mandate" PLACEHOLDER="" REQUIRED></p> 
</fieldset>


<fieldset id="text">
<legend>History</legend> 
<p><textarea id="history" rows="10" cols="100" name="cstrm_1_History_Text" ></textarea></p>
<p><input type="submit" value="Speichern"></p>
</fieldset> 


</form> 
 
 
<footer>Footer</footer> 
 
 
</body> 
</html>

Alles anzeigen

Kopieren und Probieren.

wamalu

Hallo djheke
zunächst mal einen herzlichen Dank für deine Mühe.. ich denke so manches aus dem Aufbau und Syntax gelernt und orientire mich wohl am besten auch nur noch an die neueren Browserversionen

trotzdem habe ich noch 2 Fragen ..
1.) in .Spalte hattest Du width:calc(50% - 2*30px); geschrieben.. aber ad werden die Blocks untereinander dargestellt
nebeneinander funkltionioert bei mir nur mit width:calc(30% - 2*30px); oder generell 30% was doch arg wenig ist (zumal ich keien weitere Leisten geöffnet habe

2.) wird generell das Eingabefeld for dem Label gesetzt ... und dies über alle Browser ..
<p><label for="name"> Name:</label><input type="text" id="name" name="cstrm_1_Name" PLACEHOLDER="" REQUIRED></p>

anbei ist nochmal das HMTL Script angehängt..

HTML

<Doctype html>
<!--    Home1 Anlage Kundendaten....   nur durch admin ? --> 
<!--  <html lang="en-US">-->
<!--  <html lang="DE">-->
<html>
<html> 
<head>
<title>e-fac-Kunde anlegen-Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<style> 
#header {
    background-color:#FFFFA3;
    height:100px;
    text-align:right;

}
#section1 {
 background-color:#FFFFD3;
 width:100%;
 display:inline-block;
 padding:0px;
  font-family: "Arial"; 
 font-size: 11px;
 
}
#section2 {
 width:80%
 display:inline-block;
 margin-left:60px;
 float:left;
 padding:20px;
  font-family: "Arial"; 
 font-size: 11px;
}
#body {
 position: fixed;
    left: 100px;
    top: 30px;
 color:Black;
    padding:0px;
 font-family: "Arial"; 
 font-size: 10px;
 position: absolute; 
}
#nav {
    line-height:30px;
    background-color:#C2FFA3;
    height:700px;
    width:140x;
    float:left;
    padding:0px;
  font-family: "Arial"; 
 font-size: 10px;
 font-style: Bold;
}


#form {
 width:100%;
 margin:30px auto;
 font-family: "Arial";
 font-size: 10px;
}
.spalte {
 margin-left:60px;
 float:left;
 width:calc(30% - 2*30px);
 border:none;
 font-family: "Arial";
 font-size: 10px;
} 
form #text {
 clear:both;
 float:left;
 margin-left:30px;
 margin-bottom:10px;
 border:none;
}
.form #textarea {
 width:100%;
}
.form p , form label {
 padding:80px 10 
}
<!--form p input , form p select {
 float:left;
}-->
form legend {
 font-weight:bold;
}
footer {
 background-color:#FFFFD3;
 clear:both;
 text-align: center;
 padding:10px;
 margin-top:20px;
 height:50px;
 <!--background:#ede; -->
} 
</style>


<header class ="header">
<div id = "header">
 <h2 style="font-family:andalus" > HHRd | <small>e</small>Fac
 <img src=skyline.jpg alt="e-Facility" width="180" height="100"> </h2>
 </div> 
</header>
<section class ="section1">
<div id = "section1">
 <p1 style="font-size:12px"> Customer Area:</p1><p> <label for="company"> Company Nr:</label><label for="name"> Name:</label><label for="user"> User:</label> </p1>
</div>
</section>
<nav class ="nav">
<div id = "nav">
  <p>MasterData:</p>
  <p>Customer:</p>
<ul>
 <li><a href= "c:\myproject\html\facilHome0.html">Home</a></li> 
<!--<li><a href= "c:\myproject\html\facobject0.html">Create</a></li>
 <li><a href= "c:\myproject\html\facdnstlstr0.html">Change</a></li>
 <li><a href= "c:\myproject\html\facbstzr0.html">Delete</a></li> -->
 <li><a href= "c:\myproject\html\facilHome0.html">Logout</a></li>
</ul>
</div>
</nav>


<!-- Suche ob Kunde bereits besteht--> 
<form action="action_page.php" method="POST"> 
<fieldset class="spalte">
<legend> Create Customer</legend> 
<p><label for="name"> Name:</label><input type="text" id="name" name="cstrm_1_Name" PLACEHOLDER="" REQUIRED></p> 
<p><label for="typeof">Type of Company(SA/GmbH):</label> <input id="typeof" type="text" name="cstrm_1_Gesellschaftsart" PLACEHOLDER="" REQUIRED></p> 
<p><label for="address">Address:</label><input type="text" id="address" name="cstrm_1_Adresse" PLACEHOLDER="address" REQUIRED></p> 
<p><label for="postcode">PostCode:</label><input type="text" id="postcode" name="cstrm_1_Postleitzahl" PLACEHOLDER="" REQUIRED></p> 
<p><label for="town">Town:</label><input type="text" id="town" name="cstrm_1_Ort" PLACEHOLDER="" REQUIRED><br></p>
<p><label for="country">Country:</label> 
<SELECT id="country"> 
 <OPTION Value="Luxembourg">Luxembourg</OPTION> 
 <OPTION Value="Deutschland">Deutschland</OPTION> 
 <OPTION Value="France">France</OPTION> 
 <OPTION Value="UnitedKingdom">UnitedKingdom</OPTION> 
 <OPTION Value="Schweiz">Schweiz</OPTION> 
  </SELECT>
 </p>
<p><label for="vat"> VAT-Nr:</label><input type="text" id="vat" name="cstrm_1_MwStNummer" PLACEHOLDER="" REQUIRED></p> 
<p><label for="reg"> Registration Nr:</label><input type="text" id="reg" name="cstrm_1_Handelsgericht_Nr" PLACEHOLDER="" REQUIRED></p> 
<p><label for="phone">Phone (incl.pre-select):</label><input type="text" id="phone" name="Telefon" PLACEHOLDER="" REQUIRED></p> 
<p><label for="fax"> Fax (inkl.pre-select):</label><input type="text" id="fax" name="cstrm_1_Fax" PLACEHOLDER="" REQUIRED></p>
</fieldset>
<fieldset class="spalte">
<legend>Contact data </legend> 
<p>
<label for="mailing">Mailing language :</label> 
<SELECT id="mailing"> 
 <OPTION Value="Luxembourg">Deutsch</OPTION> 
 <OPTION Value="Deutschland">Französisch</OPTION> 
 <OPTION Value="France">Englisch</OPTION> 
</SELECT>
</p> 
<p><label for="office">Office openhours:</label><input type="text" id="office" name="cstrm_1_Bürozeiten" value=""></p> 
<p><label for="person1">eMailContact person1:</label><input type="email" id="person1" name="cstrm_1_Ansprechpartner1" PLACEHOLDER="" REQUIRED></p> 
<p><label for="person2">eMailContact person2:</label><input type="email" id="person2" name="cstrm_1_Ansprechpartner2" value=""></p> 
<p><label for="dep">eMailContact finance dep:</label><input type="email" id="dep" name="cstrm_1_Buchhaltung" value=""></p> 
<p>.</p>
<legend>Banking</legend> 
<p><label for="bank">Bankreference/SWIFT:</label><input type="text" id="bank" name="cstrm_1_Bankreferenz_SWIFT" PLACEHOLDER="" REQUIRED></p> 
<p><label for="iban">IBAN:</label><input type="text" id="iban" name="cstrm_1_IBAN" PLACEHOLDER="" REQUIRED></p> 
<p><label for="sepa">SEPA Mandat:</label><input type="text" id="sepa" name="cstrm_1_SEPA_Mandate" PLACEHOLDER="" REQUIRED></p> 
</fieldset>
</form> 
<section class ="section2">
<div id = "section2">
<legend>Additional Data<legend> 
<p><textarea id="history" rows="10" cols="100" name="cstrm_1_History_Text" ></textarea></p>
<!--input type="submit" value="Speichern"></p>-->
</div>
</section> 
 
 
 
<!--  nach dem Speichern werden die Daten aus der Datenbank gelesen und dem User in einem Feld die neue Kundennummer mitgeteilt -->
<!--  next fcknde2  "Change Customer"  -->
 
<!--  Kunde existiert ?   Tabelle aufbauen und selektieren -->
<!--  logonuser berechtigung prüfen und nur die zugeordneten Kunden anzeigen  !! -->
<!-- Kunde anzeigen ...    ggf ändern-->
<!-- neue Kundendaten abspeichern -->
 
<footer class ="footer">
<div id = "footer">
<input type="submit" value="Save data">
<script>
<!-- in php schreiben -->
</script>
<button onclick="myFunction()">Print this page</button>
<script>
function myFunction() {
    window.print();
}
</script>
 
</div>
</footer> 
 
</html>

Alles anzeigen

djheke

Ja, leider ist deine vorgestellte Version invalide. Bitte halte dich an die HTML-Syntax.
calc() funktioniert nicht in älteren Browsern. Es gibt aber eine Alternative mit inneren Elementen(div). Bitte lerne erst die Grundlagen, bevor du weiter arbeitest.

Tags