✔ CSS Box wird unterschiedlich dargestellt.

Status
Nicht offen für weitere Antworten.
K

kris-chros

Grünschnabel
Hallo,

ich beschäftige mich seit kurzem mit CSS und habe 2 Probleme mit der Darstellung:


1) Die Breite der Box um das Menü ist im IE anders als im Firefox. Entweder passt es im IE oder im Firefox, aber nicht in beiden.

Zu sehen hier oder weiter unten den Quellcode vom Menü:

http://009test.00.funpic.de/


2) Der Text im Hauptfenster im IE leider falsch dargestellt (die Aufzählung hat eine kleinere Schrift).


Ich hoffe mir kan jemand behilflich sein, habe lange im Internet gesucht, aber bin nicht weiter gekommen.

Vielen Dank
chris



Hier das Menü direkt als Quellcode:

Code: 
#menu1 a, #menu1 a:visited {
  font-size: 0.80em;
  position:relative;
  text-decoration:none; 
  text-align:left; 
  background-color:#c4c4c4; 
  color:#000000; 
  display:block; 
  width:100px; 
  border:1px solid #000000;
  border-color:#000000;
  padding: 5px;
  padding-left:5px;
  margin: 5px;  
  }

#menu1 a:hover {
  background-color:#6C86A7;
  color:#000000;
  }
      
div#menu1 {
  position:relative; top:12px; left:10px; 
  background-color: #c4c4c4; 
  border-style: solid;
  border-color: #000000;
  border-width: 1px; 
  width: 110px;
  margin-top: 12px;
   }
 
Hallo kris-chros!

Der Firefox hält sich genau an Dein CSS, wohingegen der IE wohl 'gnädiger' damit umgeht..
Code: 
#menu1 a, #menu1 a:visited {
  font-size: 0.80em;
  text-decoration:none; 
  text-align:left; 
  background-color:#c4c4c4; 
  color:#000; 
  display:block; 
  width:100px; 
  border:1px solid #000000;
  padding: 5px;
  margin: 5px;  

//...

div#menu1 {
  position:relative; top:12px; left:10px; 
  background-color: #c4c4c4; 
  border:1px solid #000; 
  width: 122px;
  margin-top: 12px;
   } 
  }
Die Breite Deines äusseren div#menu1 soll ja der Breite der #menu1 a entsprechen.

"Die gesamte Breite = linker Außenabstand + linke Rahmenbreite + linker Innenabstand + Breite des Inhalts + rechter Innenabstand + rechte Rahmenbreite + rechter Außenabstand."

Siehe auch http://www.css4you.de/wsboxmodell/index.html#buh
 
Hab den Quellcode mal von Grund auf überarbeitet ;)

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
<!--
html, body {
 margin: 0;
 padding: 0;
}

body {
 font-family:verdana, arial, sans-serif;
 font-size: 1em;
}

.menu1 a, .menu1 a:visited {
  font-size: 0.80em;
  position:relative;
  text-decoration:none;
  text-align:left;
  background-color:#c4c4c4;
  color:#000000;
  display:block;
  width:100px;
  border:1px solid #000;
  padding: 5px;
  margin: 5px;
}

.menu1 a:hover {
  background-color:#6C86A7;
  color:#000000;
}

div.menu1 {
  position:relative;
  top:12px;
  left:10px;
  background-color: #c4c4c4;
  border: 1px solid #000;
  width: 122px;
  margin-top: 12px;
}

div#oben {
 background-image: url("http://009test.00.funpic.de/Logo.jpg");
 background-repeat: no-repeat;
 margin-left: 10px;
 margin-top: 10px;
 height: 136px;
 width: 901px;
}

div#main {
 margin-left: 150px;
 margin-top: -298px;
 width: 759px;
 border: 1px solid #000;
 background-color: #C4C4C4;
 height: 430px;
 text-align: left;
}

h1, h2, h3 {
 margin-left: 20px;
}

ul {
 margin: 0;
 padding: 0;
 padding-left: 40px;
}

h1 {
 margin-top: 0px;
}
-->
</style>
</head>

<body>

<div id="oben"></div><!-- oben -->

<div class="menu1">
  <a href="#nogo">Start</a>
</div>

<div class="menu1">
  <a href="#nogo">teil 1</a>
  <a href="#nogo">teil 2</a>
  <a href="#nogo">teil 3</a>
</div>

<div class="menu1">
  <a href="#nogo">teil 4</a>
  <a href="#nogo">teil 5 bis 6</a>
  <a href="#nogo">teil 7 und 8</a>
  <a href="#nogo">teil 9</a>
</div>

<div id="main">

<h1>HALLO!</h1>

<h2>Dies ist ein test.</h2>

<h3>Aufzählung:</h3>
<ul>
    <li>Erstens.</li>
    <li>Zweitens.</li>
    <li>Drittens.</li>
    <li>Viertens!</li>
    <li>Fünftens</li>
</ul>

</div><!-- main -->

</body>
</html>
 
Vielen Dank erstmal, daß mit dem Menü klappt jetzt gut, auch die Abstände sind bei beiden Browsern gleich.

Aber so ganz ohne Fragen bin ich nicht, will ja was lernen...

1) Wo lag mein problem? Nur daran, daß ich in der Box um das Menü "width" nicht richtig berechnet hatte?

2) Wieso ist die Schrift nun so definiert und nicht mit div:

body {
font-family: verdana, arial, sans-serif;
font-size: 1em;
}
Zum Vergrößern anklicken....

3) Die Schrift im Hauptfenster ist nun von der Grösse nicht mehr passend. Wenn ich sie aber unter 2) anpasse verschiebt sich das Hauptfenster.
Wenn ich sie bei h1, h2, h3 (mit z.B. font-size: 80%) anpasse funktioniert es leider auch nicht.
Was mache ich da falsch?

