Probleem met lay out

Status
Niet open voor verdere reacties.
U

Uturn

Gebruiker
Lid geworden
7 apr 2009
Berichten
100
Hallo,
Ik heb een probleem met de lay out van een webpagina die ik aan het schrijven ben. Ik had het helemaal goed in FF, maar het zag er niet uit in IE7. Toen heb ik een doctype erbij gezet maar het probleem werd alleen maar erger. Hieronder staat de code voor html en CSS, let even niet op de kleuren.
Mijn vraag is: waarom heeft de header div niet juiste height en heeft geen bottom-border? en waarom is de h1-tekst in de header zwart? Ik heb dit toch in de CSS omschreven.

Als je de doctype declaratie weglaat wordt het in FF wel goed weergegeven.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>MolHelp</title>
    <link rel="stylesheet" type="text/css" href="MolBerStyles.css">
  </head>
  <body>
    <div id="Header">
      <h1>Rekenblad voor moleculaire laboratoria</h1>
    </div>
    <div id="RekenVeldjes">
      <div id="EenhBerVeld">
        <h5>Omrekening concentratie eenheid</h5>
        <form name="EenheidSwitch">
          <b>Concentratie: </b>
          <input type="text" style="margin-left: 61px" size="10" name="CWaarde">
          <select name="InEenheid">
            <option value="0">-</option>
            <option value="-3">m</option>
            <option value="-6">&micro;</option>
            <option value="-9">n</option>
            <option value="-12">p</option>
            <option value="-15">f</option>
            <option value="-18">a</option>
            <option value="-21">z</option>
          </select>
          <select name="InMass">
            <option value="g">g</option>
            <option value="mol">mol</option>
          </select><b>/</b>
          <select name="InVol">
            <option value="0">L</option>
            <option value="-3">mL</option>
            <option value="-6">&micro;L</option>
            <option value="-9">nL</option>
            <option value="-12">pL</option>
          </select>
          <br>
          <br>
          <b>Benodigde concentratie eenheid: </b>
          <select style="margin-left: 13px" name="UitEenheid">
            <option value="0">-</option>
            <option value="-3">m</option>
            <option value="-6">&micro;</option>
            <option value="-9">n</option>
            <option value="-12">p</option>
            <option value="-15">f</option>
            <option value="-18">a</option>
            <option value="-21">z</option>
          </select>
          <select name="UitMass">
            <option value="g">g</option>
            <option value="mol">mol</option>
          </select><b>/</b>
          <select name="UitVol">
            <option value="0">L</option>
            <option value="-3">mL</option>
            <option value="-6">&micro;L</option>
            <option value="-9">nL</option>
            <option value="-12">pL</option>
          </select>
          <br>
          <br>
          <b>Omgerekende concentratie: </b>
          <input type="text" style="margin-left: 51px" size="10" id="BerEenheid">
          <b id="OutputEenheid"> </b>
          <br><br><br>
          <input type="button" class="VeldButton" value="Bereken" onClick="UnitSwitch()">
        </form>
      </div>
      <div id="ChemRekVeld">
        <form name="ChemRek">
          <h5>Berekening van de hoeveelheid af te wegen stof</h5>
          <b>Benodigde molariteit: </b>
          <input type="text" style="margin-left: 10px" size="10" name="RekMolariteit">
          <select name="RekMolEenheid">
            <option value="0">M</option>
            <option value="-3">mM</option>
            <option value="-6">&micro;M</option>
            <option value="-9">nM</option>
            <option value="-12">pM</option>
          </select>
          <br>
          <b>Benodigde volume: </b>
          <input type="text" style="margin-left: 27px" size='10' name="RekVolume">
          <select name="RekVolEenheid">
            <option value="0">L</option>
            <option value="-3">mL</option>
            <option value="-6">&micro;L</option>
          </select>
          <br>
          <b>Moleculaire massa: </b>
          <input type="text" style="margin-left: 27px" size='10' name="RekMW">
          <b>g/mol</b>
          <br>
          <b>Af te wegen:</b>
          <input type="text" style="margin-left: 74px" size="10" id="Afweeg">
          <b> g</b>
          <br><br><br>
          <input type="button" class="VeldButton" value="Bereken" onClick="ChemCalc()"> 
        </form>
      </div>
    </div>
  </body>
