Top-Themen

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

Internet explorer - Firefox Input felder unterschiedlich

Frage Entwicklung HTML

Mitglied: Marco123

Marco123 (Level 1) - Jetzt verbinden

06.02.2010 um 23:02 Uhr, 8287 Aufrufe, 7 Kommentare

Hallo Forum,

Wenn ich 2 Input felder nebeneinander setzte, sind diese in IE korrekt platziert (kein überstehen oder zu kurz.)

jedoch in Firefox.
Anbei mal das bild

es werden keine Tabellen genutzt ledeglich CSS

Vielen Dank

c3db51e158c0ed0c892e2ce0988143d7 - Klicke auf das Bild, um es zu vergrößern
Mitglied: Arano
06.02.2010 um 23:12 Uhr
Hallo

Sieht mir so aus als seien die Abstände zwischen den Feldern etwas breiter, schon mal mit den "padding" und "margin" werten gespielt ?


~Arano
Bitte warten ..
Mitglied: Marco123
07.02.2010 um 13:00 Uhr
nope, funktioniert leider nicht :/

hier mal der Code ausschnitt

[CODE]
<div id="inputDiscription" style="float: left; width:200px;">
&nbsp;
</div><!-- inputDiscription DIV ENDE -->

<div id="inputArea" style="float:left; width:265px;">
<input type="text" size="" name="firma" style="width: 260px;">
<br/>
<select name="anrede" style="width: 260px;" id="geschlecht">
<option value="f">Herr</option>
<option value="m">Frau</option>
</select>
<br />
<select name="titel" style="width: 60px;">
<option>Titel</option>
<option value="dipl">Dipl.</option>
<option value="dr" >Dr.</option>
</select>
<input type="text" size="" name="name" id="name" style="width: 196px;" >
<br />
<input type="text" size="" name="strasse" style="width: 200px;">
<input type="text" size="" name="hausnr" style="width: 56px;">
<br />
<input type="text" size="" name="plz" style="width: 60px;">
<input type="text" size="" name="ort" style="width: 196px;">
<br />
<input type="text" size="" name="telefon" style="width: 260px;">
<br />
<input type="text" size="" name="mobil" style="width: 260px;"><br />
<input type="text" size="" name="fax" style="width: 260px;"><br />
<input type="text" size="" name="email" style="width: 260px;"><br />
<input type="text" size="" name="web" style="width: 260px;">
</div><!-- ende DIV inputArea-->
[/CODE]


Danke
Bitte warten ..
Mitglied: Arano
07.02.2010 um 14:32 Uhr
Tag,

ja du hast recht, habe mir das auch über Nacht überlegt.
Habe aber eine Möglichkeit gefunden.
s. http://arano.redio.de/stuff/inputs.jpg

Der Quelltext dazu:
01.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
02.
    "http://www.w3.org/TR/html4/strict.dtd"> 
03.
<html> 
04.
  <head> 
05.
    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1"> 
06.
    <title>marco123</title> 
07.
    <style type="text/css"> 
08.
      <!-- 
09.
        #box                { border:1px solid #000000; width:300px; } 
