verschiedene Anzeigen in verschiedenen Browsern

bärbel · 29. Dezember 2010

Hallo zusammen

Ich habe für einen Verein eine Webseite erstellt und auch ins Internet gestellt. Beim Ausprobieren mit verschiedenen Browsern habe ich festgestellt, dass es bei der Anzeige grosse Unterschiede gibt. Internet Explorer zeigt die Seite so an, wie ich das will. Bei Firefox und Opera gibt es mehrere Probleme; die Schrift ist zu klein, der Rahmen, den ich um das ganze gelegt habe, wird nicht angezeigt und ein Bilderbanner wird verschoben angezeigt. Weiss jemand, woran das liegen könnte?
Dies ist der Link zur Seite: http://www.jugenderholungsheim.at

Das ist der HTML-Code:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">




<head>
    <title>Jungvolk Vorarlberg-Herzlich willkommen!</title>
    <link rel="stylesheet" type="text/css"
    media="screen" href="design.css" />
    <style type="text/css">




    </style>




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />




    <link href="style.css" type="text/css" rel="stylesheet" />
</head>




<body>
<div id="kopfbereich">
      <img class="bild" src="adler.jpg" border="0px" height="147px" width="147px" alt="website design" />
      <p>Jungvolk Vorarlberg</p>







</div>




<div id="inhaltsbanner">
     <img src="inhaltsbanner1.jpg" alt="Jungvolk Website Design"
      width="822px"/>
</div>




<div id="steuerung">
     <a href="index.htm">Home</a>|
     <a href="ueber-uns.htm">Über uns</a> |
     <a href="jv.htm">Was ist das JV?</a> |
     <a href="programm.htm">Programm</a> |
     <a href="kontakt.htm">Kontakt</a>  |
     <a href="berichte-und-fotos.htm">Berichte + Fotos</a> |
     <a href="links.htm">Links</a>







</div>




<div id="inhalt">




<h1>Was ist das Jungvolk?</h1>
<div class="untertitel"> Geschichte:</div>
<div class="grundtext"> <p>Das Jungvolk wurde 1974 von Grete und Beat Schindler gegr&uuml;ndet.</p></div>
   </br>
<div class="untertitel"> Wieso Jungvolk?</div>
<div class="grundtext"> <p>Das Jungvolk bietet Kindern und Jugendlichen in den Ferien und an Wochenenden spannende Abwechslung in der Natur. Das Jungvolk unterst&uuml;tzt eine positive Pers&ouml;nlichkeitsentwicklung; es werden Freundschaften f&uuml;rs Leben geschlossen, die Natur neu und anders erlebt und viele neue Erfahrungen gesammelt.</p></div>




   </br>
<div class="untertitel"> F&uuml;r wen?</div>
<div class="grundtext"> <p>F&uuml;r alle motivierten Jugendlichen von 10 bis zum vollendeten 16.Lebensjahr, die Spass haben wollen abseits von Computer und Fernseher und neue Bekanntschaften f&uuml;rs Leben schliessen wollen.</p></div>
   </br>
<div class="untertitel"> Winterlager:</div>
<div class="grundtext"> <p>In den Semesterferien veranstalten wir unser alljährliches Winterlager. Neben Schifahren und Snowboarden stehen stehen auch viele weitere tolle Dinge auf dem Plan wie zum Beispiel Winter- und Schigeländespiel.
Zur Abendgestaltung gehören lustige Spieleabende und verschiedene Wettbewerbe wie "Wer wird Schokoladär". Aber zu den absoluten Highlights gehören auf jeden Fall die Lagerdisco und die Miss - und Mister-Bürserberg Wahl. </p></div>
   </br>
