zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Probleme mit dem IE (7) - Navigation

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.04.2010, 18:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.04.2010
Ort: Gummersbach
Beiträge: 1
wunderkind befindet sich auf einem aufstrebenden Ast
Frage Probleme mit dem IE (7) - Navigation

Guten Abend allerseits,

Habe mich vor wenigen Monaten HTML/CSS gewidmet und bin grade dabei, eine Seite für eine Freundin zu programmieren. Das Grundgerüst an sich steht, zumindestens in Firefox, Safari und Chrome.

Leider macht mir das Design aber in Internet Explorer Probleme, weil sie nicht richtig erscheint - wie schon erwartet. Mir gehts in erster Hinsicht nur um die Navigation.

Hier ist der HTML-Code:

HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Unsere standesamtliche Hochzeit | Gabriele Bernadette Apostel & Lars Strempel</title>

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

</head>

<body>

<div class="header_bg"> <img src="images/header.jpg" title="Apsotel-Strempel" /> </div>

<div class="content_bg1"> </div>

<div class="content_bg2"> 

	<div class="navi"> 
		<ul class="menu">
			<li><a href="index.html"><span>startseite</span></a></li>
			<li><a href="gallery.html" class="active"><span>bildergalerien</span></a></li>
					<ul class="submenu">
						<li><a href="standesamtlich.html">standesamtliche hochzeit</a></li>
						<li><a href="kirchlich.html">kirchliche hochzeit</a></li>
						<li><a href="standesamtlich.html">weihnachten 2007</a></li>
						<li><a href="kirchlich.html">new york 2009</a></li>
						<li><a href="standesamtlich.html">urlaub 2005</a></li>
						<li><a href="kirchlich.html">urlaub 2004</a></li>
					</ul>
			<li><a href="downloads.html"><span>downloads</span></a></li>
			<li><a href="guestbook.html"><span>gästebuch</span></a></li>
			<li><a href="impressum.html"><span>impressum</span></a></li>
		</ul>
	</div>
	
	
	<div class="content"> 
	
		<h1> Standesamtliche Hochzeit 2009 </h1>

		<div class="miniaturbild"> <a href="images/galerien/beispiel.jpg" rel="lightbox[gallery]"> <img src="images/galerien/miniaturbilder/beispiel_thumb.jpg"/> </a> </div>
		<div class="miniaturbild"> <a href="images/galerien/beispiel.jpg" rel="lightbox[gallery]"> <img src="images/galerien/miniaturbilder/beispiel_thumb.jpg"/> </a> </div>
		<div class="miniaturbild"> <a href="images/galerien/beispiel.jpg" rel="lightbox[gallery]"> <img src="images/galerien/miniaturbilder/beispiel_thumb.jpg"/> </a> </div>
		<div class="miniaturbild"> <a href="images/galerien/beispiel.jpg" rel="lightbox[gallery]"> <img src="images/galerien/miniaturbilder/beispiel_thumb.jpg"/> </a> </div>
		
		<div class="miniaturbild"> <a href="images/galerien/beispiel.jpg" rel="lightbox[gallery]"> <img src="images/galerien/miniaturbilder/beispiel_thumb.jpg"/> </a> </div>
		<div class="miniaturbild"> <a href="images/galerien/beispiel.jpg" rel="lightbox[gallery]"> <img src="images/galerien/miniaturbilder/beispiel_thumb.jpg"/> </a> </div>
		<div class="miniaturbild"> <a href="images/galerien/beispiel.jpg" rel="lightbox[gallery]"> <img src="images/galerien/miniaturbilder/beispiel_thumb.jpg"/> </a> </div>
		<div class="miniaturbild"> <a href="images/galerien/beispiel.jpg" rel="lightbox[gallery]"> <img src="images/galerien/miniaturbilder/beispiel_thumb.jpg"/> </a> </div>

		
	</div>

	
</div>

</body>

