Rollover mit CSS IE und NS

Status
Nicht offen für weitere Antworten.
Baerwatz

Baerwatz

Mitglied
Hallo, ich hoffe es kann mir jemand helfen.

Ich möchte mit Hilfe von CSS Buttons mit nem RollOver-Effekt konstruieren.
Dafür hab ich ne extra Klasse geschrieben und dort die einzelnen Bedingungen für die Links beschrieben.
Das ganze funktioniert jetzt aber nicht: ich bekomme die Links immer so dargestellt, wie ich sie allgemein definiert habe.
Kann mir vielleicht jemand sagen, wo der Fehler liegt?

Hier der Quelltext:

/*test.css*/


body
{
background-color : #FFFFFF;
margin : 0px;
padding : 15px;
}

a
{
font-family : Arial, Verdana, Helvetica, sans-serif;
color : #808080;
text-decoration : none;
font-size: 70%;
}

a:link
{
color : #808080;
text-decoration : none;
}

a:visited
{
color : #A7A7A7;
text-decoration : none;
}

a:hover
{
color : #A7A7A7;
text-decoration : underline;
}

a:active
{
color : #A7A7A7;
text-decoration : underline;
}

img
{
border: none;
}

h1
{
color:#808080;
}

h2
{
color:#808080;
}

div
{
font-family :Arial, Verdana, Helvetica, sans-serif;
padding : 15px;
}

div#frame
{
border : none;
margin-left : auto;
margin-right : auto;
padding : 0;
width : 100%;
}

div.head
{
border : none;
color : #979797;
font-size : 50%;
font-weight : bold;
}

div.content
{
font-size : 100%;
padding-left : 15px;
}

div.buttons
{
font-size : 60%;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
padding-top : 0px;
padding-bottom : 0px;
text-align: left;
white-space: nowrap;
background-color: #A7A7A7;
}

.buttons a
{
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
border:1px solid #FFFFFF;
color : #000000;
text-decoration : none;
background-color: #A7A7A7;
}

.buttons a:link
{
}

.buttons a:visited
{
}

.buttons a:hover
{
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
border:1px solid #FFFFFF;
color : #FFFFFF;
text-decoration : none;
background-color: #808080;
}

.buttons a:active
{
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
border:1px solid #FFFFFF;
color : #FFFFFF;
text-decoration : none;
background-color: #808080;
}

.bold
{
font-weight : bold;
}

/*test_CSS.html*/

<html>
<head xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<title>test_CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" href="test.css" type="text/css" />
</head>

<body>

<div id="frame">

<!--######NAVI OBEN######-->

<div class="content">
<table width=100% valign="top">
<tr>
<td align="right" width=10%>
<a href="inhalt.html">Inhalt</a><br />
<a href="#">Intranet</a><br />
<a href="index.html">Home</a>
</td>
<td align="center">
<img src="pics/unternehmen_na.gif" alt="ETW" width="97" height="40">
</td>
<td align="center" width=15%>
<a href="etw_1.html">Nav1</a>
</td>
<td align="center" width=15%>
<a href="etw_2.html">Nav2</a>
</td>
<td align="center" width=15%>
<a href="etw_h.html">Nav3</a>
</td>
<td align="center" width=15%>
<a href="">&nbsp;</a>
</td>
<td align="center" width=15%>
<a href="">&nbsp;</a>
</td>
</tr>
</table>
</div>
<!--######SPACE######-->
<div class="head">
<center>&nbsp;</center>
</div>

<table width=100%>
<tr>
<!--######NAVI LINKS######-->
<td width=10% valign="top">
<table width="100%" cellspacing="0" cellpadding="0">
<div class="content">
<tr>
<td align="right">
&nbsp;<br />
<a href="etw.html">Link1</a><br />
&nbsp;<br />
<a href="etw1.html">Link2</a><br />
&nbsp;<br />
<a href="etw2.html">Link3</a><br />
&nbsp;<br />
<a href="etw3.html">Link4</a><br />
&nbsp;<br />
<a href="etw4.html">Link5</a><br />
&nbsp;<br />
<a href="etw5.html">Link6</a><br />
&nbsp;<br />
<a href="etw6.html">Link7</a><br />
&nbsp;<br />
<a href="orga.html">Link8</a><br />
&nbsp;<br />
<a href="weg.html">Link9</a><br />
</td>
</tr>
</div>
</table>
</td>

<!--######SPACE######-->
<td width=10%>
<table width="100%" cellspacing="0" cellpadding="0">
</table>
</td>

<!--######CONTENT######-->
<td width=60% valign="top">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td><h2>TEST</h2></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>

<!--######NAVI RECHTS (BUTTONS)######-->
<td width=20% valign="top">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
&nbsp;<br />
&nbsp;<br />
</td>
</tr>
<div class="buttons">
<tr>
<td>
<a href="">Mitarbeiter</a><br />

<a href="">Raumbelegung</a><br />

<a href="">Ansprechpartner</a><br />

<a href="">MA-Sonderaufgaben</a>
</td>
</tr>
</div>
</table>
</td>
</tr>
</table>

</div>
</body>
</html>
 
Schreib mal das hier:
Code: 
<div class="buttons">
    <tr>
        <td>
            [...]
        </td>
    </tr>
</div>
So:
Code: 
<tr>
    <td class="buttons">
        [...]
    </td>
</tr>
Die Div-Tags weglassen, die gehören da nicht hin.

Ps: Das nächste Mal bitte den Code in die entsprechendes BB-Tags ([code])
setzen und vor allem nur den relevanten Teil des Codes, und nicht duzende von
Seiten Code posten.
 
Danke,
das mit dem Quelltext werd ich das nächste mal berücksichtigen. Sorry

Jetzt stellt sich noch ein Problem.
Auf NS funktioniert das ganze so wie es soll, nur beim IE setzt er mir die Schrift in die selbe Farbe wie den Hintergrund. Den MouseOver macht er aber korrekt.
Hängt das vielleicht mit der Farbdeklaration der normalen Links weiter oben zusammen? Die haben nämlich die selbe Farbe wie der Hintergrund.
 
Versuch mal, die Zeilen hier einfach aus deinem CSS-Teil zu löschen:
Code: 
.buttons a:link
{
}

.buttons a:visited
{
}
 
Danke für den Tipp, aber das wars nicht.
Wenn ich die Einstellungen von
.buttons a
in
.buttons a:visited/link
übernehme funktionierts.

IE scheint die Angaben für color., die ich bei
a:visited
gemacht habe bei buttons zu übernehmen.

Nochmals danke für die Mühe, die Du Dir mit mir gemacht hast.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück