Erledigt - CSS3 "calc()" - Falsche Berechnung in Firefox

[black-hat]

Liebe Forumgemeinde.
Ich habe ein Problem bezüglich der CSS3 Funktion: calc()

Wie hier im Screen zu sehen ist, berechnet z.B. der Firefox den Inhalt der Funktion falsch.



Im CSS sieht's anders aus:

header{

display: block;
width: 100%;
height: 130px;


img[src*="logo"]
{
width: 130px;
float: left;
margin-right: 50px;
}

div#search
{
float: left;
border: 3px solid #0054bb;
padding: 10px;
width: -moz-calc(100% - 160px);
width: -webkit-calc(100% - 160px);
width: calc(100% - 160px);
display: block;


img
{
float: left;
margin-right: 5px;
}
input[type="text"]
{
width: 500px;
height: 27px;
padding-left: 5px;
}

input[type="submit"]
{
width: 100px;
height: 31px;
border : solid 0px;
border-radius : 5px;
moz-border-radius : 5px;
color : #ffffff;
padding : 1px 17px;
background-color : #089f00;
}

select[name="kategorie"]
{
height: 31px;
}

img
{}
}
}
(Ich benutze .less - also nicht wundern wegen der verschachtelung...)

Wo ist mein Fehler?

Ich bin noch Hinweisen nachgegangen wie http://jsfiddle.net/UF3mb/10/ oder http://hacks.mozilla.org/2010/06/css3-calc/. Es hat nur leider mein Problem nicht gelöst. Auch ein Lösungsweg mit einer absoluten positionierung habe ich ausprobiert, doch ich glaube, dass es auch anders geht.

 

[cebito]

Herzele, benutze bitte beim nächsten mal die Codewerkzeuge hier, dieses Grün blendet mehr als das man es lesen kann. Ich würd jetzt mal spontan die fehlende schließende Klammer bemängeln, so du es denn 1:1 hier reinkopiert hast. Ansonsten wäre ein lauffähiges Beispiel besser um den Fehler zu verorten.

 

[black-hat]

Die Klammer schließt sich weiter unten.
Meine vermutung lautet momentan, dass der der Less-Code, der von einem Programm in ein css umschreibt, den Inhalt ausrechnet.

Zumindest, wenn ich genau den Bereich in den Head-Bereich als CSS einfüge, funktioniert alles :/

was jedoch dann die neue Frage wäre, welches Tool diesen Fehler nicht machen wird...

 

[cebito]

Hast du im FF die Webdeveloper_Toolbar? Dann geh mal auf "Quelltext anzeigen" -> "Erzeugten Quelltext anzeigen" und schau dir mal die Ausgabe an...

 

[Sorc]

Hallo,

less scheint hier schon zu rechnen. Allerdings rechnet er einfach nur 100 - 160. Somit stehen da nur -60%. Im Firebug sollte im Normalfall nicht das Ergebniss stehen wie bei dir sondern eben calc(100% - 160px);

 

[black-hat]

Ich habe mal beim Hersteller des Programms nachgefragt, der mir den .less in das .css code umgewandelt hat. die antwort war folgende:

Hello Larissa - thats actually a feature of the LESS language (you know, SimpLESS is just a compiler - the LESS language is made by somebody else: http://lesscss.org ). LESS can do calculations for you. If you for example write:

width: 500px - 28px;

In the resulting CSS file, it will be:

width: 472px;

Altough - thats not a desired behaviour sometimes, like when you use the CSS calc method. To prevent LESS from parsing your mathematical expression, wrap it in single quotes and prefix it with a tilde. Looks strange, but works. So you would need to write:

width: calc(~'100% - 180px');

I hope that helps!

Greetings,

Es hat auch mit der Antwort "width: calc(~'100% - 180px');" funktioniert :3