Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

johanness · 21-10-2009, 14:03

Hallo Leute,

ich baue gerade mit HTML und CSS eine kleine Aufklappbox. JavaScript soll nicht zum Einsatz kommen. Im FF und IE6 funktioniert es wunderbar:

Aufklappbox (rechts bei "Sprache wechseln")

Warum geht es nicht im IE7?

Herzlichen Dank!
Johannes

CaselPasel · 21-10-2009, 15:33

Hey,
könntest du denn CSS Code Posten.
Denn sich mit Firebug durch zusuchen is mühsam.

Mit freundlichen Grüßen

Cas

johanness · 21-10-2009, 22:31

HTML-Code:

/*---HOVER-EFFECT---*/
#contentborder li ul {
	display: none;
	position: absolute;
	top:  0;
	left: 0;
}
#contentborder li > ul { /* Opera bugfix */
	top:  auto;
	left: auto;
}
#contentborder ul li:hover ul {
	display: block;
	z-index:2;
	top: 20px; /*vgl. line-height und padding */
}
#contentborder ul li:hover {
	background: #d8e4e5;
	font-weight: bold;
}

/*---STYLING---*/
#contentborder ul {
	background: #d8e4e5;
	margin-top: 10px;
	list-style: none;
}
* html #contentborder ul { /* IE only */
	margin-top: 0;
}
#contentborder li {
	float: left;
	position: relative;
	width: 138px;
}
	* html #contentborder li { /* IE only */
		width: 140px;
	}
	* html #contentborder ul li ul li { /* IE only */
		width: 138px;
	}

#contentborder ul li {
	border: 1px solid #748d90;
	padding: 5px 0 5px 0;
	line-height: 10px;
}
#contentborder ul li a {
	padding-left: 15px;
	text-decoration: none !important;
}
#contentborder ul ul {
	left: -1px; /* vgl. border 1px */
	background: #d8e4e5;
	padding-top: 5px;
	margin: 0;
	padding-bottom: 7px;
	border-right: 1px solid #748d90;
	border-bottom: 1px solid #748d90;
	border-left:  1px solid #748d90;
}	
* html #contentborder ul ul { /* IE only */
	/* nothing at the moment */
}
#contentborder ul li ul li {
	border: 0;
	padding: 0;
	line-height: 20px;
	height: 20px;
}
#contentborder ul li ul li a, #contentborder ul li ul li a:link, #contentborder ul li ul li a:visited {
	font-weight: normal;
	color: #000;
	text-decoration: none;
}
#contentborder ul li ul li a:hover, 		#contentborder ul li ul li a:active, 
#contentborder ul li ul li a.active, 		#contentborder ul li ul li a.active:link, 
#contentborder ul li ul li a.active:hover, 	#contentborder ul li ul li a.active:active, #contentborder ul li ul li a.active:visited {
	color: #df630a;
	text-decoration: none;
}

HTML-Code:

<!--[if IE]>
	<style type="text/css" media="screen">
	body {
		behavior: url(fileadmin/scripts/csshover.htc);
	}
	</style>
<![endif]-->
<!-- ... -->

<td id="contentborder" rowspan="3">
	<table width="100%" border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td class="border-grey-special">
				<!-- SUCHFELD -->
				<ul>
					<li>
						<a href="#">Sprache wechseln
							<ul>
								<li><a href="index.php?id=11&amp;L=0" target="_top" class="active">deutsch</a></li>
								<li><a href="index.php?id=11&amp;L=1" target="_top">english</a></li>
								<li><a href="index.php?id=11&amp;L=2" target="_top">fran&ccedil;ais</a></li>
								<li><a href="index.php?id=11&amp;L=3" target="_top">italiano</a></li>
							</ul>
						</a>
					</li>
				</ul>
			</td>
		</tr>
	</table>
</td>
<!-- ... -->

Nightflyer · 21-10-2009, 23:06

Wenn du denn *html-Hack raus nimmst funktioniert es dann? Wenn ja musst ein conditional statement machen welches nur den IE 6 betrifft.

Code:

<!--[if lt IE 7]>

//code

 <![endif]-->

johanness · 22-10-2009, 09:33

Ich habe nun alle vier *-HTML-Hacks rausgenommen, aber leider kein Unterschied …

Danke für Tipps!

CaselPasel · 22-10-2009, 09:37

Hey,
du setzt beim ersten Li den Hover drauf. Ist ein wunder das es im IE6 funktioniert. Setze doch mal den Hover auf den a Tag drauf. Denn deine 2 Liste befindet sich in den a Tag.

Und ein list-style: none; kann ich auch nicht entdecken.

Mit freundlichen Grüßen

Cas

johanness · 22-10-2009, 12:24

