30.12.2009, 13:30
|
|||
|
|||
Dropdownnavigation verschoben im IE7
Habe meine 1. Seite mit CSS erstellt und habe nun ein Problem mit der Navigation im IE7: Die 2. Stufe der Navigation wird verschoben nach rechts angezeigt. Ich habe bereits viel ausprobiert, aber vermutlich korrigiere ich am flaschen Ort...da noch "sehr" unerfahren.
Könnten sich jemand die Website anschauen. www.givehope.ch Anbei noch der CSS-Code: Code:
* {
margin: 0;
padding: 0;
}
body {
margin: 20px;
padding: 0;
background: #444444;
font: normal small Arial, Helvetica, sans-serif;
color: #6F4503;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
text-transform: uppercase;
color: #FFC971;
}
h1, h2, h3 {
}
h4, h5, h6 {
}
p, ul, ol, blockquote {
margin-top: 0;
}
a {
color: #6F4503;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
img {
border: none;
}
/* Header */
#logo {
width: 780px;
height: 50px;
margin: 0 auto;
padding: 25px 0 0 0;
background: #FFEE8F url(images/bigbg.gif) repeat-x;
border: 2px solid #382910;
border-bottom: 2px solid #382910;
}
#logo h1 {
text-align: center;
font-size: 3em;
}
#givehope {
float: left;
}
#flags {
float: right;
padding: 0 10px 0 0;
}
#logo h2 {
text-align: center;
font-size: 1.4em;
}
#logo a {
text-decoration: none;
}
/* Menu */
div#navcontainer
{
width: 780px;
height: 36px;
margin: 0 auto;
padding: 0;
background: #DA8802;
border: 2px solid #382910;
border-top: 2px solid #382910;
border-bottom: 0px solid #382910;
}
ul#menu
{
margin: 0;
padding: 0;
list-style: none;
}
ul#menu li
{
display: inline; /* kann evtl. weggelassen werden - noch prüfen */
list-style-type: none;
margin: 0;
padding: 0;
}
ul#subMenu
{
margin: 0;
padding: 0;
position: absolute;
top: 340px;
width: 120px;
display: none;
}
ul#menu li a:link, ul#menu li a:visited
{
text-decoration: none;
width: 120px;
text-align: center;
height: 26px;
padding-top: 10px;
background: #DA8802;
border-top: 0;
color: #FCEB8A;
float: left;
}
ul#menu li
{
float: left;
position: static; /* positioniert subnavi unter navig */
list-style: none;
margin: 0;
padding: 0;
}
ul#menu>li a:hover,
ul#menu>li a:focus,
ul#menu>li a:active,
ul#menu>li:hover,
ul#menu>li:focus,
ul#menu>li:active
{
background: #80612A;
color: #FCEB8A;
}
li:hover ul#subMenu {
display: block;
}
ul#subMenu li {
background: #DA8802;
border-bottom: 0;
border-top: 2px solid #FCEB8A;
color: #80612A;
display: block;
}
ul#subMenu li a:link,
ul#subMenu li a:visited {
width: 120px;
border-top: 2px solid #FCEB8A;
}
ul#subMenu li:hover a {
background: #80612A;
color: #FCEB8A;
}
/* Splash */
#image {
width: 780px;
margin: 0 auto;
background: #382910;
border-left: 2px solid #382910;
border-right: 2px solid #382910;
}
/* Content */
#body {
width: 780px;
margin: 0 auto;
background: #F3EE72;
border: 2px solid #382910;
}
#body .title {
padding: 10px 20px;
background: #FFEE8E url(images/smallbg.gif) repeat-x left bottom;
font-size: 1em;
}
#body .story {
padding: 20px;
border: 0px solid #8D5700;
}
#body .table {
padding: 0 5px;
font: normal small Arial, Helvetica, sans-serif;
color: #6F4503;
}
#body img {
float: right;
margin-left: 10px;
}
#body h2 {
text-align: left;
font-size: 1.3em;
color: #8D5700;
}
/* bot*/
#bot {
width: 760px;
margin: 0 auto;
padding: 10px 10px;
background: #DA8802;
border: 2px solid #382910;
border-top: none;
}
#bot p {
margin: 0;
padding: 0;
text-align: center;
font-size: x-small;
color: #000000;
}
#bot a {
color: #000000;
}
Yvonne 
|
| Sponsored Links |
|
30.12.2009, 13:56
|
||||
|
||||
|
Im Prinzip reicht bereits clear: left; für #subMenu, aber ich würde zusätzlich nur dem IE < 8 noch pos. rel. für li:hover geben, sowie top: 100%; und left: 0; für #subMenu.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
|
| Sponsored Links |
|
30.12.2009, 15:27
|
|||
|
|||
|
Vielen Dank für die schnelle Antwort. Habe die Anweisungen geändert, aber vermutlich nicht richtig (plaziert). Habes es mehrfach versucht, komme aber nicht weiter. Die Sub-Navigation erscheint jetzt im IE am linken Bildrand. Wäre super, wenn Ihr Euch das nochmals anschauen könnt. Habe die Korrekturen im nachfolgenden Code in rot/fett markiet. Wäre super + nochmals vielen Dank.
Code:
* {
margin: 0;
padding: 0;
}
body {
margin: 20px;
padding: 0;
background: #444444;
font: normal small Arial, Helvetica, sans-serif;
color: #6F4503;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
text-transform: uppercase;
color: #FFC971;
}
h1, h2, h3 {
}
h4, h5, h6 {
}
p, ul, ol, blockquote {
margin-top: 0;
}
a {
color: #6F4503;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
img {
border: none;
}
/* Header */
#logo {
width: 780px;
height: 50px;
margin: 0 auto;
padding: 25px 0 0 0;
background: #FFEE8F url(images/bigbg.gif) repeat-x;
border: 2px solid #382910;
border-bottom: 2px solid #382910;
}
#logo h1 {
text-align: center;
font-size: 3em;
}
#givehope {
float: left;
}
#flags {
float: right;
padding: 0 10px 0 0;
}
#logo h2 {
text-align: center;
font-size: 1.4em;
}
#logo a {
text-decoration: none;
}
/* Menu */
div#navcontainer
{
width: 780px;
height: 36px;
margin: 0 auto;
padding: 0;
background: #DA8802;
border: 2px solid #382910;
border-top: 2px solid #382910;
border-bottom: 0px solid #382910;
}
ul#menu
{
margin: 0;
padding: 0;
list-style: none;
}
*+ html li:hover {
positition: relative;
}
*+ html #subMenu {
position: relative; top: 100%; left: 0px;
}ul#menu li
{
display: inline; /* kann evtl. weggelassen werden - noch prüfen */
list-style-type: none;
margin: 0;
padding: 0;
}
ul#subMenu
{
margin: 0;
padding: 0;
position: absolute;
top: 340px;
width: 120px;
display: none;
clear: left;
}
ul#menu li a:link, ul#menu li a:visited
{
text-decoration: none;
width: 120px;
text-align: center;
height: 26px;
padding-top: 10px;
background: #DA8802;
border-top: 0;
color: #FCEB8A;
float: left;
}
ul#menu li
{
float: left;
position: static; /* positioniert subnavi unter navig */
list-style: none;
margin: 0;
padding: 0;
}
ul#menu>li a:hover,
ul#menu>li a:focus,
ul#menu>li a:active,
ul#menu>li:hover,
ul#menu>li:focus,
ul#menu>li:active
{
background: #80612A;
color: #FCEB8A;
}
li:hover ul#subMenu {
display: block;
}
ul#subMenu li {
background: #DA8802;
border-bottom: 0;
border-top: 2px solid #FCEB8A;
color: #80612A;
display: block;
}
ul#subMenu li a:link,
ul#subMenu li a:visited {
width: 120px;
border-top: 2px solid #FCEB8A;
}
ul#subMenu li:hover a {
background: #80612A;
color: #FCEB8A;
}
/* Splash */
#image {
width: 780px;
margin: 0 auto;
background: #382910;
border-left: 2px solid #382910;
border-right: 2px solid #382910;
}
/* Content */
#body {
width: 780px;
margin: 0 auto;
background: #F3EE72;
border: 2px solid #382910;
}
#body .title {
padding: 10px 20px;
background: #FFEE8E url(images/smallbg.gif) repeat-x left bottom;
font-size: 1em;
}
#body .story {
padding: 20px;
border: 0px solid #8D5700;
}
#body .table {
padding: 0 5px;
font: normal small Arial, Helvetica, sans-serif;
color: #6F4503;
}
#body img {
float: right;
margin-left: 10px;
}
#body h2 {
text-align: left;
font-size: 1.3em;
color: #8D5700;
}
/* bot*/
#bot {
width: 760px;
margin: 0 auto;
padding: 10px 10px;
background: #DA8802;
border: 2px solid #382910;
border-top: none;
}
#bot p {
margin: 0;
padding: 0;
text-align: center;
font-size: x-small;
color: #000000;
}
#bot a {
color: #000000;
}
|
|
30.12.2009, 15:37
|
||||
|
||||
|
Google Spezifität CSS
 (Tipp: Es geht um li:hover.)
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
|
|
31.12.2009, 09:19
|
|||
|
|||
|
Habe versucht das mit den Spezifikationen zu verstehen und einige Anweisungen ausprobiert....kein Erfolg. heute morgen nun nochmals mit "frischem" Kopf probiert, aber ich versteh wirklich nicht, wie ich die Anweisung formulieren soll. Habs mit first-child probiert, aber ich weiss nicht wie wie ich die Anweisung schreiben soll. Darf ich nochmals Hilfe erwarten?
Guten Rutsch allerseits und Danke! Yvonne
|
|
31.12.2009, 09:37
|
|||
|
|||
|
Nicht aufgeben heisst es immer - hab's jetzt doch noch geschafft. Habs zwar nur mit dem Web Developper gestestet auf Version IE7 - aber das ist ja eine realistische Testumgebung oder? so hab ichs jetzt gelöst:
Code:
*+ html ul#menu li:hover {
position: relative;
}
*+ html ul#subMenu {
top: 100%; left: 0px;
}
Yvonne
|
|
31.12.2009, 10:48
|
||||
|
||||
|
So ist es richtig - durch die Hinzunahme der ID bei li:hover wird die Spezifität ausreichend erhöht und dadurch die Regel für den Normalzustand, die pos. static für li deklariert, überschrieben.
Übrigens solltest Du Dir unbedingt mal "Multiple IE" oder "IE Collection" installieren, denn im IE 6 ist Katastrophe angesagt
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) Geändert von heiko_rs (31.12.2009 um 10:51 Uhr)
|
 |
| Stichwörter |
| ie7, navigation, positionierung |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Flash Film verschoben im IE 6 und IE7 | alsodenn | (X)HTML | 0 | 12.03.2010 09:03 |
| Im ie6 sidebar verschoben; IE7 und FF alles wunderbar | kampfgnom | CSS | 0 | 08.06.2008 16:21 |
| IE7 fixing - expandable menu | matsie | CSS | 6 | 10.04.2008 15:55 |
| Submenü im IE7 rechts verschoben | tigerlily | CSS | 0 | 12.10.2007 08:33 |
| IE 6 alles verschoben, IE7 und FF alles Ok | DTAG | (X)HTML | 2 | 07.12.2006 18:57 |
Linear-Darstellung
