zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit einbinden von Dropdown-Navigation in Seite...

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.03.2009, 21:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.12.2008
Beiträge: 4
epsylon2 befindet sich auf einem aufstrebenden Ast
Standard Problem mit einbinden von Dropdown-Navigation in Seite...

Hallo Forum,

hab ein CSS-DropDown Menu abgewandelt und in den verschiedenen Browsern (IE 6&7, Opera 9.64, FF 3.08, Safari und Chrome) getestet. Soweit so gut -alles funktioniert:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<title>Untitled</title>
	<link rel="stylesheet" media="all" type="text/css" href="style_02.css" />
</head>

<body>
<div>
	<ul id="navigation">
    	<li><a href="#Beispiel">Seite 1</a></li>

    	<li><a href="#Beispiel">Seite 2</a>
      		<ul>
        		<li><a href="#Beispiel">Seite 2a</a></li>
        		<li><a href="#Beispiel">Seite 2b</a></li>
			<li><a href="#Beispiel">Seite 2c</a></li>
      		</ul>
    	</li>

    	<li><a href="#Beispiel">Seite 3</a></li>

    	<li><a class="current" href="#Beispiel">Seite 4</a></li>

    	<li><a href="#Beispiel">Seite 5</a></li>
	</ul>
</div>

</body>
</html>
Code:
* {
	margin: 0;
	padding: 0;
    }
	
body {
	font: normal 14px trebuchet ms, Helvetica,  sans-serif;
	color: #000;
	background: #fff;
    }
	
ul {
	list-style: none;
	}
		
#navigation {
	float: left;
	height: 29px;
	width: 100%;
	background-image: url(images/bg_navi.jpg);
	}
	
#navigation li {
	float: left;
	width: 150px;
	}
	
#navigation a {
	color: #000;
	text-decoration: none;
	display:block;
	padding: 5px 6px 5px 11px;
	background: #6c8;
	border-right: 1px solid #000;
	background-image: url(images/bg_navi.jpg);
	}
	
#navigation a:hover {
	background:#ccc; /* grau */
	color: #ededed;
	background: #ffffff url(images/bg_navi_on.jpg) no-repeat right top;
	}
	
#navigation ul {
        height: 30px;
	position: absolute;
	left:-9999px;
	}
	
#navigation li:hover ul {
        top: 28px;
	left: auto;
        border-top: 1px solid #333;	
	}
	
#navigation li li {
	float: none;
	}
	
#navigation li li a {
	background: #ededed; /* hellgrau */
	color: #000;
	border-right: none;
	}
	
#navigation li li a:hover {
	color: #ededed;
	background: #999 url(images/bg_sub.jpg) no-repeat right top;
	}

#navigation a.current {
	color: #ededed;
	background: #999 url(images/bg_navi_on.jpg) no-repeat right top;
	}	
	
/* White Space Bug */
#navigation a {
	min-height: 0;
	}
	
* html #navigation a {
	height: 1px;
	}

/* CSS Popup Bug in IE 7 */
	#navigation li:hover {
	text-indent: 0;
	}
Jetzt habe ich das Ganze in die dazugehörende Seite eingebaut und im IE funktioniert es nicht mehr! Irgendjemand ne Idee, woran das liegen könnte?

Gruß, epsylon2

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>irgendein Seitentitel</title>
	<link rel="stylesheet" type="text/css" href="style_screen.css" media="screen">
</head>

