Thema: Unterschiedliche Darstellung in Firefox / IE
Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 29.08.2011, 11:43
memphis2k memphis2k ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 29.08.2011
Beiträge: 9
memphis2k befindet sich auf einem aufstrebenden Ast
Unglücklich Unterschiedliche Darstellung in Firefox / IE
Hallo Community,

da ich nach unzähligen Stunden nicht mehr weitergekommen bin, wende ich mich jetzt doch mal an ein Forum und hoffe, es kann mir jemand weiterhelfen.

Problem: Ich schreibe eine Studienarbeit über einen Webshop, das Design (im Besonderen das Menü) verschiebt sich je nach Browserversion (Firefox 3.6 aufwärts, IE 7.0 aufwärts) und Art (Firefox / IE).

Und da ich nicht weiß, welchen Browser mein Prof bei der Korrektur benutzt, wäre es fatal wenn dort irgendetwas verschoben wäre.

Internetadresse: Studienarbeit

CSS:
Code:
@charset "utf-8";
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	width: 100%;
	height: 100%;
	background: #e6e6e6;
	margin: 0; 
	padding: 0;
	text-align: center; 
	color: #000000;
}

/*
#################################
###### HEAD-Bereich #############
################################# 
*/

#navigation_left {
	width: 265px;
	height: 147px;
	text-align: left; 
	margin: 0 0 0 8px;
	padding: 0;
	color: #ffffff;
	font-size: 13px;
	font-weight:bold;
	display: block;
	float: left;
	background-color: #ffffff;
 	background-image: url(../Design/Images/runway.gif);
	background-repeat: no-repeat;
}

#navigation_right {
	width: 679px;
	height: 147px;
	background: #ffffff;
	text-align: left; 
	background-image: url(../Design/Images/top_gradient.gif);
	background-repeat: repeat-x;
	margin: 0;
	padding: 0;
	color: #ffffff;
	font-size: 13px;
	font-weight:bold;
	display: block;
	float: left;
}

#Text_Home{
	margin: 121px 0 0 0;
	padding: 0 0 0 32px;
	color: #ffffff;
	font-size: 13px;
	font-weight:bold;
	display: block;
  	width: 233px;

}

#Text_Home a, a:visited {
	display			: block;
	text-decoration	: none;
	color: 			#ffffff;
	width: 			40px;
	height: 		25px;	
	line-height: 	25px;
}
#Text_Home a:hover, a:active {
	text-decoration	: none;
	color: 			#77d02b;
}

#Text_Sportplatz{
	margin:0;
	padding: 0 10px 0 0;
	font-size: 32px;
	font-weight: bold;
	color: #1c7f40;
	display: block;
  	width: 669px;
	text-align: right;
}

ul.Text_Optionen li {	
float:left; 
border-right:2px solid #1c7f40; 
list-style-type: none;	
display: block; 
padding-right:5px;
margin-left:5px;
width: 65px;
}

.Text_Optionen li#last_option {
border-right:none;
}


.Text_Optionen li a, a:visited {
	text-decoration	: none;
	color: 			#1c7f40;	
}
.Text_Optionen li a:hover, a:active {
	text-decoration	: none;
	color: 			#77d02b;
}

ul.Text_Optionen{
	margin: 0px 0px 0px 0px;
	list-style: none;
	color: #1c7f40;
	font-weight:bold;
	font-size: 11px;
	padding: 0;
  	width: 265px;
	
}

.navigation_items li#li_nav1 a:link, .navigation_items li#li_nav1 a:visited {
	background-image: url(../Design/Images/nav_1.gif);
	background-repeat: no-repeat;
	background-position: center top;
	width: 100px;
	height: 20px;	
	display:block;
	padding: 58px 0 0 0;
	margin: 0 0 0 60px;
	text-decoration:none;
	text-align: center;	

}
.navigation_items li#li_nav1 a:hover,  .navigation_items li#li_nav1 a:active, .navigation_items li#li_nav1 a:focus {
	background-image: url(../Design/Images/nav_1_hover.gif);
	background-repeat: no-repeat;
	background-position: center top;
	width: 100px;
	height: 20px;	
	text-decoration:none;
	color: #77d02b;
}

