|
|||
|
Hallo,
So, Ich habe ja mittlerweile meine Seite soweit, dass Sie im FireFox so aussieht, wie Ich das möchte. Allerdings mag der IE das anscheinend gar nicht. Da ist von nem DropDown Menu nicht allzu viel zu sehen... Hab mal gelesen, das man da verschieden Hacks einbinden muss oder so... Hat da vielleicht jemand ne Idee? Hier mal der Code HTML-Datei 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>
<title>Hover_menu</title>
<link rel="stylesheet" type="text/css" href="Hover_menu.css" />
</head>
<body>
<table align="center">
<tr>
<td>
<table class="tableup">
<tr>
<td>
<ul class="menu" id="menuleft" >
<li><a title="Startseite">Home</a>
<ul>
<li><a title="PT-Nova">PT-Nova</a></li>
<li><a title="Download">Download</a></li>
<li><a title="Profil">Profil</a></li>
</ul>
</li>
<li><a title="Unternehmen">Unternehmen</a>
<ul>
<li><a title="Motto">Motto</a></li>
<li><a title="Philosophie">Philosophie</a></li>
<li><a title="Daten/ Fakten">Daten/ Fakten</a></li>
<li><a title="Profil">Profil</a></li>
<li><a title="Referenzen">Referenzen</a></li>
<li><a title="Partner">Partner</a></li>
</ul>
</li>
<li><a title="News">News</a></li>
<li><a title="Termine">Termine</a></li>
<li><a title="Jobs">Jobs</a></li>
<li><a title="Presse">Presse</a></li>
</ul>
</td>
<td>
<ul class="menu" id="menuright">
<li><a title="Kundenlogin">Kundenlogin</a></li>
<li><a title="Kontakt">Kontakt</a>
<ul>
<li><a title="Motto">Motto</a></li>
<li><a title="Philosophie">Philosophie</a></li>
<li><a title="Daten/ Fakten">Daten/ Fakten</a></li>
<li><a title="Profil">Profil</a></li>
<li><a title="Referenzen">Referenzen</a></li>
<li><a title="Partner">Partner</a></li>
</ul>
</li>
<li><a title="Sitemap">Sitemap</a></li>
<li><a title="Impressum">Impressum</a>
<ul>
<li><a title="Motto">Motto</a></li>
<li><a title="Philosophie">Philosophie</a></li>
<li><a title="Daten/ Fakten">Daten/ Fakten</a></li>
<li><a title="Profil">Profil</a></li>
<li><a title="Referenzen">Referenzen</a></li>
<li><a title="Partner">Partner</a></li>
</ul>
</li>
<li><a title="Download">Download</a></li>
</ul>
</td>
</tr>
</table>
<table class="maintable">
<tr>
<td width="10"></td>
<td width="943"></td>
<td width="10"></td>
</tr>
<tr>
<td height="82"></td>
<td valign="middle" align="center"><img src="logo.jpg" width="963" height="82" alt="HanseCom GmbH"/></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="500"></td>
<td class="middletable" align="center">Content</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Code:
/* CSS Document */
/*
=================================
Skin sytles for body
=================================
*/
body
{
background-color:#1F3F84;
text-align:center;
font-family:Arial;
}
/*
=================================
Skin sytles for TABLE-tags
=================================
*/
.tableup
{
color:#FFFFFF;
background-color:inherit;
margin:60px 82px auto 76px;
font-size:12px;
}
.maintable
{
color:inherit;
background-color:#FFFFFF;
margin-left:82px;
margin-right:82px;
width:943px;
font-family: Arial;
font-size:12px;
}
.middletable
{
background-color:#E0F1FB;
color:inherit;
font-size:12px;
}
.navtdleft
{
color:inherit;
background-color:inherit;
text-align: left;
width: 481px;
height: 17px;
font-family: 'Verdana', 'Tahoma', 'Helvetica', 'Arial', sans-serif;
font-size:12px;
}
.navtdright
{
color:inherit;
background-color:inherit;
text-align: right;
width: 481px;
height: 17px;
font-family: 'Verdana', 'Tahoma', 'Helvetica', 'Arial', sans-serif;
font-size:12px;
}
/*Menu Design--------------------------------------------------------------------------*/
/**
* Menü-Container:
*
*****************************************************************************/
ul.menu {
margin: 0;
padding: 0;
/*position: absolute;
font-size: 12px;
list-style-type: none;
font-weight:bold;
}
ul#menuleft {
width: 420px;
float: left;
}
ul#menuright {
width: 560px;
float: right;
}
/**
* Menüeinträge in der Menüleiste:
*
*****************************************************************************/
ul.menu li {
margin: 0;
display: inline;
}
ul#menuleft > li {
float: left;
}
ul#menuright > li {
float: right;
}
ul.menu > li > a {
color : #FFF;
background-color:inherit;
border-bottom:none;
border-right:solid 1px #fff;
border-top:none;
}
/**
* Alle Untermenüs:
*
*****************************************************************************/
ul.menu li ul {
margin: 0;
padding: .2em .3em .3em .2em ;
position: absolute;
list-style-type: none;
/*background-color: #a4c6eb; */
display: none;
float:left;
width:130px;
/*-moz-opacity:0.90; */
background: url('schatten.png');
}
/**
* Alle Menüeinträge der Untermenüs:
*
*****************************************************************************/
ul.menu ul li {
margin: 0;
display:block;
background-color:#a4c6eb;
width:99%;
}
/**
* Alle Links im Menü-Container:
*
*****************************************************************************/
ul.menu a {
padding:.7em .5em .7em .5em;
text-decoration: none;
color: #4b6da7;
cursor: default;
font-size: 11px;
text-align: left;
border-bottom: solid 1px #4b6da7;
display: block;
margin:0px 4px 0px 4px;
text-indent:-.5em;
line-height:.3em;
background: #a4c6eb;
}
/**
* Alle Links in Untermenüs beim Überfahren mit der Maus:
*
*****************************************************************************/
ul.menu a:hover {
padding:.7em .5em .7em .5em;
color: #fff;
background-color:#1F3F84;
display: block;
cursor:pointer;
}
/**
* Alle ungeordnete Listen in Untermenüs beim Überfahren der Menüeinträge in
* der Menüleiste mit der Maus:
*
*****************************************************************************/
ul.menu li:hover> ul{
display: block;
}
ul.menu li:hover > ul li ul
{
margin-top:-23px;
left: 70px;
text-align:left;
}
Danke schon mal für die Bemühungen |
| Sponsored Links |
|
|||
|
Hallo,
Ich habe mittlerweile für mich herausgefunden, das der IE mit dem Kindselektor hover nicht klar kommt, wenn man etwas anderes als a verwendet. In meinem Fall li:hover. Jedoch habe Ich keine Ahnung, wie Ich meinen Code ändern könnte, damit es funktioniert. Java Script sollte nach Möglichkeit keine Verwendung finden. MfG |
| Sponsored Links |
| Themen-Optionen | |
| Ansicht | |
|
|
|
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Div wird im IE nicht richtig angezeigt | Shyne | CSS | 2 | 21.05.2009 23:49 |
| Horizontale Liste mit breiteren Unterpunkten | Korasu | CSS | 3 | 12.05.2009 09:00 |
| tabelle macht schwierigkeiten, nur im FF richtig angezeigt. | css_padawan | CSS | 5 | 16.03.2009 15:40 |
| HP wird irgendwo nicht richtig angezeigt | Miso | (X)HTML | 17 | 09.12.2008 13:48 |