PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Problem mit Login-Feld


Fenderman
2006-09-07, 16:36:05
Hallo!

Ich bin gerade dabei ein Template für das CMS Joomla! zu programmieren. Nun bin ich auf ein Problem gestoßen.
Ich habe für das Suchfeld 3 Elemente zur Verfügung.
Ein Button, ein Input-Feld und eine "Suche-Box".
Wenn man die Seite im Firefox (1.5) anschaut, stimmen die Abstände zwischen den einzelnen Elementen.
Im Internet Explorer wird jedoch der Platz links deben dem Input-Feld zu breit dargestellt. Links und rechts neben dem Input-Feld sollte der Abstand 3px betragen!

Hier der Quelltext (Doctype: XHTML 1.1)

CSS:

#search {
font: 10px Arial,Verdana, Helvetica, sans-serif;
border-bottom:2px solid #fff;
background-color:#ffffff;
}

#search .lsearch {
background-color:#009933;
width:42px;
height:26px;
float:left;
}

#search .text {
color:#fff;
font: bold 10px Arial,Verdana, Helvetica, sans-serif;
padding: 6px 0px 6px 8px;
}

#search .inputbox {
font: 10px Verdana, Arial, Helvetica, sans-serif;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
width: 80px;
height:22px;
float:left;
margin:0px 4px;
}

#search .button {
border:none;
height: 26px;
width: 20px;
background-color:#FF0000;
color:#fff;
font: bold 10px Arial,Verdana, Helvetica, sans-serif;
}


HTML:

<div id="search">
<div class="lsearch">
<div class="text">Suche</div>
</div>
<form action="index.php?option=com_search&Itemid=5" method="get">
<div class="search">
<input name="searchword" id="mod_search_searchword" maxlength="20" alt="search" class="inputbox" type="text" size="10" value="suchen..." onblur="if(this.value=='') this.value='suchen...';" onfocus="if(this.value=='suchen...') this.value='';" /><input type="submit" value="Go" class="button"/>
</div>
<input type="hidden" name="option" value="com_search" />
<input type="hidden" name="Itemid" value="5" />
</form>
</div>


Wie kann man den Fehler denn beheben? Kann mir da jemand weiterhelfen?

mfg
Fenderman

darph
2006-09-07, 16:37:51
Divitis vom Feinsten. X-D

Ich vermute mal, daß irgendwo ein Margin oder Padding die Sache reinrückt.

Fenderman
2006-09-07, 16:44:22
Was heist da "Divitis"..Sag mir nen einfacheren Weg und ich danke dir ;)
Hm das mit den Margin und Paddings hab ich scho ndurchprobiert.
Das Problem ist halt, dass der Internet-Explorer immer rechts neben das Search-Field zusätzlich 2 bis 3 Pixel Abstand setzt...

/dev/NULL
2006-09-07, 17:09:20
Divititis heißt: Du benutzt einfach überall nen Div, egal ob sinnvoll oder nicht.
Warum
<div class="text">Suche</div>
statt <span> oder <hx> was semantisch besser wäre?

<div class="search">
<input name="searchword" id="mod_search_searchword" maxlength="20" alt="search" class="inputbox" type="text" size="10" value="suchen..." onblur="if(this.value=='') this.value='suchen...';" onfocus="if(this.value=='suchen...') this.value='';" /><input type="submit" value="Go" class="button"/>
</div>
wofür hier das Div wenn Du einfach in button attribute geben kannst und den rest von oben (form) vererbst?

zu deinem problem kann ich wenig sagenm funktiuonierender Link würde helfen ich bau mir keine eigene Seite zusammen. Auf meiner Seite sieht ein mit css formatiertes formular so aus:

<form id="kontaktform" action="mail.php" method="post">
<fieldset class="kontaktdaten">
<label for="name">Name:</label><input type="text" id="name" name="name"/><br />
<label for="email">eMail-Adresse:</label><input type="text" id="email" name="email" /><br />
<label for="anfrage">Nachrichten Text:</label><textarea id="anfrage" name="Anfrage" cols="30" rows="10"></textarea><br />
<label for="betreff">Betreff:</label><select size="1" id="betreff" name="betreff">
<option value="">bitte wählen...</option>
<option value="Information" selected="selected">Informationen</option>
<option value="Support">Supportgesuch</option>
<option value="Neukunde">Neukunde</option>
</select>
<input type="submit" id="submit" value="Abschicken" />
</fieldset>