.navigation_items li#li_nav2 a:link, .navigation_items li#li_nav2 a:visited {
	background-image: url(../Design/Images/nav_2.gif);
	background-repeat: no-repeat;
	background-position: center top;
	width: 100px;
	height: 20px;	
	display:block;
	padding: 58px 0 0 0;
	margin: 0 0 0 60px;
	text-decoration:none;
}

.navigation_items li#li_nav2 a:hover,  .navigation_items li#li_nav2 a:active, .navigation_items li#li_nav2 a:focus {
	background-image: url(../Design/Images/nav_2_hover.gif);
	background-repeat: no-repeat;
	background-position: center top;
	width: 100px;
	height: 20px;	
	display:block;
	text-decoration:none;
	color: #77d02b;
}

.navigation_items li#li_nav3 a:link, .navigation_items li#li_nav3 a:visited {
	background-image: url(../Design/Images/nav_3.gif);
	background-repeat: no-repeat;
	background-position: center top;
	width: 100px;
	height: 20px;	
	display:block;
	padding: 58px 0 0 0;
	margin: 0 0 0 60px;
	text-decoration:none;
}

.navigation_items li#li_nav3 a:hover,  .navigation_items li#li_nav3 a:active, .navigation_items li#li_nav3 a:focus {
	background-image: url(../Design/Images/nav_3_hover.gif);
	background-repeat: no-repeat;
	background-position: center top;
	width: 100px;
	height: 20px;	
	display:block;
	text-decoration:none;
	color: #77d02b;
}

.navigation_items li#li_nav4 a:link, .navigation_items li#li_nav4 a:visited {
	background-image: url(../Design/Images/nav_4.gif);
	background-repeat: no-repeat;
	background-position: center top;
	width: 100px;
	height: 20px;	
	display:block;
	padding: 58px 0 0 0;
	margin: 0 0 0 60px;
	text-decoration:none;
}

.navigation_items li#li_nav4 a:hover,  .navigation_items li#li_nav4 a:active, .navigation_items li#li_nav4 a:focus {
	background-image: url(../Design/Images/nav_4_hover.gif);
	background-repeat: no-repeat;
	background-position: center top;
	width: 100px;
	height: 20px;	
	display:block;
	text-decoration:none;
	color: #77d02b;
}

ul.navigation_items{
	padding: 0px 0 0 0;
	display: block;
	margin: 31px 0 0 0 ;
	list-style: none;
	width: 679px;
	height: 78px;
}

ul.navigation_items li {	list-style-type: none;	display: block;}
ul.navigation_items li a,
ul.navigation_items li a:link,
ul.navigation_items li a:visited {
	color:#ffffff;
	float: left;
	text-align: center;
}

/*
######################################
###### ENDE HEAD-Bereich #############
######################################
*/

/*
#################################
###### CONTENT-Bereich ##########
################################# 
*/

.basket{
	margin: 1px 0px 0px 680px;
	padding: 0;
	color: #1c7f40;
	font-size: 12px;
	float:right; 
	
}

p.basket a, a:visited {
	display			: block;
	text-decoration	: none;
	color: 			#000000;	
}
p.basket a:hover, a:active {
	text-decoration	: none;
	color: 			#77d02b;
}

h1.caption {
	color:#000000;
	text-align:center;
	font-size: 20px;
	padding: 0 0 10px 0;
	margin: 0;
	vertical-align:middle;
	}
	

ul.navigation {
	margin: 0px 0px 0px 62px;
	list-style: none;
	color:#1d413d;
	font-size: 18px;
	padding: 0;
}

ul.navigation li {	list-style-type: none;	display: inline;}
ul.navigation li a,
ul.navigation li a:link,
ul.navigation li a:visited {
	display: block;	
	color:#000000;
	width: 400px;	
	float: left;
	margin: 0px 0px 0px 0px;	
	padding: 0px 0px 0px 0px;}
	
.navigation li#Leichtathletik a:link, .navigation li#Leichtathletik a:visited {
	background:url(../Design/Images/obenlinks.jpg) right center no-repeat;
	width: 380px;
	height: 173px;	
	line-height: 173px;
	display:block;
	padding: 0px 0px 0px 20px;
	margin: 0px 1px 1px 0px;	
	text-decoration:none;
}
 
.navigation li#Leichtathletik a:hover,  .navigation li#Leichtathletik a:active, .navigation li#Leichtathletik a:focus {
	background: url(../Design/Images/obenlinks_aktiv.jpg) right no-repeat;
	width: 380px;
	padding-left: 20px;	
	color:#65c122;

}