<!--[if IE ]><body class="ie"><![endif]-->
<!--[if !IE]>--><body><!--<![endif]-->
<div id="background">
	<div id="container">
		<div id="links">
			<div id="links_oben">&nbsp;</div>
		</div>
		<div id="mitte">
			<div id="header_mitte">&nbsp;</div>
			<div id="header_navi">
			
				<ul id="navigation">
			    	<li><a href="#Beispiel">Seite 1</a></li>
			
			    	<li><a href="#Beispiel">Seite 2</a>
			      		<ul>
			        		<li><a href="#Beispiel">Seite 2a</a></li>
			        		<li><a href="#Beispiel">Seite 2b</a></li>
							<li><a href="#Beispiel">Seite 2c</a></li>
			      		</ul>
			    	</li>
			
			    	<li><a href="#Beispiel">Seite 3</a></li>
			
			    	<li><a class="current" href="#Beispiel">Seite 4</a></li>
			
			    	<li><a href="#Beispiel">Seite 5</a></li>
				</ul>
			
			</div>
			<div id="content">
				<div id="column_content">
					<div class="text">
					<h1>Headline</h1>
					<h2>Subheadline</h2>
					
					<p>	
					<dl class="right">
						<dd><img src="images/content_bild.jpg" alt="Bildunterschrift" border="0"></dd>
						<dt>Bildunterschrift</dt>
					</dl>
					Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
					</p>
					<p>
					Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
					</p>
					</div>
				<div id="footer"><a href="#">Kontakt</a>  |  <a href="#">Sitemap</a>  |  <a href="#">Impressum</a>
				</div>
				</div>
				
				<div id="column_box">
					<div class="box_container">
						<div class="box_header">Überschrift</div>
						<div class="box_content"><a href="#" class="mehr">mehr...</a>
						</div>
					</div>
					
					<div class="box_container">
						<div class="box_header">Überschrift</div>
						<div class="box_content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</div>
					</div>
					
					<div class="box_container">
						<div class="box_header">Überschrift</div>
						<div class="box_content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</div>
					</div>
				</div>
			</div>
			
			
		</div>
		<div id="rechts">
			<div id="rechts_oben">&nbsp;</div>
		</div>
	</div>
</div>
</body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.03.2009, 21:37
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.223
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Code:
<!--[if IE ]><body class="ie"><![endif]-->
Ich habe mir zwar den Code nicht zusammengesetzt, aber das Leerzeichen zwischen IE und der eckigen, schließenden Klammer ist falsch.
Hilft dir das weiter?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.03.2009, 21:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.12.2008
Beiträge: 4
epsylon2 befindet sich auf einem aufstrebenden Ast
Standard Leider nein...

....gar nicht! Das hab ich einem kleinem Script (Conditional classnames) entnommen, 1:1 kopiert und den Fehler mit übernommen - das Einbinden von speziellen Eigenschaften für den IE funktioniert trotzdem.

Code:
If you use this HTML:

<!--[if IE ]>
  <body class="ie">
<![endif]-->
<!--[if !IE]>-->
  <body>
<!--<![endif]-->


with CSS that looks something like:

div.foo {
    color: inherit;
    }

.ie div.foo {
    color: #ff8000;
    }
...trotzdem Danke!
Mit Zitat antworten
  #4 (permalink)  
Alt 28.03.2009, 22:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.784
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Vermutlich liegt es am Quirksmode.
Google: Doctype Switch
Mit Zitat antworten
  #5 (permalink)  
Alt 28.03.2009, 23:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.12.2008
Beiträge: 4
epsylon2 befindet sich auf einem aufstrebenden Ast
Standard Hatte die Lösung gerade gefunden...

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> - funktioniert nicht!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> funktioniert!
Thread kann geschlossen werden!

Danke...
Mit Zitat antworten
Antwort

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
Problem mit overflow, Navigation verschoben... buemplizer CSS 9 09.09.2009 09:43
Seite gänzlich Klassenbasiert struktriert: einbinden dynamischer Navigation? braindead Serveradministration und serverseitige Scripte 2 19.12.2007 13:41
Problem mit Navigation in css Layout INTERAKT!V CSS 22 01.06.2007 13:34
Div bzw Dropdown problem kampfgnom (X)HTML 6 08.05.2007 00:11
Menü in Seite einbinden Anonymous CSS 2 21.07.2003 11:13


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:30 Uhr.