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
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