<div class="untertitel"> Sommerlager:</div>
<div class="grundtext"><p>Unser Sommerlager findet zu Beginn der Sommersemesterferien statt und dauer 2 Wochen. Gleich zu Beginn gehen wir den Lageraufbau an, das Wichtigste ist hier sicherlich der Lagerturm und der Zeltaufbau, in welchen wir die ganzen zwei Wochen übernachten.
Mit dem Lagerturm können wir unsere Lagerfahne gegen "Fahnenklauer" verteidigen. Am meisten Spaß haben alle sicher am Nachmittag bei den Geländespielen. Hier gibt es das Hexengelände, Tag-Nacht, Schatzsuche, Zauberwald, Indianer Jones und die Olympischen Lagerspiele.
Auch an den Abenden haben wir es sehr lustig, je nach Wetter befinden wir uns am Zeltplatz beim Lagerfeuer oder im Heim, wo wir lustige Spieleabende haben. Ein Highlight des Lagers ist sicherlich die Lagerdisco. Je nach Begeisterung der Lagerteilnehmer, geht die Lagerdisco auch mal etwas länger.
Den krönenden Abschluss unseres Sommerlagers bildet die Abschlussfeier. Hier werden je nach vollbrachten Leistungen, Leistungsabzeichen verteilt. Mit schönen Erinnerungen und der ein oder anderen Medaille muss man dann nach den zwei Wochen leider wieder nach Hause. ABER, man kann ja beim nächsten Lager schon wieder dabei sein!</p></div>
   </br>
<div class="untertitel"> Waldl&auml;uferlager:</div>
<div class="grundtext"> <p>Das Waldl&auml;uferlager findet am letzten Sommerferienwochenende im September unter freiem Himmel an der Bregenzer Ache statt. Auf dem Programm stehen Biwakieren, Grillen auf dem offenen Feuer, Orientierungsl&auml;ufe, Ironman/ Ironwoman, &Uuml;berlebenstraining und vieles mehr.</p></div>




</div>
<hr />
<div class="copyright">Copyright 2010, Jungvolk Vorarlberg</div>
</body>
</html>

Alles anzeigen

und das ist design.css:

Code

html, body,
{
    font: 100% Arial, Helvetica, sans-serif;
    border-style:solid;
    border-left-width:100px;
    border-left-color: #808080;
    border-right-width:75px;
    border-right-color: #808080;
    border-top-width:5px;
    border-top-color: #808080;
    border-bottom-width:5px;
    border-bottom-color: #808080;
}
* {
  margin:0;
  padding:0;
}







#kopfbereich
{
    background:url(banner2.jpg) repeat-x left top;
  height:80px; width:970px;
    border-top-style: solid;
    border-top-width:1px;
    border-right-style: solid;
    border-right-width: 2px;
    border-bottom-style: solid;
    border-bottom-width:3px;







}
#kopfbereich p
{
    color:white;
    font-size:2em;
    padding: 15px 0em 0em 150px;
    font-size:28pt;
    font-weight:bold;
}
#kopftext p
{
    color:black;
    font-size:2em;
    padding: 0px 0em 0em 150px;
    font-size:28pt;
    font-weight:bold;
}
#inhaltsbanner p
{
    text-indent:150px;
}
#inhaltsbanner
{
    text-indent:150px;
}




#steuerung
{
    background-color:white;
    font-size:14pt;
    font-weight:normal;
    line-height:1em;
    text-align:left;
    text-indent:150px;
    margin-top:10px;
    margin-bottom:10px;
    margin-left:0px;
    margin-right:15px;




}
#inhalt p
{
    background-color: #FFFFFF;
    font-size:12pt;
    font-weight:normal;
    margin: 0em 2em 0em 150px




}
#inhalt h1, h2, h3, p, ul
{
    padding-bottom:.3em;
}
#inhalt ul
{
    padding-left:2em;
}




#inhalt dd
{
    text-indent:0px;
}
#inhalt dt
{
    text-indent:100px;
}
h1
{
    text-indent:150px;
    font-size:16pt;
    font-weight:bold;
    padding-top:0.9em;
    color:#000080;
}
h2
{
    text-indent:150px;
}













