Zur Navigation

CSS, padding funktioniert nicht bei opera 9.51

1 ak1982

Hallo,

habe ein Problem.
Bin gerade dabei alle Werte auf em umzustellen.
Dabei habe ich das Problem, dass der Textabstand im menue und im footer bei opera nicht so angezeigt werden, wie bei Safari oder Firefox, woran liegt das? Habe ich was falsch in meinem Code?

Anbei der code der css datei:


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


#wrapper {
width: 60em;
margin: 2% auto;
}

#header {
height: 120px;
background-color:#000000;
}

#menue {
width: 60em;
height: 2.3em;
background-color:#000000;
border-bottom: 1px solid #FF9900;
border-left: 1px solid #FF9900;
border-top: 1px solid #FF9900;
}

#menue .strich {

border-left: 1px solid #FF9900;
border-top: 1px solid #FF9900;
}


#menue ul {
list-style: none;
text-align:center;
padding: 0.5em 0px;
}

#menue ul li{
display:inline;
}

#menue ul a{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
color:#FFFFFF;
text-decoration: none;
padding: 0px 2.5em;

}

#menue ul a:hover{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
color:#FF9900;
text-decoration: none;

}

#menue ul a.aktuell{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
color:#FF9900;
text-decoration: none;

}

#content { 
width: 60em;
clear: left;
min-height: 500px;
background-color:#000000;
border-right: 1px solid #FF9900;
}

#content .fl-right { 
float: right;
width: auto;
background-color:#000000;
}

#footer {
clear: right;
width: 60em;
height: 2.3em;
background-color:#000000;
border-bottom: 1px solid #FF9900;
border-right: 1px solid #FF9900;
border-top: 1px solid #FF9900;

}

#footer .strich {
height: 2.3em;
border-left: 1px solid #FF9900;
border-top: 1px solid #FF9900;
}

#footer ul {
list-style: none;
text-align:right;
padding: 0.5em 0px;
}

#footer ul li{
display:inline
}

#footer ul a{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.6em;
font-style:italic;
color:#FFFFFF;
text-decoration: none;
padding: 0px 1.25em;

}

#footer ul a:hover{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.6em;
font-style:italic;
color:#FF9900;
text-decoration: none;

}

#footer ul a.aktuell{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.6em;
font-style:italic;
color:#FF9900;
text-decoration: none;

}

h1 {
color: #CC3300
}





Anbei der Code der index.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>Andreas Kr&uuml;ger</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>

<body bgcolor="#000000">

<div id="wrapper">

<div id="header">

</div>


<div id="menue">
<ul>
	<li><a class="aktuell" href="index.html">home</a></li>
    <li class="strich"></li> 
    <li><a href="vita.html">vita</a></li>
    <li class="strich"></li>
    <li><a href="konzerte.html">konzerte</a></li>
    <li class="strich"></li>
    <li><a href="galerie.html">galerie</a></li>
    <li class="strich"></li>
    <li><a href="paedagoge.html">p&auml;dagoge</a></li>
    <li class="strich"></li>
    <li><a href="kontakt.html">kontakt</a></li>
</ul>
</div>

<div id="content">
<p class="fl-right">
<img src="pics/homepic.jpg" width="308" height="500" alt="Andreas Kr&uuml;ger">
</p>
</div>

<div id="footer">
   <ul> 
    <li><a href="webdesign.html">webdesign</a></li>
    <li class="strich"></li>
    <li><a href="impressum.html">impressum</a></li>
  </ul>
</div>

</div>
</body>
</html>




Ich danke schon einmal für eure Hilfe.
Liebe Grüße

Der Andreas

[Edit Jörg: zur besseren Lesbarkeit den Code in Codeblöcke eingefügt]

19.09.2008 13:26 | geändert von Jörg: 19.09.2008 13:39

2 Jörg Kruse

Hallo Andreas,

was genau meinst du mit Textabstand - den Abstand zwischen den Zeilen? Diesen kannst du mit der Eigenschaft line-height definieren - danach sollten die Abstände in den Browsern gleich sein

PS: ich habe zur besseren Lesbarkeit den Code in deinem Beitrag in Codeblöcke ([code][/code]) eingefügt

19.09.2008 13:42 | geändert: 19.09.2008 13:43

3 ak1982

Hallo Jörg,

das geht ja schnell. Danke dir für die Übersichtlichkeit.

Also ich werde es genauer formulieren.
Ich habe jetzt noch einmal mehrere Div-Tags mit Borderbetrachtet und dabei fällt auf, wenn ich eine Border um den menue ul tag setzte sitzt diese bei Opera genau oben dran( also am menue border ) und bei Safari und Firefox ist etwa 3px abstand dazwischen.
Danach habe ich alles mit px-Angaben probiert, doch da wird auch im Opera alles etwas höher angezeigt.
Das sieht dann vom Design eben bei Opera nicht gut aus, da dann die schrift nicht mittig steht.
Liebe Grüße
Der Andreas

p.s. es ist meine erste Erfahrung mit css im "großen Stil", davor habe ich jahrelang fast nur html geschrieben, total veraltet. Nun will ich doch meine Fähigkeiten doch mal auf einen neueren Stand bringen. Wenn du noch tips hast, was ich anders machen könnte, oder wenn mein code sehr unsauber ist, dann würde ich mich freuen.

Liebe Grüße
Der Andreas

19.09.2008 14:08

4 Jörg Kruse

wenn ich eine Border um den menue ul tag setzte sitzt diese bei Opera genau oben dran( also am menue border ) und bei Safari und Firefox ist etwa 3px abstand dazwischen.

Ich habe deinen Code gerade mal getestet, um das nachzuvollziehen:

#menue {
width: 60em;
height: 2.3em;
background-color:#000000;
border:1px solid yellow;
}

#menue ul {
list-style: none;
text-align:center;
padding: 0.5em 0px;
border:1px solid red;
}

Bei mir zeigen weder Opera 9.5, noch Firefox 3, noch Konqueror 3.5 einen Abstand zwischen #menue und #menue ul

19.09.2008 14:39

5 ak1982

Hallo nochmal,

also bei mir wird der rote kasten(menu ul) eben bei opera kürzer angezeigt als bei den anderen Browsern. Ungefähr 5 bis 6 Pixel weniger. Oben sind alle gleich, das stimmt.
Warum ist die Höhe bei Opera nun anders?

Liebe Grüße,
Der Andreas

19.09.2008 16:08

6 Jörg Kruse

Ok, jetzt verstehe ich, was du meinst. Anscheinend liegt das an den leeren Listenpunkten, welche unterschiedlich interpretiert werden. Bau dort mal ein geschütztes Leerzeichen ein:

<li class="strich">&nbsp;</li>

19.09.2008 16:17

7 ak1982

Hallo nochmal,

leider hat das immer noch nicht geklappt.
Die Schrift steht bei Opera immer noch ein stückchen weiter oben.
hast du noch einen anderen Vorschlag? Woran könnte es noch liegen?
Liebe Grüße
Der Andreas

19.09.2008 18:08

8 Jörg Kruse

Also die Listenelemente erscheinen nach dem Einfüge der geschützten Leerzeichen bei mir sowohl in Opera als auch in Firefox mittig:

#menue ul {
list-style: none;
text-align:center;
padding: 0.5em 0px;
border:1px solid red;
}

#menue ul li{
display:inline;
border:1px solid yellow;
}

19.09.2008 18:51

9 ak1982

Lieber Jörg,

ich danke dir ganz herzlich. Es funktioniert nun endlich. War schon am verzweifeln.
Wenn man solche Menschen wie dich nicht hätte, was würde man nur tun?
Einen Lieben Gruß
Der Andreas

19.09.2008 19:07

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]