zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Dropdownnavigation verschoben im IE7

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.12.2009, 13:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.12.2009
Beiträge: 5
yvonne59 befindet sich auf einem aufstrebenden Ast
Standard 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;
}
Vielen Dank für einen Tipp!
Yvonne
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.12.2009, 13:56
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.12.2009, 15:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.12.2009
Beiträge: 5
yvonne59 befindet sich auf einem aufstrebenden Ast
Standard

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;
}
Mit Zitat antworten
  #4 (permalink)  
Alt 30.12.2009, 15:37
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.)
Mit Zitat antworten
  #5 (permalink)  
Alt 31.12.2009, 09:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.12.2009
Beiträge: 5
yvonne59 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 31.12.2009, 09:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.12.2009
Beiträge: 5
yvonne59 befindet sich auf einem aufstrebenden Ast
Standard

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;
}
Vielen Dank nochmals!
Yvonne
Mit Zitat antworten
  #7 (permalink)  
Alt 31.12.2009, 10:48
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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)
Mit Zitat antworten
  #8 (permalink)  
Alt 31.12.2009, 12:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.12.2009
Beiträge: 5
yvonne59 befindet sich auf einem aufstrebenden Ast
Lächeln

Danke für den Tipp - werde ich machen! Happy 2010. Yvonne
Mit Zitat antworten
Antwort

Stichwörter
ie7, navigation, positionierung

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:48 Uhr.