.bild
{
    float:left;
}




.untertitel
{
    text-indent:20px;
    float:left;
    color:#000080;
    font-size:10pt;
    font-weight:bold;




}
.grundtext
{
    color:black;
    font-size:12pt;
}
.klein
{
     font-size:10pt;
     color:purple
}
table
{
    margin-left:130px;
    border:2px;
}




.copyright
{
    text-indent:150px;
    font-size:8pt;
    color: #808080;
}

Alles anzeigen

Schöne Feiertage und Danke schonmal!

Sarkkan · 29. Dezember 2010

Hallo Bärbel

Die Sache mit dem Rahmen kommt daher, dass der IE ein komplett anderes Box-Modell verwendet als es sonst ein Browser macht (Offiziell hieß es lange Zeit, dass der IE hier als einziger Fehler macht und jeder andere Browser das richtig. Seit HTML5 ist theoretisch aber nur der IE der einzige, der das richtig macht).

Hier musst du nun also entweder dir etwas anderes Überlegen, oder du gibst * noch folgende Eigenschaften:

Code

box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;

Das funktioniert in fast jedem Browser, offiziell ist es zwar HTML5 Standard, aber die meisten Browserhersteller haben dies schon lange implementiert(Also nicht erst in den neusten Versionen. Der IE meine ich z.B. unterstützt das schon seit 6 o. 7), leider aber mit Sicherheit noch nicht alle.
(Ich würde hier eher dazu raten, die eine andere Methode zu suchen)

Es gibt auch eine Möglichkeit, mit der alles in jedem Browser gleich aussieht, und zwar mithilfe eines resets-Stylesheets. (Es ist für den Browser nebenbei auch weniger Arbeit, als die Asterix-Methode) [Asterix = *]
Hierbei wird quasi allen Objekten neutrale Werte gegeben. Nur musst du dann jedes Element selber so "biegen" wie du es brauchst, da z.B. alle Überschriften(h1, h2,...) die selbe größe bekommen,... Es hilft aber ungemein eine Seite "cross browser compatible zu machen^^

Code

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}q:before,q:after{content:''}abbr,acronym,fieldset,img{border:0}

All

bärbel · 29. Dezember 2010

Danke für die schnelle Antwort.

Zitat

Nur musst du dann jedes Element selber so "biegen" wie du es brauchst, da z.B. alle Überschriften(h1, h2,...) die selbe größe bekommen,...

Ich verstehe nicht, wie ich jedes Elemten selber so "biegen" soll, wie ich es brauche. Könntest du mir dazu ein Beispiel geben?

lauras · 29. Dezember 2010

Mit dem Reset-Style, den er dir gegeben hat, werden alle Überschriften zum Beispiel auf dieselbe Schriftgröße gesetzt. D.h., dass alle Überschriften auch in deiner Seite von Natur aus dieselbe Größe haben, d.h. du musst sie dir so "hinbiegen" wie du willst, sprich die Größe selber einstellen, statt die vorgegebene zu verwenden, die jeder Browser normalerweise zur Verfügung stellt.

Gruß
Laura

bärbel · 29. Dezember 2010

achso, ja. das ist ja font-size, oder? das habe ich eben gemacht, aber irgendwie ist die schrift doch immer kleiner. oder verwechsel ich da was?

lauras · 29. Dezember 2010

Was genau hast du denn gemacht?

bärbel · 29. Dezember 2010

z.B.
#steuerung
font-size: 14pt;

neuling11 · 29. Dezember 2010

Hallo,
kein wunder....

Zitat von "bärbel"

z.B.
#steuerung
font-size: 14pt;

die geschweiften Klammern fehlen.

Aber ansonsten sollte es gehen.

Bei mir jedenfalls geht es wunderbar.

Du kannst aber auch die Größe der Links über #steuerung a {} verändern.