HTML-Code:

list-sytle: none;

Das ist doch enthalten. Vielleicht hast du es übersehen?

HTML-Code:

<!--[if IE]>
	<style type="text/css" media="screen">
	body {
		behavior: url(fileadmin/scripts/csshover.htc);
	}
	</style>
<![endif]-->

Ich vergas oben, die .htc-Datei zu posten (ist geändert). Deshalb geht es auch im IE6.

Den Hover direkt auf den Link zu setzen bzw den Link zu entfernen bringt leider im IE7 und IE8 nichts.

.

CaselPasel · 22-10-2009, 12:32

Hey,
ich schicke dir mal mein Code der funktioniert in allen Browser bis auf IE6 da benötigt man eben ein workaround. Welches ich via JS gemacht habe.

Code:

menu#mainmenu {
	list-style:none;
	margin:0px;
	padding:0px;
	padding-left:2px; /*Wegen dem Seperator*/
	height:25px;
	background-image:url(../img/menu/seperator.gif);
	background-repeat: no-repeat;
	background-position: left center;
	clear: both;
	position:relative;
	z-index: 99;
}
menu#mainmenu li {
	float:left;
	margin:0px;
	padding: 0px;
}

menu#mainmenu li a:active, 
menu#mainmenu li a:link, 
menu#mainmenu li a:visited {
	background-image: url(../img/menu/menu.png);
	background-repeat: no-repeat;
	background-position: 0 -25px; /*Default BG*/
	width: 156px;
	height: 25px; 
	display: block;
	line-height: 25px;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	text-align:center;
	padding: 0px;
	outline: none;
}
menu#mainmenu li a.active{
	background-position: 0 -50px; /*Active BG*/
}
menu#mainmenu li a:hover, 
menu#mainmenu li a:focus {
	background-position: 0 0; /*Hover BG*/
	color: #fff;
}

menu#mainmenu li ul {
	list-style:none;
	margin:0px;
	padding:0px;
	position: absolute;
	display: none;
	border-top:1px solid black;
}
menu#mainmenu li:hover ul,
menu#mainmenu li:focus ul{
	display: block;
}
menu#mainmenu li ul li {
	margin:0px;
	padding:0px;
	float: none;
	display:block;
}
menu#mainmenu li ul li a:active, 
menu#mainmenu li ul li a:link, 
menu#mainmenu li ul li a:visited {
	width: 112px;
	background-image: none;
	background-color: #648DB2;
	border: 1px solid black;
	border-top: none;
	text-align: left;
	padding-left: 40px;
	font-size: 12px;
	display: block;
}
menu#mainmenu li ul li a.active,
menu#mainmenu li ul li a:hover, 
menu#mainmenu li ul li a:focus {
	background-color: #295989;
}

Code:

<menu id="mainmenu">
 <li>
   <a href="">1</a>
   <ul>
      <li>
          <a href="">sub1</a>
      </li>
      <li>
          <a href="">sub2</a>
      </li>
   </ul>
</li>
</menu>

Wunder dich nicht wegen dem menu Tag er ist genau so wie der ul Tag. Ich benutze ihn nur um gleich zusehen das es sich im Code um das Menu handelt.

Mit freundlichen Grüßen

Cas

johanness · 22-10-2009, 13:35

Zitat:

Zitat von CaselPasel

Hey,
ich schicke dir mal mein Code der funktioniert in allen Browser bis auf IE6 da benötigt man eben ein workaround. Welches ich via JS gemacht habe.

Bei mir geht es ja im IE6, nur nicht bei höheren IE-Versionen!?
Wenn ich Deinen Code jetzt adaptiere, dann muss ich ja wieder alles neu stylen und brauche außerdem JS … Wo genau liegt denn der Unterschied zu meinem Code?

Danke!

CaselPasel · 22-10-2009, 13:37

Hey,
ka das habe ich net sehen können auser das ich den menu tag benutze.

Was genau funktioniert nicht?

Mit freundlichen Grüßen

Cas

johanness · 22-10-2009, 13:46

Es klappt halt nicht auf ;-)

CaselPasel · 22-10-2009, 13:48

Hey,
Doctype hast du drin oda??
Und ich packe die liste nach dem a tag und nicht in dem a tag liegt es vllt dran??

Mit freundlichen Grüßen

Cas

CaselPasel · 22-10-2009, 13:52

Hey,
lass es mal immer sichtbar sein.
Schauen ob es angezeigt wird wenn nicht liegt es an irgend ein sheet ansonsten funktioniert der hover nicht.

Mit freundlichen Grüßen

Cas

johanness · 22-10-2009, 14:27

Dann ist es sichtbar.