.navigation li#Schwimmen a:link, .navigation li#Schwimmen a:visited {
	background:url(../Design/Images/untenlinks.jpg) right center no-repeat;
	width: 370px;
	height: 173px;	
	line-height: 173px;
	display:block;
	padding: 0px 0px 0px 30px;
	margin: 0px 1px 1px 0px;
	text-decoration:none;	

}
 
.navigation li#Schwimmen a:hover,  .navigation li#Schwimmen a:active, .navigation li#Schwimmen a:focus {
	background: url(../Design/Images/untenlinks_aktiv.jpg) right no-repeat;
	width: 370px;
	padding-left: 30px;	
	color:#65c122;

}

.navigation li#Wintersport a:link, .navigation li#Wintersport a:visited {
	background:url(../Design/Images/obenrechts.jpg) left center no-repeat;
	width: 370px;
	height: 173px;	
	line-height: 173px;
	display:block;
	padding: 0px 30px 0px 0px;
	margin: 0px 1px 1px 0px;
	text-align:right;
	text-decoration:none;
}
 
.navigation li#Wintersport a:hover,  .navigation li#Wintersport a:active, .navigation li#Wintersport a:focus {
	background: url(../Design/Images/obenrechts_aktiv.jpg) left no-repeat;
	width: 370px;	
	padding-right: 30px;	
	color:#65c122;

}

.navigation li#Fussball a:link, .navigation li#Fussball a:visited {
	background:url(../Design/Images/untenrechts.jpg) left center no-repeat;
	width: 330px;
	height: 173px;	
	line-height: 173px;
	text-align:right;
	display:block;
	padding: 0px 70px 0px 0px;
	margin: 0px 1px 1px 0px;
	text-decoration:none;
}
 
.navigation li#Fussball a:hover,  .navigation li#Fussball a:active, .navigation li#Fussball a:focus {
	background: url(../Design/Images/untenrechts_aktiv.jpg) left no-repeat;
	width: 330px;	
	padding-right: 70px;	
	color:#65c122;
}

#Main_Container {
	width: 960px;  
	background: #FFFFFF;
	text-align: left;
	background-image: url(../Design/Images/bg_shadow.gif);
	background-repeat: repeat-y;
	margin: 0 auto;
	padding: 0;
}
#Content_Container {
	width: 924px;
	padding: 10px 10px 30px 10px;
	margin: 0 0 0 8px;
	background: #ffffff;
	float: left;
}

#Content_Topline {
	display: block;
	width: 939px;
	padding: 0 0 0 5px;
	margin: 0 0 0 8px;
	background: #ffffff;
	font-size: 12px;
}

/*
#########################################
###### ENDE CONTENT-Bereich #############
#########################################
*/

/*
##############################################
###### CONTENT-Bereich Unterkategorien########
##############################################
*/

.unterkat{
	display:inline;
	margin: 40px 0px 0 0;
	list-style: none;
	float:left; 
	font-size: 14px;
	text-align: center;
}


.unterkat li{
	margin: 0 15px 35px 15px;
	padding: 0;
	height: 145px;
	float: left;
	display:inline;
	background-repeat: no-repeat;
	background-position: center top;
	width: 170px;
	text-align: center;
}

#li_unk1_schwimmen{
	background-image: url(../Design/Images/schwimmen_unk1.gif);
}

#li_unk2_schwimmen{
	background-image: url(../Design/Images/schwimmen_unk2.gif);
} 

#li_unk3_schwimmen{
	background-image: url(../Design/Images/schwimmen_unk3.gif);
}

#li_unk4_schwimmen{
	background-image: url(../Design/Images/schwimmen_unk4.gif);
} 

#li_unk5_schwimmen{
	background-image: url(../Design/Images/schwimmen_unk5.gif);
}

#li_unk6_schwimmen{
	background-image: url(../Design/Images/schwimmen_unk6.gif);
} 
	

#li_unk1_fussball{
	background-image: url(../Design/Images/fussball_unk1.gif);
}

#li_unk2_fussball{
	background-image: url(../Design/Images/fussball_unk2.gif);
} 

#li_unk3_fussball{
	background-image: url(../Design/Images/fussball_unk3.gif);
}