lauras · 29. Dezember 2010

pt ist auch nicht unbedingt die beste Einheit um Schriftgrößen anzugeben

bärbel · 29. Dezember 2010

die geschweiften Klammern habe ich nur im Post vergessen. Im code sieht es so aus:

Code

html, body,
{
    font: 100% Arial, Helvetica, sans-serif;
    border-style:solid;
    border-left-width:100px;
    border-left-color: #808080;
    border-right-width:75px;
    border-right-color: #808080;
    border-top-width:5px;
    border-top-color: #808080;
    border-bottom-width:5px;
    border-bottom-color: #808080;
}
* {
  margin:0;
  padding:0;
}




#kopfbereich
{
    background:url(banner2.jpg) repeat-x left top;
  height:80px; width:970px;
    border-top-style: solid;
    border-top-width:1px;
    border-right-style: solid;
    border-right-width: 2px;
    border-bottom-style: solid;
    border-bottom-width:3px;
}
#kopfbereich p
{
    color:white;
    font-size:2em;
    padding: 15px 0em 0em 150px;
    font-size:28pt;
    font-weight:bold;
}
#kopftext p
{
    color:black;
    font-size:2em;
    padding: 0px 0em 0em 150px;
    font-size:28pt;
    font-weight:bold;
}
#inhaltsbanner p
{
    text-indent:150px;
}
#inhaltsbanner
{
    text-indent:150px;
}




#steuerung
{
    background-color:white;
    font-size:14pt;
    font-weight:normal;
    line-height:1em;
    text-align:left;
    text-indent:150px;
    margin-top:10px;
    margin-bottom:10px;
    margin-left:0px;
    margin-right:15px;
}
#inhalt p
{
    background-color: #FFFFFF;
    font-size:12pt;
    font-weight:normal;
    margin: 0em 2em 0em 150px




}
#inhalt h1, h2, h3, p, ul
{
    padding-bottom:.3em;
}
#inhalt ul
{
    padding-left:2em;
}




#inhalt dd
{
    text-indent:0px;
}
#inhalt dt
{
    text-indent:100px;
}
h1
{
    text-indent:150px;
    font-size:16pt;
    font-weight:bold;
    padding-top:0.9em;
    color:#000080;
}
h2
{
    text-indent:150px;
}




.bild
{
    float:left;
}




.untertitel
{
    text-indent:20px;
    float:left;
    color:#000080;
    font-size:10pt;
    font-weight:bold;




}
.grundtext
{
    color:black;
    font-size:12pt;
}







.copyright
{
    text-indent:150px;
    font-size:8pt;
    color: #808080;
}

Alles anzeigen

ist denn em besser, um Schriftgrössen anzugeben? oder was würdet ihr da empfehlen?

lauras · 29. Dezember 2010

em, % oder px (bei festen Breiten und Höhen)

Sarkkan · 29. Dezember 2010

Nur kurz zur Erklärung der Maßeinheiten, ich empfehle immer px zu nehmen, da es einfixer Wert ist, alles andere ist meist ziemlich Variabel.. :
% - Ist abhängig von der normalen Schriftgröße und somit theoretisch zu variabel -> In jedem Browser sieht das anderes aus
pt - 1pt = 1/72Inch = 0.035cm Aber Mac (sowie Linux) haben Probleme bei dieser Maßeinheit, meistens wird die schrift ziemlich winzig..
em - Die Schriftgröße in diesem Element. Ist die Schriftgröße z.B. in dem Element 14px, so ist 1em = 14px, 1.5em = 21px, 2em = 28,.. Ebenfalls viels zu Variabel, wenn wir nicht gerade irgendetwas abhänig von der Schriftgröße machen wollen (z.B. Eine Buchstabenhöhe Abstand vom Text zum Rahmen,..)

verschiedene Anzeigen in verschiedenen Browsern

Jetzt mitmachen!

Teilen