Hier ist der Stylesheet:

HTML-Code:
body {
font-family: Helvetica, Arial, Tahoma, Verdana, sans-serif;
font-size: 12px;
font-weight: normal;
color: #595264;
background: #d0e0d6;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
min-height: 101%;
line-height: 140%;
}

p  {
	color: #595264;
	text-align: justify;
	line-height: 140%;
}

a {
	color: #595264;
	text-decoration: none;
	padding: 3px;
	border-bottom: 1px solid;
}

a:hover {
	color: #595264;
	background: white;
	text-decoration: none;
	padding: 3px;
	border-bottom: 1px solid;
	
	-webkit-transition: background .25s linear;
	-moz-transition: background .25s linear;
    transition: background .25s linear;
}

h1 {
	font-size: 24px;
	font-weight: bolder;
	color: #595264;
	width: 640px;
	margin-top: 6px;
	margin-bottom: 20px;
	padding-bottom: 7px;
	border-bottom: 1px dashed;
	
	     text-shadow: 0px 1px 0px #fff;
        -moz-text-shadow: 0px 1px 0px #fff;
        -webkit-text-shadow: 0px 1px 0px #fff;
		
}

h2{
	font-size: 18px;
	font-weight: bolder;
	margin-top: 20px;
	margin-bottom: 5px;
	padding: 0;
}

h3 {
	font-family: Helvetica, Arial, Tahoma, Verdana, sans-serif;
	font-size: 16px;
	font-weight: bolder;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 0;
}



img { border: none; }

.header_bg {
width: 100%;
height: 285px;
background-image: url(images/header_gradient.jpg);
position: absolute;
border-bottom: 1px solid white;
text-align: center;
}

.content_bg1 {
	position: absolute;
	width: 966px;
	top: 285px;;
	left: 50%;
	margin-left: -483px;
	background: #ddd;
	opacity: 0.2;
}

.content_bg2{
	position: absolute;
	width: 970px;
	top: 285px;;
	left: 50%;
	margin-left: -483px;
	background: none;

        box-shadow: 0px 2px 7px #9abbae;
        -moz-box-shadow: 0px 2px 10px #9abbae;
        -webkit-box-shadow: 0px 2px 10px #9abbae;
}

.content {
	float: left;
	width: 660px;
	margin-top: 20px;
}

.galery_row {
	color: #e4e1d2;
	width: 660px;
	height: 110px;
	margin-bottom: 20px;
}

.galery_row a {
	color: #595264;
	text-decoration: none; 
	background: none; 
	border:none; 
	padding: 0;
	}

}

.galery_row a:hover {
	color: #e4e1d2;
	text-decoration: none;	
	background: none; 
	border:none; 
	padding: 0;
	
	-webkit-transition: background .25s linear;
	-moz-transition: background .25s linear;
    transition: background .25s linear;
}

.img_gallery {
	margin-right: 20px;
	float: left;
}
.text_gallery {
	position: relative;
	margin-right: 20px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 0px;
	padding-bottom: 5px;
	background: #dde6e1;
	height: 98px;
	width: 304px;
	border: 3px solid white;
	float: right;
	color: #595264;
	font-family: georgia, arial, tahoma, verdana, sans-serif;
}

.text_gallery:hover {
	margin-right: 20px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 0px;
	padding-bottom: 5px;
	background: #595264;
	height: 98px;
	width: 304px;
	border: 3px solid white;
	float: right;
	color: #e4e1d2;
	font-family: georgia, arial, tahoma, verdana, sans-serif;
	
	-webkit-transition: background .25s linear;
	-moz-transition: background .25s linear;
    transition: background .25s linear;
}

.text_gallery a { background: none; border:none; padding: 0;}
.text_gallery a:hover { background: none; border:none; padding: 0;}

.img_galery a { background: none; border:none; padding: 0;}
.img_galery a:hover { background: none; border:none; padding: 0;}