#li_unk4_fussball{
	background-image: url(../Design/Images/fussball_unk4.gif);
} 

#li_unk5_fussball{
	background-image: url(../Design/Images/fussball_unk5.gif);
}

#li_unk6_fussball{
	background-image: url(../Design/Images/fussball_unk6.gif);
} 

	
#li_unk1_leichtathletik{
	background-image: url(../Design/Images/leichtathletik_unk1.gif);
}

#li_unk2_leichtathletik{
	background-image: url(../Design/Images/leichtathletik_unk2.gif);
} 

#li_unk3_leichtathletik{
	background-image: url(../Design/Images/leichtathletik_unk3.gif);
}

#li_unk4_leichtathletik{
	background-image: url(../Design/Images/leichtathletik_unk4.gif);
} 

#li_unk5_leichtathletik{
	background-image: url(../Design/Images/leichtathletik_unk5.gif);
}

#li_unk6_leichtathletik{
	background-image: url(../Design/Images/leichtathletik_unk6.gif);
} 
	
	
	
#li_unk1_wintersport{
	background-image: url(../Design/Images/wintersport_unk1.gif);
}

#li_unk2_wintersport{
	background-image: url(../Design/Images/wintersport_unk2.gif);
} 

#li_unk3_wintersport{
	background-image: url(../Design/Images/wintersport_unk3.gif);
}

#li_unk4_wintersport{
	background-image: url(../Design/Images/wintersport_unk4.gif);
} 

#li_unk5_wintersport{
	background-image: url(../Design/Images/wintersport_unk5.gif);
}

#li_unk6_wintersport{
	background-image: url(../Design/Images/wintersport_unk6.gif);
} 
		

.unterkat li a, a:visited {
	display			: block;
	margin-bottom	: 0;
	padding			: 125px 30px 0 30px;
	text-decoration	: none;
	color: 			 #000000;
}

.unterkat li a:hover {
	color: 			#77d02b;
}



.artikel{
	display:inline;
	margin: 40px 0px 0 0;
	list-style: none;
	float:left; 
	font-size: 14px;
	text-align: center;
}


.art_left{
	margin: 0 15px 35px 0px;
	padding: 0;
	height: 150px;
	float: left;
	display:inline;
	background-repeat: no-repeat;
	background-position: center top;
	width: 150px;
	text-align: center;
	border: #000000 1px solid;
}

.art_right_up{
	margin: 0;
	padding: 0;
	height: 120px;
	float: left;
	display:inline;
	background-repeat: no-repeat;
	background-position: center top;
	width: 650px;
	text-align: center;
	border: #000000 1px solid;
}
.art_right_down_left{
	margin: 4px 0 35px 0 ;
	padding: 0;
	height: 25px;
	float: left;
	display:inline;
	background-repeat: no-repeat;
	background-position: center top;
	width: 350px;
	text-align: center;
	border: #000000 1px solid;
}

.art_right_down_right{
	margin: 4px 0 35px 3px ;
	padding: 0;
	height: 25px;
	float: left;
	display:inline;
	background-repeat: no-repeat;
	background-position: center top;
	width: 295px;
	text-align: center;
	border: #000000 1px solid;
}

/*
#################################################
###### ENDE CONTENT-Bereich Unterkategorien######
#################################################
*/


/*
###################################
###### FOOTER-Bereich #############
###################################
*/

#Copyright{
	margin: 0;
	padding: 25px 0 0 0;
	font-size: 10px;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	clear: both;
}

ul.Text_Abschlussmenu li {	
float:left; 
list-style-type: none;	
display: block; 
padding:0px;
margin:0 0 0 35px;
}

.Text_Abschlussmenu li a, a:visited {
	text-decoration	: none;
	color: 			#000000;	
}
.Text_Abschlussmenu li a:hover, a:active {
	text-decoration	: none;
	color: 			#77d02b;
}

ul.Text_Abschlussmenu{
	margin: 0;
	padding: 20px 0 0 0;
	list-style: none;
	color: #1c7f40;
	font-size: 12px;
}

#bottom_navigation {
	width: 960px;  
	clear: left;
	height: 120px;
	background: #FFFFFF;
	text-align: left;
	background-image: url(../Design/Images/bottom_gradient.gif);
	background-repeat: repeat-y;
	margin: 0;
	padding: 0;
}
#bottom_navigation_end {
	width: 960px;  
	height: 9px;
	background: #FFFFFF;
	text-align: left;
	background-image: url(../Design/Images/bottom_line.gif);
	background-repeat: repeat-y;
	margin: 0;
	padding: 0;
}