Formatierung nehm ich dann über #kontaktform bzw. #kontaktform label vor..
Schau dir mal die css Einführung auf css4you an.

Generell wärst Du mit fieldset, label und co besser bedient.. schöne Anleitung:
http://www.css-tutorials.de/css/barrierefreiesformular.html

Fenderman
2006-09-07, 19:27:46
Ok danke schon mal für die Hilfe!



<div class="search">
<input name="searchword" id="mod_search_searchword" maxlength="20" alt="search" class="inputbox" type="text" size="10" value="suchen..." onblur="if(this.value=='') this.value='suchen...';" onfocus="if(this.value=='suchen...') this.value='';" /><input type="submit" value="Go" class="button"/>
</div>

wofür hier das Div wenn Du einfach in button attribute geben kannst und den rest von oben (form) vererbst?

Das Problem ist halt, dass ich keine "pure" Html Seite schreibe, sondern
ein Template in php. Deshalb kann ich bestimmte Sachen, wie den
Code für das Suchfeld an sich nicht verändern. Was ich gepostet habe, ist
nur der durch das Template geneerierte Html Code.

Der Code sieht bei mir nämlich so aus:

<div id="search">
<div class="lsearch">
<div class="text">Suche</div>
</div>
<?php mosLoadModules ( 'user4',-1); ?>
</div>


Folglich kann ich nur versuchen per CSS die bestehenden Elemente zu formatieren. Wobei ich jedoch auf den bereits erwähnten Browser-"Bug" stoße...

Hier mal die URL zum testen:
http://home.arcor.de/Fenderman/Test.html

/dev/NULL
2006-09-08, 13:26:04
Versteh nicht ganz was Du meinst aber:
<div class="lsearch">
<div class="text">Suche</div>
</div>
Warum hier z.B. 2 divs wenn Du z.B. ein richtiges Tag für den Text (bsp. <span>,<p> oder ein Überschriften tag <hX> nehmen kannst und das formatierst.. Du screibst einfach um alles ein Div rum und das ist schlechter Stil, bläht Code auf und macht es nicht übersichtlicher..

Fenderman
2006-09-08, 16:29:14
Versteh nicht ganz was Du meinst
So soll es ausschauen (Firefox stellt es richtig dar): http://img446.imageshack.us/img446/1673/firefoxwx7.png
Und so sieht es im IE aus: http://img361.imageshack.us/img361/6387/ieaw5.png

Warum hier z.B. 2 divs wenn Du z.B. ein richtiges Tag für den Text (bsp. <span>,<p> oder ein Überschriften tag <hX> nehmen kannst und das formatierst.. Du screibst einfach um alles ein Div rum und das ist schlechter Stil, bläht Code auf und macht es nicht übersichtlicher..
Ich habe halt ein div gewählt, da ich den Text zentriert haben will (horizontal und vertikal). Das kann ich ja nachher immer noch immer umstellen.
Aber das löst ja nicht den Fehler aus. Ich bin immer noch ratlos, warum der IE hinter das "Suchen-Feld" den ABstand zu groß macht. Ich ha be ihn doch durch "margin:0px 2px;" genau definiert...

darph
2006-09-08, 16:58:52
bei lsearch padding und margin auf 0px setzen?

Fenderman
2006-09-08, 19:26:15
Ne, bringt leider auch nichts...:(
Andere Vorschläge?

Sephiroth
2006-09-08, 20:44:51
Ne, bringt leider auch nichts...:(
Andere Vorschläge?
verschieb die hidden inputs ganz nach vorne, der IE (<= 6) läßt dafür gerne platz o.0 :ucrazy2:
err, schmarn, sind ja schon ganz am ende X-(


margin-left:-3px;
für den go-button, als workaround für den ie

edit #2:
so geht es bei ff und ie
#search .button {
border:none;
height: 26px;
width: 20px;
background-color:#FF0000;
color:#fff;
font: bold 10px Arial,Verdana, Helvetica, sans-serif;
float:left;
margin:0;
padding:0;
}

Gast
2006-09-08, 21:28:07
Danke Sephiroth, funktioniert einwandfrei! :D

Sephiroth
2006-09-09, 00:40:01
hier mal eine variante ohne unnötig viele divs ;)