Wie eine Box um einen Link?

Status
Nicht offen für weitere Antworten.
Ich habe mich doch informiert, konnte mir aber nicht helfen... deswegen poste ich doch hier.

Gut. Danke! Aber das funktioniert nicht im IE. Dort werden alle Menüpunkt-Links ganz normal angzeigt...
Geht man mit der Maus darüber, wird darunter dann ein roter Kasten mit weißem Border angezeigt...

Im Firefox wird nur Menupunkt 1 und 6 richtig angezeigt. Der erste komplett und der sechste wird unter den nicht "verstilten" Links angezeigt: Halt alle restlichen Links werden stinknormal angezeigt...

HTML:
//

a.m2:link    {color: #524d4d; font-weight: bold; text-decoration: none; display: block; width: 100px; height: 29px; background: #dfdfdf; float:left; border-left:1px solid #ffffff; border-bottom: 1px solid #ffffff; border-top:1px solid #ffffff; text-align: center; line-height: 29px; padding: 0 2px;}

a.m2:visited {color: #524d4d; font-weight: bold; text-decoration: none; display: block; width: 100px; height: 29px; background: #dfdfdf;
float:left; border-left:1px solid #ffffff; border-bottom: 1px solid #ffffff; border-top:1px solid #ffffff; text-align: center; line-height: 29px; padding: 0 2px;}

a.m2:hover   {color: #524d4d; font-weight: bold; text-decoration: none; display: block; width: 100px; height: 29px; background: #FF0000;
float:left; border-left:1px solid #ffffff; border-bottom: 1px solid #ffffff; border-top:1px solid #ffffff; text-align: center; line-height: 29px; padding: 0 2px;}

//
 
Bei mir funktioniert das Stylesheet in den genannten Browsern einwandfrei, wie die beiden angehängten Screenshots beweisen.

Testumgebung: Win2000, FF 1.5, IE 6.0

[editpost]

Entferne mal die Slashes // im CSS-Code, dann lösen sich die Darstellungsprobleme in Luft auf ;)

Code:
//

a.m2:link    {color: #524d4d; font-weight: bold; text-decoration: none; display: block; width: 100px; height: 29px; background: #dfdfdf; float:left; border-left:1px solid #ffffff; border-bottom: 1px solid #ffffff; border-top:1px solid #ffffff; text-align: center; line-height: 29px; padding: 0 2px;}

a.m2:visited {color: #524d4d; font-weight: bold; text-decoration: none; display: block; width: 100px; height: 29px; background: #dfdfdf;
float:left; border-left:1px solid #ffffff; border-bottom: 1px solid #ffffff; border-top:1px solid #ffffff; text-align: center; line-height: 29px; padding: 0 2px;}

a.m2:hover   {color: #524d4d; font-weight: bold; text-decoration: none; display: block; width: 100px; height: 29px; background: #FF0000;
float:left; border-left:1px solid #ffffff; border-bottom: 1px solid #ffffff; border-top:1px solid #ffffff; text-align: center; line-height: 29px; padding: 0 2px;}

//

Kommentare werden in CSS nämlich mit /* hier folgt der Kommentar */ maskiert.

.
 

Anhänge

  • ss_ff.png
    ss_ff.png
    18,1 KB · Aufrufe: 23
  • ss_ie.png
    ss_ie.png
    10,3 KB · Aufrufe: 29
das ist aber schwer komisch. Hier mal die gesamte Template:

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>%[TITLE]%</title>
<meta name="keywords" CONTENT="%[META_KEYWORDS]%">
<meta name="description" CONTENT="%[META_DESCRIPTION]%">
<link rel="stylesheet" type="text/css" href="%[IMAGES]%style.css">

<script type="text/javascript">
<!--
function showLayer() {

document.getElementById("gruen").style.visibility = "visible";

}


function hideLayer() {

document.getElementById("gruen").style.visibility = "hidden";

}


//-->
</script>

<style type="text/css">
<!--

#divlayer1 {
  font-family: Verdana,Tahoma,Arial,sans-serif;
  font-size:14px;
  width:400px;
  border: 2px;
  border-color:#000000;
  padding:3px;
  position: absolute;
  top: 200px;
  left: 350px;
}

-->
</style>

<script language="javascript" type="text/javascript">
<!--
var win=null;

onerror = stopError;
function stopError(){
    return true;
}


function N1144021193(){
    myleft=20;
    mytop=20;
    settings="width=472,height=298,top=" + mytop + ",left=" + myleft + ",scrollbars=no,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no,dependent=no";
    win=window.open("lang/de/question.htm","question",settings);
    win.focus();

}
// -->
</script>

<script language="javascript" type="text/javascript">
<!--
var win=null;

onerror = stopError;
function stopError(){
    return true;
}


function j1145472700(){
    myleft=20;
    mytop=20;
    settings="width=500,height=700,top=" + mytop + ",left=" + myleft + ",scrollbars=yes,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no,dependent=no";
    win=window.open("description.htm","short_description",settings);
    win.focus();

}
// -->
</script>

</head>

<body %[STATUSINFO]%>
<script type="text/javascript" src="wz_dragdrop.js"></script>

<a name=t></a>
<center>
<table class="header">
    <tr><td valign=top height=64><a href="%[DOMAIN]%"><img src="%[LOGO]%"></a></td>
        %[FORM_NEWSLETTER]%
      <td valign=top width=100% style="padding-top:5;padding-left:50;">

    <div align=right style="padding-bottom:7;padding-top:6">
        %[LANGUAGES]%
                              
        <font style="font:80% Verdana,Tahoma,Arial,sans-serif; color:#FFFFFF">
        bitte Text einfügen!
        %[INPUT_NEWSLETTER]%%[SUBMIT_NEWSLETTER]%</font>
        </div>
        <table width=100%>
            <tr>
            
                <td>
        <div align=left style="padding-bottom:0;padding-top:12;">
        <font style="font:100% Verdana,Tahoma,Arial,sans-serif; color:#FFFFFF">bitte Text einfügen!</font>
        &nbsp;
        </div>
                </td>
                
                <td>
        <div align=center style="padding-bottom:0;padding-top:12">
        <font style="font:100% Verdana,Tahoma,Arial,sans-serif; color:#FFFFFF">%[PAGE_SLOGAN]%</font>
        &nbsp;
        </div>
                </td>
        
        
        
                <td>
                <div align="center">
                <div align=right style="padding-bottom:0;padding-top:12">
                <a onClick="javascript:j1145472700();" style="cursor:pointer">
                <font style="font:100% Verdana,Tahoma,Arial,sans-serif; color:#FFFFFF">
                bitte Text einfügen!
                </font>
                </a>
                </div>
                </div>
                </td>
             </tr>
        </table>
        
        </td>
    </tr>
        </form>
    <tr><td height=30 colspan=2>
            <table width=100%>
            <tr><td height=30>

<a href="menu_1.php" class="m2">Menu 1</a>
<a href="menu_2.php" class="m2">Menu 2</a>
<a href="menu_3.php" class="m2">Menu 3</a>
<a href="menu_4.php" class="m2">Menu 4</a>
<a href="menu_5.php" class="m2">Menu 5</a>
<a href="menu_6.php" class="m2">Menu 6</a>
<a href="menu_7.php" class="m2">Menu 7</a>  
        
                %[MENU_RECOMMEND]%
                </font>
                <!--</td>-->
                <!--<td align=right nowrap>-->
                <!-- SPACE -->         
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <!-- SPACE -->

<font style="font:100% Verdana,Tahoma,Arial,sans-serif;" color="#35366c">
&nbsp;&nbsp;&nbsp; Test </font>
<a href="javascript:N1144021193();"><img src="question.gif" width="16" height="16" border="0" align="absmiddle"></a>

</td>

            </tr>
                <tr><td class="pagessubmenu" colspan=2 align=center>
                
                <font style="font:90% Verdana,Tahoma,Arial,sans-serif;">
                %[GRID_SUBPAGES]%
                </font>
                </td></tr>
            </table>
         </td></tr>
</table>



<script type="text/javascript">
<!--

SET_DHTML(CURSOR_MOVE, "name1", "divlayer1", "nochEinLayer", "letztesBild");

//-->
    </script>
 
Bitte lese nochmal meinen letzten Beitrag, den ich kurz vor deinem Posting editiert hatte ;)
 
*freu*

Aber der IE macht jetzt wieder Probleme (FF zeigt alles korrekt an):

HTML:
<a href="menu_1.php" class="m2">Menu 1</a>
<a href="menu_2.php" class="m2">Menu 2</a>
<a href="menu_3.php" class="m2">Menu 3</a>
<a href="menu_4.php" class="m2">Menu 4</a>
<a href="menu_5.php" class="m2">Menu 5</a>
<a href="menu_6.php" class="m3">Menu 6</a>
<a href="menu_7.php" class="m2" style="border-right:1px solid #ffffff;">>Menu 7</a>

CSS:
Code:
a.m2:link    {color: #FFFFFF; font-weight: bold; text-decoration: none; text-transform:uppercase; display: block;  height: 29px; background: #f6a439; float:left; border-left:1px solid #ffffff; border-bottom: 1px solid #ffffff; border-top:1px solid #ffffff; text-align: center; line-height: 29px; padding: 0 8px;}

a.m2:visited {color: #FFFFFF; font-weight: bold; text-decoration: none; text-transform:uppercase; display: block; height: 29px; background: #f6a439;
float:left; border-left:1px solid #ffffff; border-bottom: 1px solid #ffffff; border-top:1px solid #ffffff; text-align: center; line-height: 29px; padding: 0 8px;}

a.m2:hover   {color: #FFFFFF; font-weight: bold; text-decoration: text-transform:uppercase; none; display: block; height: 29px; background: #e20707;
float:left; border-left:1px solid #ffffff; border-bottom: 1px solid #ffffff; border-top:1px solid #ffffff; text-align: center; line-height: 29px; padding: 0 8px;}

/* BLAU */
a.m3:link    {color: #FFFFFF; font-weight: bold; text-decoration: none; text-transform:uppercase; display: block;  height: 29px; background: #6078a2; float:left; border-left:1px solid #ffffff; border-bottom: 1px solid #ffffff; border-top:1px solid #ffffff; text-align: center; line-height: 29px; padding: 0 8px;}

a.m3:visited {color: #FFFFFF; font-weight: bold; text-decoration: none; text-transform:uppercase; display: block; height: 29px; background: #6078a2;
float:left; border-left:1px solid #ffffff; border-bottom: 1px solid #ffffff; border-top:1px solid #ffffff; text-align: center; line-height: 29px; padding: 0 8px;}

a.m3:hover   {color: #FFFFFF; font-weight: bold; text-decoration: text-transform:uppercase; none; display: block; height: 29px; background: #e20707;
float:left; border-left:1px solid #ffffff; border-bottom: 1px solid #ffffff; border-top:1px solid #ffffff; text-align: center; line-height: 29px; padding: 0 8px;}
/* BLAU ENDE*/

Der IE verschiebt das ganze Menü (also die Links um 2 Pixel nach unten), und der Text neben dem Menü ist nicht mittig zentriert (oben/unten), sondern hängt ganz oben...
 
Vielleicht hilft es, wenn du für die Tabelle, in der das Menü eingebettet ist, die Attribute cellpadding="0" und/oder cellspacing="0" notierst, damit der IE das Menü nicht verschiebt.

Ansonsten kann ich mich nur wiederholen, daß ich zwischen FF und IE keine Darstellungsunterschiede, wie z.B. eine vertikale Verschiebung des Menüs, feststellen kann.
 
Status
Nicht offen für weitere Antworten.
Zurück