.preload {
  width:0px;
  height:0px;
  display:none;
}

/*
########################################
###### ENDE FOOTER-Bereich #############
########################################
*/

HTML:

HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">-->


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Sportplatz.de - Der Shop f&uuml;r Sportler, die wissen was sie wollen.</title>
	<link href="Design/Layout.css" rel="stylesheet" type="text/css" />
	<link rel="shortcut icon" href="Design/Images/sp_icon.ico" />
	<link rel="icon" href="Design/Images/sp_icon.ico" />

</head>
<body>
	<div id="Main_Container">
			<div id="navigation_left">
			<ul class="Text_Optionen">
         		<li><a href="#">Einloggen</a></li>
            	<li id="last_option"><a href="#">Registrieren</a></li>
 	     	</ul>
			<p id="Text_Home"><a href="index.php">Home</a></p>

			</div>
			<div id="navigation_right">
			<p id="Text_Sportplatz">Sportplatz<font color="#65c122">.de</font></p>
				<ul class="navigation_items">
					<li id="li_nav1"><a href="Schwimmen.php" title="Schwimmen">Schwimmen</a></li>
					<li id="li_nav2"><a href="Fussball.php" title="Fussball">Fu&szlig;ball</a></li>

					<li id="li_nav3"><a href="Leichtathletik.php" title="Leichtathletik">Leichathletik</a></li>
					<li id="li_nav4"><a href="Wintersport.php" title="Wintersport">Wintersport</a></li>
				</ul>
			</div>		
		<!--<div style="clear: both;"></div>
		<div id="Content_Topline">		<p class="basket"> 
			<a href="#">
			Warenkorb: 0,00 €<br />
			0 Artikel</a>
		</p>
	</div>-->		<div id="Content_Container">   		
     			<h1 class="caption">Treffen Sie Ihre Auswahl:</h1>
				
				<ul class="navigation">
					<li id="Leichtathletik"><a href="Leichtathletik.php" title="Leichtathletik"  tabindex="1">Leichtathletik</a></li>

					<li id="Wintersport"><a href="Wintersport.php" title="Wintersport"  tabindex="1">Wintersport</a></li>
					<li id="Schwimmen"><a href="Schwimmen.php" title="Schwimmen"  tabindex="1">Schwimmen</a></li>
                    <li id="Fussball"><a href="Fussball.php" title="Fussball"  tabindex="1">Fussball</a></li>
                </ul>
				
    		
		</div>

 <div id="bottom_navigation">
 
	<ul class="Text_Abschlussmenu">

    	<li><a href="#">AGB</a></li>
        <li><a href="#">Impressum</a></li>
        <li><a href="#">Kontakt</a></li>
        <li><a href="#">Hilfe</a></li>
	</ul>    
 	<!--<p id="Copyright">Copyright &copy; Johannes Folger 2011</p>-->
 </div>

 <div id="bottom_navigation_end">
 </div>
  <!-- Preload Navigation Elements -->
	<img class="preload" src="Design/Images/obenlinks_aktiv.jpg" alt="preloading"/>
	<img class="preload" src="Design/Images/obenrechts_aktiv.jpg" alt="preloading"/>
	<img class="preload" src="Design/Images/untenlinks_aktiv.jpg" alt="preloading"/>
	<img class="preload" src="Design/Images/untenrechts_aktiv.jpg" alt="preloading"/>
	<img class="preload" src="Design/Images/nav_1_hover.gif" alt="preloading"/>
	<img class="preload" src="Design/Images/nav_2_hover.gif" alt="preloading"/>

	<img class="preload" src="Design/Images/nav_3_hover.gif" alt="preloading"/>
	<img class="preload" src="Design/Images/nav_4_hover.gif" alt="preloading"/>
  <!-- end Preload Navigation Elements--> 
</div>
</body>
</html>

Kann mir jemand weiterhelfen? Leider bin ich ein CSS-Neuling und hab in diesem Bereich noch nicht so viele Erfahrungen gesammelt, weshalb manche Sachen bestimmt umständlich und bescheuert gelöst wurden
Mit Zitat antworten
Sponsored Links