.miniaturbild a { background: none; border:none;}

.miniaturbild a {
	background: none;
	border:none;
	padding: 0;
}

.miniaturbild {
	float: left;
	margin-right: 15px;
	margin-bottom: 12px;
	height: 110px;
	        box-shadow: 0px 2px 7px #9abbae;
        -moz-box-shadow: 0px 2px 10px #9abbae;
        -webkit-box-shadow: 0px 2px 10px #9abbae;
}

.miniaturbild:hover {
        box-shadow: 0px 2px 7px #595264;
        -moz-box-shadow: 0px 2px 10px #595264;
        -webkit-box-shadow: 0px 2px 10px #595264;
}





/* NAVIGATION ////////////////////////////////// */

.navi {
	width: 250px;
	height: 100%;
	float: left;
	margin: 20px;
	margin-left: 20px;
	background: none;
	border: none;
}

.menu {
	margin: 0;
	padding: 0;
	width: 250px;
	list-style: none;
	background: none;	
 }
 
.menu li {
	padding: 0;
	margin: 0 0 1px 0;
	height: 25px;
	display: block;
	background: none;
 }
.menu li a {
	text-align: left;
	height: 20px;
	padding: 0px 25px;
	font: 24px helvetica, Arial, Tahoma, Verdana sans-serif;
	font-weight: 600;
	font-variant: small-caps;
	color: rgb(154,187,174);
	display: block;
	text-decoration: none;
	text-shadow: #fff 0px 1px 3px;
	background: none;
	border: none;
	}
	
.menu li a:hover {
	color: #595264;
	background: none;
	
	-webkit-transition: color .25s linear;
	-moz-transition: color .25s linear;
    transition: color .25s linear;
	}
	
.menu li a.active, .menu li a.active:hover {
	color:rgb(89,82,100);
	background: none;
	}
	
.menu li a span {
	line-height: 20px;
	letter-spacing: -0.02em;
	background: none;
	}
	
.submenu {
	margin-top: 10px;
	padding-left: 5px;
	background: none;
	}

.submenu li a {
	text-align: left;
	height: 20px;
	padding: 0px 25px;
	margin-bottom: 10px;
	font: 16px Helvetica, Arial, Tahoma, Verdana sans-serif;
	font-weight: 600;
	font-variant: small-caps;
	color: #595264;
	display: block;
	text-decoration: none;
	text-shadow: #595264 0px px 5px;
	background: none;
	}
	
.submenu li a.active, .submenu li a.active:hover {
	text-decoration: underline;
	background: none;
	
	-webkit-transition: text-decoration .25s linear;
	-moz-transition: text-decoration .25s linear;
    transition: text-decoration .25s linear;
	}
	
.submenu li a:hover {
	text-decoration: underline;
	background: none;
}
	

/* LIGHTBOX //////////////////////////////////// */

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left; background: none; border:none; padding: 0;}
#nextLink { right: 0; float: right; background: none; border:none; padding: 0;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none; background: none; border:none; padding: 0;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

/* ///////////////////////////////////////////// */
Irgenwelche Ideen, was ich machen könnte, damit die Seite auch im Internet Explorer "richtig" angezeigt wird?

Für jegliche Tipps und Hilfe würde ich mich freuen.
Vielen Dank schonmal im Vorraus.
Mit Zitat antworten
Sponsored Links
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
Probleme mit dem Internet Explorer Webby0815 CSS 8 24.02.2011 15:36
Navigation ist hinter dem Inhalt. wp4r CSS 15 14.06.2010 13:43
Probleme mit dem Gestalten der Navigation BoFiaZ CSS 3 29.09.2008 21:17
CSS Navigation (Farben probleme) Siwolk CSS 5 07.05.2008 20:14
probleme mit dem footer - schiebt sich immer drüber! gudrun CSS 5 29.04.2008 15:26


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:32 Uhr.