CaselPasel · 22-10-2009, 15:09

Hey,
dann liegt es am Hover dein a Tag über nimmt wahrscheinlich den Hover da deine 2 Liste im a Tag ist. Nimm sie da ma raus und mach es so wie ich von der Struktur.

21-10-2009, 14:03	#1 (permalink)
johanness Flash & TYPO3 Registriert seit: Oct 2003 Ort: Bayern Beiträge: 2.700	IE7 und Aufklappbox Hallo Leute, ich baue gerade mit HTML und CSS eine kleine Aufklappbox. JavaScript soll nicht zum Einsatz kommen. Im FF und IE6 funktioniert es wunderbar: Aufklappbox (rechts bei "Sprache wechseln") Warum geht es nicht im IE7? Herzlichen Dank! Johannes __________________ Mediendesign-Student

21-10-2009, 23:06	#4 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	Wenn du denn *html-Hack raus nimmst funktioniert es dann? Wenn ja musst ein conditional statement machen welches nur den IE 6 betrifft. Code: <!--[if lt IE 7]> //code <![endif]--> __________________ (\__/) (='.'=) (")_(")

22-10-2009, 09:33	#5 (permalink)
johanness Flash & TYPO3 Registriert seit: Oct 2003 Ort: Bayern Beiträge: 2.700	Ich habe nun alle vier *-HTML-Hacks rausgenommen, aber leider kein Unterschied … Danke für Tipps! __________________ Mediendesign-Student

22-10-2009, 12:24	#7 (permalink)
johanness Flash & TYPO3 Registriert seit: Oct 2003 Ort: Bayern Beiträge: 2.700	HTML-Code: list-sytle: none; Das ist doch enthalten. Vielleicht hast du es übersehen? HTML-Code: <!--[if IE]> <style type="text/css" media="screen"> body { behavior: url(fileadmin/scripts/csshover.htc); } </style> <![endif]--> Ich vergas oben, die .htc-Datei zu posten (ist geändert). Deshalb geht es auch im IE6. Den Hover direkt auf den Link zu setzen bzw den Link zu entfernen bringt leider im IE7 und IE8 nichts. . __________________ Mediendesign-Student

22-10-2009, 13:46	#11 (permalink)
johanness Flash & TYPO3 Registriert seit: Oct 2003 Ort: Bayern Beiträge: 2.700	Es klappt halt nicht auf ;-) __________________ Mediendesign-Student

21-10-2009, 15:33	#2 (permalink)
CaselPasel Neuer User Registriert seit: Sep 2009 Beiträge: 216	Hey, könntest du denn CSS Code Posten. Denn sich mit Firebug durch zusuchen is mühsam. Mit freundlichen Grüßen Cas

22-10-2009, 09:37	#6 (permalink)
CaselPasel Neuer User Registriert seit: Sep 2009 Beiträge: 216	Hey, du setzt beim ersten Li den Hover drauf. Ist ein wunder das es im IE6 funktioniert. Setze doch mal den Hover auf den a Tag drauf. Denn deine 2 Liste befindet sich in den a Tag. Und ein list-style: none; kann ich auch nicht entdecken. Mit freundlichen Grüßen Cas

22-10-2009, 13:37	#10 (permalink)
CaselPasel Neuer User Registriert seit: Sep 2009 Beiträge: 216	Hey, ka das habe ich net sehen können auser das ich den menu tag benutze. Was genau funktioniert nicht? Mit freundlichen Grüßen Cas

22-10-2009, 13:48	#12 (permalink)
CaselPasel Neuer User Registriert seit: Sep 2009 Beiträge: 216	Hey, Doctype hast du drin oda?? Und ich packe die liste nach dem a tag und nicht in dem a tag liegt es vllt dran?? Mit freundlichen Grüßen Cas

22-10-2009, 13:52	#13 (permalink)
CaselPasel Neuer User Registriert seit: Sep 2009 Beiträge: 216	Hey, lass es mal immer sichtbar sein. Schauen ob es angezeigt wird wenn nicht liegt es an irgend ein sheet ansonsten funktioniert der hover nicht. Mit freundlichen Grüßen Cas

22-10-2009, 14:27	#14 (permalink)
johanness Flash & TYPO3 Registriert seit: Oct 2003 Ort: Bayern Beiträge: 2.700	Dann ist es sichtbar. __________________ Mediendesign-Student

22-10-2009, 15:09	#15 (permalink)
CaselPasel Neuer User Registriert seit: Sep 2009 Beiträge: 216	Hey, dann liegt es am Hover dein a Tag über nimmt wahrscheinlich den Hover da deine 2 Liste im a Tag ist. Nimm sie da ma raus und mach es so wie ich von der Struktur.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln