CSS Profi anwesend?

[Sn0w]

Hi Kollegen,

bräuchte mal bissel Hilfe von nem CSS Profi. Folgendes Problem... Habe mit Div n Formular gebaut und das ganze mit position:relative; positioniert. Funzt alles Super in ie6-10, FF und Opera... nur Chrome tanzt aus der Reihe und haut mir nen stufigen Versatz in die divs. Jemand ne idee bzw mal zeit sich das anzuschauen?

gruß
Ronny

 

[nicolasthun]

Am besten gibst du uns hier schnell den Code und eine Online Demo. Dann kann ich mal schauen, einen Validator hast du schon benutzt, nehme ich an?

Gibt aber bei Chrome 5 ein Problem mit position:relative; soweit ich weiss.

 

[Sn0w]

Moinsen, geht ums formular über bzw unter der tabelle auf Kredit, Kreditvergleich, Autokredit und Sofortkredit auf gala-kredit.com

Chrome ist Version 15.0.874.121 m ... der code im groben:

<div id="rechner">
  <div id="feld1"><input 1></div>
  <div id="feld2"><input 2></div>
  <div id="feld3"><input 3></div>
  <div id="feld4"><input button></div>
</div>

#rechner
{
width: 704px;
height: 65px;
background-image: url("../images/content_rechner.gif");
background-repeat: no-repeat;
margin: 0px;
}

#feld1
{
position: relative;
top: 30px;
left: 5px;
}

#feld2
{
position: relative;
top: 12px;
left: 177px;
}
#feld3
{
position: relative;
top: -5px;
left: 350px;
}
#feld4
{
position: relative;
top: -20px;
left: 545px;
clear: both;
}

Feld 1-3 sollen dabei in einer linie sein nur der button ist etwa 10-20px nach unten versetzt. funzt auch so wie es soll in allen anderen browsern, nur chrom und wie ich grade gesehen habe ff for android zicken rum.

gruß
ronny

 

[timetunnel]

Hi Snow,

probiere es mal so:

#feld1,#feld2,#feld3,#feld4{
float:left;
top:30px;
margin-right:10px;
}

Nicht getestet mit Chrome.

Gruß

Volker

 

[Sn0w]

Danke Volker, grade gemacht ... bringt nichts... im Gegenteil, der ignoriert top und klatscht mir alle Felder an die Oberkante des rechner div

gruß
ronny

 

[nicolasthun]

Danke Volker, grade gemacht ... bringt nichts... im Gegenteil, der ignoriert top und klatscht mir alle Felder an die Oberkante des rechner div

gruß
ronny

Abstand nach oben mit margin-top lösen und dem Rechner noch float:left geben. Könnte klappen. Mit Position:relative würde ich versuchen nicht zu arbeiten.

 

[Sn0w]

habs mit Volkers Hilfe hinbekommen, musste dem button div noch ne 2. class mit nem margin-top geben und dem butten selber ne fixe width damit der schriftzug mittig ist ... in chrom ist zwar immer noch 1px versatz nach unten, aber des is mir nun egal. nun geht die seite in ie7-10, ff, opera und chrome ... im ie6 ist se zerschossen, aber damit kann ich im moment leben.

gruß
ronny

 

[m0f]

Hätte ich ganz anders gelöst. #rechner bekommt position relative und die felder in dem div dann position absolute, die werte werden dann relativ zum parent angegeben.