10.
        input               { border-width:0px; background-color:#00ff00; width:300px; margin:3px 0px; padding:0px; } 
11.
        select              { width:100px; border:0px; background-color:#00ffff; float:left; } 
12.
        input[name="titel"] { width:200px; clear:left; } 
13.
        input[name="str"]   { width:200px; float:left; } 
14.
        input[name="nr"]    { width:100px; clear:left; } 
15.
        input[name="vorw"]  { width:100px; float:left; } 
16.
        input[name="tele"]  { width:200px; clear:left; } 
17.
      --> 
18.
    </style> 
19.
  </head> 
20.
  <body> 
21.
     
22.
    <div id="box"> 
23.
     
24.
      <input type="text" value="|"><br> 
25.
      <input type="text" value="|"><br> 
26.
       
27.
      <select> 
28.
        <option>Titel</option> 
29.
      </select> 
30.
      <input type="text" name="titel" value="|"><br> 
31.
       
32.
      <input type="text" name="str" value="|"> 
33.
      <input type="text" name="nr" value="|"><br> 
34.
       
35.
      <input type="text" name="vorw" value="|"> 
36.
      <input type="text" name="tele" value="|"><br> 
37.
 
38.
      <input type="text" value="|"><br> 
39.
      <input type="text" value="|"><br> 
40.
      <input type="text" value="|"> 
41.
     
42.
    </div> 
43.
   
44.
  </body> 
45.
</html>
Der eigentliche Trick dabei, die linken Felder bekommen ein float:left; sowie passende margin und padding Werte.

~Arano


Edit.
Ob das im IE bei dir "richtig" ist... na ich weiss nicht !
Select 60px
Input 196px
gesammt __256px__
Box __265px__
Da fehlen noch 9px
Wo sind die 9px hin ?
Das scheint mir ein allgemeines Problem zu sein.
Bitte warten ..
Mitglied: Marco123
07.02.2010 um 17:09 Uhr
Hey, vielen Dank schonmal!

wie du bei mir auf dem Bild siehst sind die ja gleich, bis auf das oberste Dropdown feld.

die fehlenden 9 px ist der Abstand zum anderen Element, sowie die "rahmen".

Jedoch wenn es deine Vorlage so umbaue, dass man die Inputfelder erkennt (border=1) hab ich wieder das selbe problem :/

diese müssen nach angaben des Kunden so aufgebaut sein, dass man diese erkennt, wie bei mir auf dem Bild :/

greetz Marco
Bitte warten ..
Mitglied: Arano
07.02.2010 um 17:31 Uhr
Zitat von Marco123:
Hey, vielen Dank schonmal!
Kein Problem

die fehlenden 9 px ist der Abstand zum anderen Element, sowie die "rahmen".
Ja richtig, ein Wert den der Browser beliebig verwaltet !
Okay, die Rahmen ist klar, bei zwei Elementen links und rechts sind das 4px. Und die restlichen 5px wandern in den Abstand, aber warum 5px warum nicht nur 1px oder 10px oder 0px.
Und der Firefox nutzt hier vielleicht 6px !?

Jedoch wenn es deine Vorlage so umbaue, dass man die Inputfelder erkennt (border=1) hab ich wieder das selbe problem :/
Bei meiner Vorlage ? Aber klar doch ! Rechnen wir einfach mal zusammen:
x = Rahmen links + Element breite + Rahmen rechts + Rahmen links + Element breite + Rahmen rechts
x = 1 + 100 +1 + 1 + 200 + 1
x = 304

Bei den Einfachen Elementen ist es so:
x = Rahmen links + Element breite + Rahmen rechts
x = 1 + 300 +1
x = 302

Man muss bei den Elementen bei denen mehrere in einer Reiche sind die Breiten verringern damit das wieder passt.
Andere Werte müssen ggf. auch in die Rechnung mit einfließen z.B. margin(-left, -right)

diese müssen nach angaben des Kunden so aufgebaut sein, dass man diese erkennt, wie bei mir auf dem Bild :/
Ist schon klar, aber das ist ja dein Job

greetz Marco
Schönen Abend noch
~Arano
Bitte warten ..
Mitglied: Marco123
07.02.2010 um 17:54 Uhr
Hey,

jap stimmt, hab es nun bei mir richtig, hin bekommen, dass es in beiden Browsern passt. nun kommt das lustige....

Wenn ich diese in nen CMS einfüge (Cms würde von irgendnem hoschi geschrieben der dann abgehauen ist..... )

stimmt überhaupt nichts :O
alles ist "zerschossen" obwohl ich die regeln direkt auf die Elemente angewendet habe, sodass keine gobale CSS Funktion diese überschreiben kann....


[CODE]

<div id="wrapper" style="height: 400px;">
<div id="inputDiscription" style="float: left; width:200px;">
&nbsp;
</div><!-- inputDiscription DIV ENDE -->

<div id="inputArea" style="float:left; width:265px;">
<input type="text" size="" name="firma" style="width: 260px;">
<br/>
<select name="anrede" style="width: 260px;" id="geschlecht">
<option value="f">Herr</option>
<option value="m">Frau</option>
</select>
<br />
<select name="titel" style="width: 60px;float:left;">
<option>Titel</option>
<option value="dipl">Dipl.</option>
<option value="dr" >Dr.</option>
</select>
<input type="text" size="" name="name" id="name" style="width: 196px; float:left; margin-left:4px;" >
<br />
<input type="text" size="" name="strasse" style="width: 200px; float:left">
<input type="text" size="" name="hausnr" style="width: 56px;float:left; margin-left:4px;">
<br />
<input type="text" size="" name="plz" style="width: 60px;float:left">
<input type="text" size="" name="ort" value="ort" style="width: 196px;float:left; margin-left: 4px;">
<br />
<input type="text" size="" name="telefon" style="width: 260px;">
<br />
<input type="text" size="" name="mobil" style="width: 260px;"><br />
<input type="text" size="" name="fax" style="width: 260px;"><br />
<input type="text" size="" name="email" style="width: 260px;"><br />
<input type="text" size="" name="web" style="width: 260px;">
</div><!-- ende DIV inputArea-->
</div><!-- ende Wrapper-->

[/Code]

wenn du dir daraus ne html baust funktioniert es einwandfrei...

hab mal nen vergleichs bild hochgeladen...

http://it-schuth.net/error.JPG

danke nochmal!
Bitte warten ..
Mitglied: Arano
07.02.2010 um 18:52 Uhr
Hm...

evtl. wird durch das CMS-CSS zusätzliche Eigenschaften der input's gesetzt !
Bei dem erstem select z.B. du bestimmst nur die Breite, aber sämtliche anderen Eigenschaften könnten bereits durch das CMS-CSS gesetzt worden sein.

Mit demFirefox-AddOn Web-Developer kannst du dir einiges anzeigen lassen, unter anderem auch "Style-Informationen".
Dann werden dir sämtliche CSS-Eigenschaften des Elements angezeigt und woher diese gesetzt worden sind.


Viel Erfolg
~Arano
Bitte warten ..
Ähnliche Inhalte
JavaScript
Wie kann ich mit jquery einem input feld einen event mit einer Function hinzufügen?
gelöst Frage von datadexxJavaScript12 Kommentare

Hallo zusammen, leider finde ich nichts im Netz und probiert hab ich (meiner Meinung nach) auch bereits alles Folgendes ...

Windows Server
Zertifikat funktioniert mit Internet Explorer bei Firefox und anderen kommt Fehlermeldung
gelöst Frage von 116480Windows Server6 Kommentare

Hallo, ich habe aus einem *.pfx File 3 Exporte gemacht Export the private key file from the pfx file ...

Webbrowser
Firefox, Chrome und Internet Explorer bleiben hängen
Frage von Phill93Webbrowser7 Kommentare

Hallo, hab hier einen PC mit einem komischen Problem. Firefox stützt ab, der Internet Explorer und Chrome bleiben für ...

Windows 7
Internet-Explorer
Frage von r00t-1337Windows 72 Kommentare

Hallo Zusammen, wir haben aktuell den IE10 und vereinzelt auch den IE11 im Einsatz. Aufgrund einer Anwendungen müssen wir ...

Neue Wissensbeiträge
Viren und Trojaner

Deaktivierter Keylogger in HP Notebooks entdeckt

Information von bitcoin vor 12 StundenViren und Trojaner1 Kommentar

Ein Grund mehr warum man Vorinstallationen der Hersteller immer blank bügeln sollte Der deaktivierte Keylogger findet sich im vorinstallierten ...

Router & Routing

Lets Encrypt kommt auf die FritzBox

Information von bitcoin vor 15 StundenRouter & Routing

In der neuesten Labor-Version der FB7490 integriert AVM unter anderem einen Let's Encrypt Client für Zugriffe auf das Webinterface ...

Internet

Was nützt HTTPS, wenn es auch von Phishing Web-Seiten genutzt wird

Information von Penny.Cilin vor 3 TagenInternet17 Kommentare

HTTPS richtig einschätzen Ob man eine Webseite via HTTPS aufruft, zeigt ein Schloss neben der Adresse im Webbrowser an. ...

Webbrowser

Bugfix für Firefox Quantum released - Installation erfolgt teilweise nicht automatisch!

Erfahrungsbericht von Volchy vor 4 TagenWebbrowser8 Kommentare

Hallo zusammen, gem. dem Artike von heise online wurde mit VersionFirefox 57.0.1 sicherheitsrelevante Bugs behoben. Entgegen der aktuellen Veröffentlichung ...

Heiß diskutierte Inhalte
Batch & Shell
Trusted Sites für alle User auf dem PC einpflegen
Frage von xXTaKuZaXxBatch & Shell12 Kommentare

Aufgabestellung: Es sollen auf 1 PC (bzw. mehreren PCs) vertrauenswürdige Sites per Powershell eingetragen werden, die für alle User ...

Vmware
DOS 6.22 in VMWare mit CD-ROM
gelöst Frage von hesperVmware10 Kommentare

Hallo zusammen! Ich hab ein saublödes Problem. Es ist eine VMWare mit DOS 6.22 zu erstellen auf dem ein ...

Voice over IP
Telefonstörung - Ortsrufnummern kein Verbindungsaufbau
Frage von Windows10GegnerVoice over IP10 Kommentare

Hallo, sowohl bei uns als auch beim Opa ist es über VoIP nicht möglich Ortsrufnummern anzurufen. Es kommt nach ...

Cloud-Dienste
PIM als SaaS Nutzungsgebühr
Frage von vanTastCloud-Dienste8 Kommentare

Moin, wir haben uns ein PIM (Product Information Management) nach unseren Ansprüchen für viel Geld als SaaS-Lösung bauen lassen. ...