</html>
En de CSS:
Code: 
/* Mol Help Style Sheet */

  html {
    background-color: white;
  }
  body { 
    color: black;
    font-size: 10pt; 
    font-family: verdana;
    width: 1000px;
    background-color: #FFFFE0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
  }
  h2 { 
    color: black; 
    font-size: 19pt; 
    font-family: Helvetica; 
    font-weight: bold; 
  }
  h3 { 
    color: black; 
    font-size: 17pt; 
    font-family: Helvetica; 
    font-weight: bold; 
  }
  h4 {
    color: black; 
    font-size: 14pt; 
    font-family: Helvetica; 
    font-weight: bold; 
  }
  h5 {
    color: black; 
    font-size: 12pt; 
    font-family: Helvetica; 
    font-weight: bold;
  }
  p { 
    font-size: 12pt;
    font-family: verdana;
    font-weight: normal;
    margin-right: 20pt;
  }
  b {
    font-size: 10pt; 
    font-family: verdana; 
    font-weight: bold;
  }
  input.VeldButton {
    color: black;
    font-family: verdana;
    font-weight: bold;
  }
  #header {
    text-align: center;
    background-color: #FFFFE0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2px;
    height: 100px;
    position: relative;
    border-bottom: 2px solid blue;
  }
  #header h1 {
    font-family: arial;
    color: blue;
    padding-top: 20px;
  }
  #header h4 {
    font-family: arial;
    color: green;
  }
  #RekenVeldjes {
    height: 1000px;
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
    padding: 0 0 20px 0;
    background-color: white;
  }
  #EenhBerVeld {
    width: 650px;
    height: 250px;
    position: relative;
    top: 40px;
    left: 70px;
    background-color: #DCDCDC;
    padding-top: 25px;
    padding-left: 40px;
    border: 4px #DCDCDC outset;
  }
  #ChemRekVeld {
    width: 650px;
    height: 250px;
    position: relative;
    top: 50px;
    left: 70px;
    background-color: #B0C4DE;
    padding-top: 25px;
    padding-left: 40px;
    border: 4px #B0C4DE outset;
  }

Bij voorbaat alvast bedankt voor de moeite!
(alle opm over de code zijn overigens welkom...)
 
Dat komt omdat je dat niet wilt :)

Allereerst het doctype. 'n Doctype is absoluut noodzakelijk voor 'n goede weergave. Zonder doctype zeg je in feite dat je pagina ouder is dan tien jaar. Toen was er nog geen standaard en maakte elke browser er maar wat van. Met het doctype geef je aan, dat jouw pagina zich aan de standaard houdt, en dan doen browsers dat ook. Anders gaat elke browser het min of meer op 'n eigen manier weergeven, en daar worden zelfs doorgewinterde anarchisten zwaar depressief van.
Je moet 'n pagina gelijk met doctype maken, anders verandert alles weer als je alsnog 'n doctype toevoegt.
Je hebt 'n strict doctype, dat is prima.
Een doctype maakt het o.a. mogelijk je pagina te valideren op fouten. Dat kan op
http://jigsaw.w3.org/css-validator/ voor css
en op http://validator.w3.org/ voor html
Dan zie je dat je pagina 'n hele serie fouten heeft. Die moeten eruit. Maar wacht even, je moet eerst iets anders doen.

Je gebruikt in je bestandsnamen hoofd- en kleine letters: MolBerStyles.css
Dat maakt op WIndows niet uit, maar op de meeste servers wel. Het is beter altijd kleine letters te gebruiken, dat voorkomt fouten. Ook geen spaties, maar - of _.
In je id's gebruik je ook hoofdletters. Er zijn in de standaard geen regels voor het gebruik van hoofd- en kleine letters in css. Daardoor legt elk systeem en elke browser dat op z'n eigen manier uit. Dus ook hier kun je beter altijd kleine letters gebruiken. Als je <div id="Header"> verandert in <div id="header">, wordt je <h1> plots blauw.

Daarna zou ik die fouten die de validator geeft eruit halen, want elke fout kan in principe onvoorspelbare resultaten geven in een of meer browsers.
 
Many many thanks

Bedankt Goeroeboeroe,
Die hoofdletters was het probleem. Ik zal voortaan dan maar kleine letters gebruiken, ook voor de id's. Ik ben die manier van naamgeving gewend van variabelen, dat gaat vanzelf, ik moet er actief aan denken geen hoofdletters te gebruiken, maar dat went ook weer.

Ik heb na de hoofdletters te verwijderen de files door de validators gegooit: CSS was in orde, de html-fouten waren vooral allemaal dezelfde. Wel erg vreemde:
Ik moest de hele inhoud van mijn formulier tussen <p>...</p> of aanverwante tags zetten. Een <b> was niet toegestaan zonder een <p> of <h1> ofzo??? Dit vind ik raar.
Daarnaast hadden mijn formulieren geen action="..." gespecificeerd, maar ik had de uit te voeren javascript functie al bij de button gezet met onClick. Nu staat het er dubbel in, wat ik onlogisch vind.
Maar goed nu ik dat veranderd heb is de file html4.01 correct.

Dus nu is alles precies zo als de doctype EN het ziet er in FF en IE hetzelfde uit:p:
many thanks!:thumb:
 
Ja, die strengheid in forms, daar heb ik me ook wel 'ns over verbaasd. Maar goed, browser gaan ook van deze regels uit, dus je moet wel.
Overigens wordt action="" ook geaccepteerd.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan