• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Darstellungsproblem / IE7 & Mozilla

Status
Für weitere Antworten geschlossen.
B

bigkimble

Neues Mitglied
Hallo zusammen,

habe ein Problem mit der Darstellung folgendes Codes:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>


[PHP]
<style type="text/css">
 
 body { 
       background-color: gray; 

       color: white; 
      font-family: Arial, Verdana, Helvetica, sans-serif;
      font-size: 8.5pt; 
       padding: 0; 
       margin: 0; 
    }


#wrapper { 
  background-color: white; 
    color: black; 
    width: 777;
    height: 577;
    
      font-family: Arial, Verdana, Helvetica, sans-serif;
      font-size: 8.5pt; 
      
       padding: 0;
       margin: 0;
       border: 0;

}


#mab-details {
    position: absolute;
    background-image: url(Produkte/MAB/MAB425/Bilder/MAB425_01.gif);
    width: 261px;
    height: 369px;
    color: black;
    padding: 48px 10px 0px 48px;
    margin: 0px 0px;
    }
    
.ueberschrift { 
font-size: 1.8em; 
margin-bottom:-15px; 

}


.untertitel { 
font-weight: bold; 
font-size: 1.0em;
margin-bottom:-20px;
}


</style>
[/PHP]
</head>


<body>

<div id="wrapper">

<div id="mab-details">
<h1 class="ueberschrift">Ueberschrift 1</h1>
<h2 class="untertitel">Slogan test test test</h2>
<p>Beschreibung 123 ... Beschreibung 123 ...</p>


</div>
</div>


</body>
</html>

In IE 7 werden die Text-Abstände korrekt angezeigt, beim Mozilla 3.0 überschneiden sich diese.

Woran kann das liegen?


Gruss
 
@bigkimble

Die Frage ist eher wieso du dem margin-bottom jeweils negative Werte zugewiesen hast !?
Ich glaube nämlich nicht das dies gewollt war ;-)

Weiter würde ich dir auch empfehlen Klassen statt IDs für die Zuweisung von CSS Formatierungen zu nutzen (auch für Verschachtelte DIVs!), gerade wenn du Javascript einsetzt um den DOM zu manipulieren wirst du Stark darauf achten müssen.

Mein Tipp:
PHP: 
...

#mab-details h1 { 
    font-size: 1.8em; 
    margin-bottom: 15px;
}

#mab-details h2 { 
    font-weight: bold; 
    font-size: 1.0em;
    margin-bottom: 20px;
}

...

<h1>Ueberschrift 1</h1>
<h2>Slogan test test test

....
Die Formatierung der Überschriften vererbt sich dann logischerweise auf alle h1 und h2 Elemente welche im DIV:mmab-details eingefasst sind.

Auch nicht verkehrt wäre ein Besuch auf: SELFHTML: Stylesheets / CSS-Formate definieren / Das CSS Box-Modell


Grüße
 
Hallo localhorst,

erst einmal danke für Deinen Hinweis.

Ich weise margin-bottom deshalb negativ-werte zu, da ich die Abstände zwischen h1 und h2 verringen bzw. verkleinern will.

Mit dem Code von Dir bleiben die Abstände aber wie gehabt, weit auseinander.

Wie verkleinere ich die Abstände ohne margin-bottom negativ zu belasten?

Gruss
 
@bigkimble

Indem Du margin auf 0 setzt, und/oder wie folgt weitere Pixel Abstand nimmst.
PHP: 
#mab-details h1 { 
    font-size: 1.8em; 
    margin: 0;
}

#mab-details h2 { 
    font-weight: bold; 
    font-size: 1.0em;
    margin: 3px 0 0 0;
}
Bedenke aber das du bei solchen Sachen eventuell mit !import, css-hacks oder einen weiteren Stylesheet das ganze noch "etwas" für andere Browser anpassen musst.
Wenn du eine Webseite für alle gängigen Browser erstellst, kommst du um solche CSS-Korrekturen leider nicht herum.


Grüße
 
OK - danke. Jetzt verstehe ich!
Ich dachte es reicht aus nur margin-bottom auf "0" zu setzten... (oder einen negativen Wert zuweisen)
 
@bigkimble

Ich versuche (soweit es denn geht) negative Werte zu vermeiden, lediglich bei Relativ-/Absolut positionierten Konstruktionen kommt man des öfteren nicht drumherum ;-)


Grüße
 
Hi,

bigkimble schrieb:
Ich weise margin-bottom deshalb negativ-werte zu, da ich die Abstände zwischen h1 und h2 verringen bzw. verkleinern will.

wie verkleinere ich die Abstände ohne margin-bottom negativ zu belasten?

Gruss
Zum Vergrößern anklicken....

du solltest an einen CSS-Prolog denken.

Das in der ersten Zeile deiner CSS:

HTML: 
*  {
   padding:0;
margin:0;
}

setzt alle browserinternen Vorformatierungen auf null.
Davon ausgehend definierst du alle Abstände und behältst die Kontrolle darüber.

Übrigens, font-size:8.5pt; täte ich nicht nehmen.
pt ist eine absolute Einheit für den Druck. Fürs Web solltest du relative Einheiten wie em oder % verwenden.

koslowski
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben