✔ [IE] Menübuttons werden durch Grafiken in der Höhe auseinandergezogen

Status
Nicht offen für weitere Antworten.
T

Tech-Inside

Grünschnabel
Hallo beisammen,

vielleicht kann mir ja jemand weiterhelfen und weiß hier weiter.

Ich habe mir ein relativ simples Benutzermenü mit CSS Buttons gebastelt. Neben der Schrift ist links jeweils eine Grafik. Diese steht in allen Browsern (FF, Opera, Safari, Konquerer usw) über, was auch so sein soll(!), nur im Internet Explorer nicht, dort zieht die Grafik den Button in die Höhe, obwohl das nicht gewünscht ist.

Ich hab schon zig Sachen bei google gesucht, hab lauter Sachen ausprobiert (display Varianten, position, overflow, z-index, Höhen- und Breitenangaben bei den Grafiken), aber nichts.

Vielleicht hab ich ja auch nur irgendwas ganz doofes übersehen oder der IE beherscht es einfach nicht, ich weiß gerade nicht weiter.

Hier der CSS Code für die Buttons:
Code: 
a.button:link, a.button:visited
{
	background: url(../img/page/bg_button_inactive.png) repeat-x #8eb4cc; 
	color: #FFFFFF;
	font-size: 10px;
	font-weight: bold; 
	text-decoration: none;
	padding-top: 3px;
	padding-bottom: 2px;
	padding-left: 6px; 
	padding-right: 6px;
	margin-left: 2px;
	margin-right: 2px;
	border: 1px solid #546f90;
}

die Bilder werden ganz normal mit img src eingebunden und durch den CSS Befehle vertical-align: top nach unten ausgerichtet.

HTML: 
<a class="button" href="index.php?area={$area}&amp;p=changedetails"><img class="absmiddle_profil" src="{$img_folder}/icon_profil.png">&nbsp;{$lang.profile}</a>

Ich hoffe ihr könnt mir helfen, ansonsten müssen die Leute die meine Seite mit dem IE besuchen mit den Buttons "leben".

Zur besseren Veranschaulichung siehe die Screenshots, die ich angehängt habe
(Bild1: Firefox / Bild2: Opera / Bild3: Internet Explorer)

Schöne Grüße :)
Carsten
 

Anhänge

  • firefox.jpg
    firefox.jpg
    5,1 KB · Aufrufe: 27
  • opera.jpg
    opera.jpg
    5,3 KB · Aufrufe: 18
  • ie7.jpg
    ie7.jpg
    6,1 KB · Aufrufe: 18
Hi,

gibt es eine Online-Version, um das Problem direkt in Augenschein nehmen zu können?
 
Naja, nicht soooo schlimm, das Design wird dadurch nicht zerrissen o.ä., es kann ohne Probleme benutzt werden, darauf kommt es hauptsächlich an.

Aber es hätte ja sein könnnen das ich irgendwas übersehen habe oder das es irgendeinen Hack dafür gibt den ich bisher nicht gefunden habe.
Vielleicht kriegt es ja Microsoft mal hin mit ihrem IE :rolleyes:

Erstmal danke für die schnelle Hilfe :)
 
Das hat mir dann doch keine Ruhe gelassen, und ich hab da mal was mit einer absoluten Positionierung für die Grafikelemente versucht, and it works :)

Das Modell läuft bei mir im IE 5.5, 6 & 7:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_Tech-Inside</title>

<style type="text/css">
<!--
a:link,a:visited      {color: #4a5966; text-decoration:none; font-weight: normal;}
a:hover               {color: #4a5966; text-decoration:underline; font-weight: normal;}

/* Buttons */

        /*  Button Usermenü Profil, Posteingang */
        a.button:link, a.button:visited
        {
                background: url(http://www.tech-inside.de/templates/tech-inside/img/page/bg_button_inactive.png) repeat-x #8eb4cc;
                color: #FFFFFF;
                font-size: 10px;
                font-weight: bold;
                text-decoration: none;
                padding: 3px 6px;
                margin: 0 2px;
                border: 1px solid #546f90;
                position:relative;
                float:left;
        }

        a.button:hover, a.button:active
        {
                background: url(http://www.tech-inside.de/templates/tech-inside/img/page/bg_button_active.png) repeat-x #FFFFFF;
                color: #000000;
                font-size: 10px;
                font-weight: bold;
                border-bottom: 1px solid #000000;
                border-left: 1px solid #000000;
                border-right: 1px solid #000000;
        }


        /*  Button Usermenü Logout */
        a.button1:link, a.button1:visited
        {
                background: url(http://www.tech-inside.de/templates/tech-inside/img/page/bg_button1_inactive.png) repeat-x;
                color: #FFFFFF;
                font-size: 10px;
                font-weight: bold;
                text-decoration:none;
                padding: 3px 6px;
                margin: 0 2px;
                border-top: 1px solid #546f90;
                border-bottom: 1px solid #000000;
                border-left: 1px solid #000000;
                border-right: 1px solid #000000;
                position:relative;
                float:left;
        }


        a.button1:hover
        {
                 background: url(http://www.tech-inside.de/templates/tech-inside/img/page/bg_button1_active.png) repeat-x;
        }



        .absmiddle_profil
        {
                vertical-align: top;
                border:none;
                position:absolute;
                top:2px;
        }

        .button span, .button1 span
        {
                margin-left:24px;
        }
-->
</style>

</head>
<body>

<span style="font-size: 11px;float:left;margin-right:5px;">Du bist nicht angemeldet</span><a class="button" href="javascript:toggleLayer('loginbox');"><img class="absmiddle_profil" src="http://www.tech-inside.de/templates/tech-inside/img/page/icon_signon.png"><span>&nbsp;Anmelden</span></a><a class="button" href="javascript:toggleLayer('pwlostbox');" style="cursor: help;"><img class="absmiddle_profil" src="http://www.tech-inside.de/templates/tech-inside/img/page/icon_forgetpw.png"><span>&nbsp;Kennwort vergessen?</span></a><a class="button" href="/faq/1.htm"><img class="absmiddle_profil" src="http://www.tech-inside.de/templates/tech-inside/img/page/icon_help.png"><span>&nbsp;Hilfe</span></a><a class="button1" href="/registrieren-1.htm"><img class="absmiddle_profil" src="http://www.tech-inside.de/templates/tech-inside/img/page/icon_register.png"><span>&nbsp;Registrieren?</span></a>

</body>
</html>
 
Ein riesengroßes D A N K E S C H Ö N ! :)

Ist der Hammer. Ich hatte auch schon mit span usw rumexperementiert, war dann irgendwann entnervt.

Kann man sich bei dir irgendwie erkenntlich zeigen? Neben einer Erwähnung auf der Seite natürlich
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück