HTML Image auf gleicher Höhe wie <select>

Mr. Snoot · 1. September 2010

Hio,

ich habe zwei Auswahllisten und links und rechts davon zwei Links mit background-image. Alles soll auf derselben Höhe sitzen.

Leider sind jeweils nur der IE und Opera bzw. Chrome, Safari und Firefox identisch. D.h. wenn die Ausrichtung in den einen Browsern passt, ist sie in den anderen versetzt.

Hat jemand eine Idee, was man da tun kann? Ich hab schon an allen Ecken und Enden mit padding und margin gespielt, aber keine Lösung gefunden

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="shortcut icon" href="/favicon.ico">
    <style type="text/css">
      a                { display: block; float: left; height: 15px; text-decoration:none; margin-top:5px; margin-bottom: 0; padding:0; }
      a.weniger        { width: 16px; background-image:url(wenigermehr.png); background-position: 0 0; margin-left:20px; margin-right:-1px; }
      a.mehr          { width: 18px; background-image:url(wenigermehr.png); background-position: -18px 0; margin-left:-18px; }
      a:hover.weniger  { background-position: 0 -15px; }
      a:hover.mehr    { background-position: -18px -15px; }
      form            { float: left; }
      select          { font-size: 10px; height:15px; margin:0; padding:0; }
    </style>
  </head>

  <body>
    <table>
      <tr>
        <td>
          <a class="weniger" href="#">&nbsp;</a>
          <form name="schreiben">
            <select name="auswahl">
              <option value="a1">1</option>
              <option value="a2">2</option>
              <option value="a3">3</option>
            </select>
          </form>
          <a class="mehr" href="#">&nbsp;</a>
        </td>
        <td>
          <a class="weniger">&nbsp;</a>
          <form name="lesen">
            <select name="auswahl">
              <option value="a1">1</option>
              <option value="a2">2</option>
              <option value="a3">3</option>
            </select>
          </form>
          <a class="mehr" href="#">&nbsp;</a>
        </td>
      </tr>
    </table>
  </body>

</html>

Kenny [CH] · 1. September 2010

Was ist, wenn du statt mit px mit % arbeitest würdest? Wie sieht es dan aus?

DjNDB · 1. September 2010

Probier's mal damit:

Code:

    <style type="text/css">
      a                { display: block; float: left; height: 15px; text-decoration:none; margin-top:0px; margin-bottom: 0; padding:0; }
      a.weniger        { width: 16px; background-image:url(wenigermehr.png); background-position: 0 0; margin-left:20px; margin-right:-1px; }
      a.mehr          { width: 18px; background-image:url(wenigermehr.png); background-position: -18px 0; margin-left:-18px; }
      a:hover.weniger  { background-position: 0 -15px; }
      a:hover.mehr    { background-position: -18px -15px; }
      form            { float: left; }
      select          { font-size: 10px; height:15px; margin:0; padding:0; vertical-align: top}
    </style>

Änderungen:

Code:

 a                { margin-top:0px;  }
select          { vertical-align: top }

Mr. Snoot · 1. September 2010

Perfekt, vielen Dank

Safari tanzt zwar noch ein wenig aus der Reihe, aber das ist egal.

Fleshgrinder · 1. September 2010

Das Problem vom Safari ist, dass er die komischen Mac-Buttons hat und darum viel mehr padding etc. benötigt. Mit dem folgenden CSS sieht es bei mir bei allen Webbrowsern circa gleich aus.

Code:

a
{
	display:block;
	float:left;
	height:15px;
	text-decoration:none
}

a.weniger,
a.mehr
{
	cursor:pointer;
	width:18px;
	margin-left:20px;
	background:url(wenigermehr.png) 0 0 no-repeat
}

a.mehr
{
	background-position:-18px 0;
	margin-left:-18px
}

a:hover.weniger
{
	background-position:0 -15px
}

a:hover.mehr
{
	background-position:-18px -15px
}

form
{
	float:left
}

select
{
	font-size:11px;
	width:32px;
	height:15px;
	vertical-align:top;
	margin:0;
	padding:0;
	border:none
}

Mr. Snoot · 6. September 2010

Das funktioniert bei mir gar nicht mehr so recht (rechter Link befindet sich links, linker Link ist nicht zu sehen). Ist aber nicht so wild - so viele User werden sicher nicht auf Safari sein, da kann ich das verschmerzen

Mister Blue Sky · 6. September 2010

Löst den Schmerz: Safari in CSS und Javascript ansprechen

GF

QXARE · 6. September 2010

Zur Info: Bei float: left wird das Element automatisch mit display:block formatiert. Kannst du also beim a Tag weglassen.

Mister Blue Sky · 6. September 2010

Hochinteressant. Ebenso die Baumstruktur eines Threads.

GF

Suche

HTML Image auf gleicher Höhe wie <select>

Mr. Snoot

Gast

Anhänge

Kenny [CH]

Commodore

DjNDB

Lt. Commander

Mr. Snoot

Gast

Fleshgrinder

Lt. Junior Grade

Mr. Snoot

Gast

Anhänge

Mister Blue Sky

Gast

QXARE

Lt. Commander

Mister Blue Sky

Gast

Ähnliche Themen