4) Wieso wurde das:
<div id="menu1">
<a href="#nogo">Start</a>
</div>
Zum Vergrößern anklicken....
so geändert:
<div class="menu1">
<a href="#nogo">Start</a>
</div>
Zum Vergrößern anklicken....

So, daß war es erstmal an Fragen.
Vielen Dank nochmals. Echt super, daß man hier schnell und kompetent Hilfe bekommt.

Chris
 
  1. Die Boxbreite ergibt sich aus width:100px + padding:5px + margin:5px + border:1px, wobei die letzten drei Eigenschaften auf beiden Seiten (links u. rechts) hinzuaddiert werden, also doppelt zählen - somit ist das umgebende DIV 122 Pixel breit.

  2. Die Schriftformatierung lässt sich über den body-Selektor global für das Dokument festlegen, und gilt dann z.B. automatisch für das div-Element.

  3. Bei mir funktioniert es, wenn ich im Selektor h1,h2,h3 eine Schriftgröße festlege.

  4. Eine ID muß in einem Dokuemnt eindeutig sein, d.h. sie darf darin nur einmal vergeben werden. Aus diesem Grund habe ich die ID in eine Klasse umgewandelt, da diese im Dokument unbegrenzt vergeben werden darf.
 
Hallo, bin soweit nun ganz zufrieden, jetzt klappt es fast perfekt.

Einige Fragen ergaben sich aber noch:


1) Sämtiche Browser für den PC (habe 8 getestet) stellen es richtig dar. Nur auf dem Mac ist etwas nicht korrekt.
Das sieht dann so aus (in Safari und Firefox):
http://img178.imageshack.us/img178/3016/verschiebungmacei9.jpg

Kann es evtl. an dieser Angabe liegen?
Code: 
div#main {
 //...
 margin-top: -343 px;
 //...
}

Denn diese ist ja negativ. Oder solte man das Fenster absolut positionieren?


2) Leider klappte das bei mir nicht, die Schriftgrösse im Hauptfenster zu ändern, habe es in h1, h2 und h3 versucht, ging aber meist nicht. Habe es jetzt so gelöst und es geht:
In Body ist die Font Grösse übrigens auf 1 em gestellt.

Code: 
ul {
 margin: 0;
 padding: 0;
 padding-left: 20px;}

 h1 {
 font-size: 100%;
 line-height: 20px;
 text-align: left;
 margin-top: 10px;
 margin-left: 20px; }

 h2 {
 font-size: 80%;
 line-height: 20px;
 text-align: left;
 margin-top: 0px;
 margin-left: 20px;
 font-weight:normal;
 padding-right:20px
 padding-top:30px }

h3 {
 font-size: 80%;
 line-height: 20px;
 text-align: left;
 margin-top: 0px;
 margin-left: 20px;
 font-weight:bold; }


Danke sehr
chris
 
Ich hab mal ein alternatives Konzept gestrickt, das ohne den negativen margin-top-Wert für das DIV #main auskommt:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
<!--
html, body {
 margin: 0;
 padding: 0;
}

body {
 font-family:verdana, arial, sans-serif;
 font-size: 1em;
}

div#wrapper {
 width: 901px;
 margin: 10px;
}

div#oben {
 background-image: url("http://009test.00.funpic.de/Logo.jpg");
 background-repeat: no-repeat;
 margin-top: 10px;
 height: 136px;
 width: 901px;
}

div.menu1 {
  margin-top: 24px;
  background-color: #c4c4c4;
  border: 1px solid #000;
  width: 122px;
}

.menu1 a, .menu1 a:visited {
  font-size: 0.80em;
  position:relative;
  text-decoration:none;
  text-align:left;
  background-color:#c4c4c4;
  color:#000000;
  display:block;
  width:100px;
  border:1px solid #000;
  padding: 5px;
  margin: 5px;
}

.menu1 a:hover {
  background-color:#6C86A7;
  color:#000000;
}

div#main {
 margin-top: 24px;
 float: right;
 width: 759px;
 border: 1px solid #000;
 background-color: #C4C4C4;
 height: 430px;
 text-align: left;
}

h1, h2, h3 {
 margin-left: 20px;
 font-size: 80%;
}

ul {
 margin: 0;
 padding: 0;
 padding-left: 40px;
}

h1 {
 margin-top: 0px;
}
-->
</style>
</head>

<body>

<div id="wrapper">
     <div id="oben"></div><!-- / oben -->

     <div id="main">
          <h1>HALLO!</h1>
          <h2>Dies ist ein test.</h2>
          <h3>Aufzählung:</h3>
          <ul>
              <li>Erstens.</li>
              <li>Zweitens.</li>
              <li>Drittens.</li>
              <li>Viertens!</li>
              <li>Fünftens</li>
          </ul>
     </div><!-- / main -->

     <div class="menu1">
          <a href="#nogo">Start</a>
     </div>

     <div class="menu1">
          <a href="#nogo">teil 1</a>
          <a href="#nogo">teil 2</a>
          <a href="#nogo">teil 3</a>
     </div>

     <div class="menu1">
          <a href="#nogo">teil 4</a>
          <a href="#nogo">teil 5 bis 6</a>
          <a href="#nogo">teil 7 und 8</a>
          <a href="#nogo">teil 9</a>
     </div>
</div><!-- / wrapper -->

</body>
</html>
Vielleicht lässt sich ja damit das Problem auf dem MAC beheben?

Ich kann es leider nicht selbst überprüfen, da ich unter Win2000 arbeite.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück