Antwort #6 am: 07. Mai 2009, 19:58:01
Hi,
zunächst solltest Du die Listenelemente um die Suche raus nehmen (es ist ja ein Suchfeld und keine Liste
)
statt
<ul id="topmenu2">
<li><div id="search">
<form id="quick_find" action="http://www.aloevera-vision.de/advanced_search_result.php" method="get">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><strong>Suche:</strong></td>
<td><input type="text" name="keywords" size="20" maxlength="30" /></td>
<td><input type="image" src="templates/xtc5/buttons/german/button_quick_find.gif" alt="Suchen" title=" Suchen " /></td>
</tr>
</table>
</form></div></li>
</ul>
nur
<div id="search">
<form id="quick_find" action="http://www.aloevera-vision.de/advanced_search_result.php" method="get">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><strong>Suche:</strong></td>
<td><input type="text" name="keywords" size="20" maxlength="30" /></td>
<td><input type="image" src="templates/xtc5/buttons/german/button_quick_find.gif" alt="Suchen" title=" Suchen " /></td>
</tr>
</table>
</form></div>
Dann entfernst Du den ganzen #topmenu2 Kladderadatsch wieder aus Deinem Stylesheet, das brauchst Du alles nicht.
Aus
#header #search {
width: 260px;
/* height:36px;*/
float:right;
color:#ffffff;
padding:0px 0px 0px 0px
machst Du
#topmenuwrap #search {
position: absolute;
top: 5px;
right: 20px;
color: white
Damit das Ganze dann innerhalb der horizontalen Menüleiste positioniert wird, noch bei #topmenuwrap (ca. Zeile 200 im Stylesheet) ergänzen:
position:relative;
Das wäre mein Ansatz. Statt mit float wird die Suchbox damit absolut positioniert, und zwar relativ zum Elternelement. Das sollte dann browserübergreifend gut aussehen. Allerdings bin ich kein CSS-Profi, evtl. gibt es eine bessere und stabilere Lösung.
Gruß
Mathias