[IE] Menübuttons werden durch Grafiken in der Höhe auseinandergezogen @ tutorials.de: Tutorials, Forum & Hilfe

Tech-Inside · 18.10.07 18:13

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

<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

Maik · 18.10.07 18:22

Hi,

gibt es eine Online-Version, um das Problem direkt in Augenschein nehmen zu können?

Tech-Inside · 18.10.07 18:25

habs mal freigeschaltet

unter www.tech-inside.de zu erreichen

Maik · 18.10.07 18:44

Derzeit fällt mir dazu leider auch nichts ein.

Zitat von Tech-Inside

ansonsten müssen die Leute die meine Seite mit dem IE besuchen mit den Buttons "leben".

Tech-Inside · 18.10.07 18:52

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

Erstmal danke für die schnelle Hilfe

Maik · 18.10.07 21:17

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;
                [b]position:relative;
                float:left;[/b]
        }
 
        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;
                [b]position:relative;
                float:left;[/b]
        }
 
 
        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;
                [b]border:none;
                position:absolute;
                top:2px;[/b]
        }
 
        [b].button span, .button1 span
        {
                margin-left:24px;
        }[/b]
-->
</style>
 
</head>
<body>
 
<span style="font-size: 11px;[b]float:left;margin-right:5px;[/b]">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">[b]<span>[/b]&nbsp;Anmelden[b]</span>[/b]</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">[b]<span>[/b]&nbsp;Kennwort vergessen?[b]</span>[/b]</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">[b]<span>[/b]&nbsp;Hilfe[b]</span>[/b]</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">[b]<span>[/b]&nbsp;Registrieren?[b]</span>[/b]</a>
 
</body>
</html>

Tech-Inside · 18.10.07 22:01

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

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Text durch Grafiken austauschen lassen

Checkboxen durch Grafiken ersetzen

DIV Höhe wird durch gefloateten DIV beeinflusst?

HILFE Zellen werden auseinandergezogen!

Buchstaben durch Grafiken ersetzen

E-Mail:

Abonnieren Abbestellen