Browser Problem (Safari) mit Klassen

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

ich habe mit css Klassen definiert:
(die wichtigsten)

_#container{
margin-left:10%;
margin-right:10%;
height: 1000px

#inhalt{
width:72%;
background-image: url(bsp.gif);
padding: 4%;
float:right;
font-family:Monotype Corsiva;
font-size:200%;
margin-top:3%;
margin-right:2%;
border:1px solid black;
-moz-border-radius:10px;
-khtml-border-radius:30px;

}

#left{
width:20%;
float:left;
border:0px solid black;
-moz-border-radius:10px;
-khtml-border-radius:30px;
margin-top:3%;
}

}_

bei IE (7) funzt das schön
aber bei Safari nicht:
da ist das left-element zusammengequetscht und der Inhalt darunter!

Woran könnte das liegen?

Gruß mnapster

#2

Hallo mnapster,

dies …

#inhalt{
width:72%;
padding: 4%;
margin-right:2%;
border:1px solid black;
}

#left{
width:20%;
}

… ergibt insgesamt eine Breite von 102% + 2px - kann also gar nicht nebeneinander passen und wird deshalb korrekterweise untereinander dargestellt.

bei IE (7) funzt das schön
aber bei Safari nicht:

Safari tut richtig, IE7 nicht. Schätze, du hast den IE7 im Quirks-Modus, so dass er den Box-Model-Bug simuliert.

Gruß
Yasmin

#3

Hi,

Ich hab von Safari bzw. den CSS Tags die Safari unterstützt kein Plan, aber ich würde dir vorschlagen den Elementen Inhalt und Left nicht relative größen in % zu verpassen sonder Absolute in px. und dann kannst du den Elementen einen z-index geben und mit left und top ausrichen.

Als Beispiel bekommt Left den z-index: 1; und wir mit „left: 0px;“ und „top: 0px“ ausgerichtet. Und Inhalt bekommt den z-index: 2; und wir wenn Left z.B. 200px breit ist mit „left: 201px;“ und „top: 0px;“ ausgerichtet. Ich würde aber zu deisem Thema noch etwas auf http://de.selfhtml.org nachlesen.

hoffe ich konnte dir helfen,

lg. Meganova

#4

das würde ich ja gerne so machen, aber das design soll sich der Auflösung anpassen!

#5

Hallo,

ich habe es jetzt geschafft die Elemente nebeneinander zu positionieren doch die Buttons sind bei Safari immer noch zerquetscht und reagieren nicht auf die Größenänderungen.

Quelltext für die Buttons:
a.button
{
font-family:bsp;
font-size:100%;
color: bsp;
background-Color: bsp;
border-left: 1px solid bsp;
border-top: 1px solid bsp;
border-right: 1px solid bsp;
border-bottom: 1px solid bsp;
text-decoration: none;
width: 90%;
height:30px;
text-align: center;
margin:5%;
}

kann mir jemand helfen? warum wird das nicht so angezeigt wie ich möchte?

gruß mnapster

#6

Hallo mnapster,

Quelltext für die Buttons:

das sind leider zu wenig Informationen, um ernsthaft helfen zu können. Steht das Problem irgendwo online?

Gruß
Yasmin

#7

hallo yasmin,

eigentlich hatte ich das nicht vor aber ich werde es veranlassen.
Klick hier! http://www.nawi-bodensee.de/1.php

so ich hoffe es hilft ich werde es aber bald wieder dem server entnehmen!

gruß mnapster

#8

eigentlich hatte ich das nicht vor aber ich werde es
veranlassen.

äußerst großzügig von Dir…

Klick hier! http://www.nawi-bodensee.de/1.php

wenn ich meiner Glaskugel korrekt entnehme, wie die Links vermutlich aussehen sollen, lautet die Lösung: display:block.

Gruß
Yasmin

#9

vielen dank. hat gefunzt.