zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Unterschiedliche Darstellung in Firefox / IE

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.08.2011, 12:43
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
  #2 (permalink)  
Alt 29.08.2011, 17:08
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Ich kann zwischen den Browser IE8, FF5, Chrome13 und Opera 11.50 keine Unterschiede feststellen. Minimale Verschiebungen zwischen Browsern sind normal und nur übermäßigem Aufwand zu verhinder. Das Web ist eben nicht aus Papier.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.08.2011, 17:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.08.2011
Beiträge: 9
memphis2k befindet sich auf einem aufstrebenden Ast
Standard

An meinem Laptop FF 6.0 wird die Seite richtig dargestellt, auf meinem Desktop PC auch FF 6.0 ist sie nach oben (1 - 2 px) verschoben. Dieser Fehler ist dann aber leider nicht browserbedingt?!

Screenshot.png
Mit Zitat antworten
  #4 (permalink)  
Alt 29.08.2011, 17:23
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Einen solchen Fehler habe ich gar nicht gesehen. Bitte validiere erst einmal deinen Code: [Invalid] Markup Validation of http://www.jf-webdesign.de/Studienarbeit/ - W3C Markup Validator

Das macht die Fehlersuche einfacher.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #5 (permalink)  
Alt 29.08.2011, 17:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.08.2011
Beiträge: 9
memphis2k befindet sich auf einem aufstrebenden Ast
Standard

Ist validiert
Mit Zitat antworten
  #6 (permalink)  
Alt 29.08.2011, 17:52
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Nun gut. Für mich ist und bleibt es schwer den Fehler nachzuvollziehen, da ich ihn selber nicht sehe.

Da du aber schon GIFs verwendest, würde ich an deiner Stelle einfach den grünen Hintergrund weg lassen. Der ist da ja sowieso, da er durch geht, und dann nur die Icons drüber legen. Das sollte den Fehler in der Navigation ebenfalls beheben bzw. umgehen

Ist auf deinen beiden Rechnern das gleiche Betriebssystem installiert?
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #7 (permalink)  
Alt 29.08.2011, 19:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.08.2011
Beiträge: 9
memphis2k befindet sich auf einem aufstrebenden Ast
Standard

Hätte gedacht, es wär irgendein kleiner Fehler der sich eingeschlichten hat oder irgendwas worauf ich nicht geachtet habe - aber okay!

Habe deinen Tipp gleich in die Tat umgesetzt und siehe da: in allen Browsern und Versionen passts danke!! (hatte es zuerst so gelöst, aber die Transparenz hat die weisse Umrandung des Bildes stark verpixelt)

Nurnoch eine kleine Sache ist mir aufgefallen: bei älteren Firefox-versionen verschiebt sich die Schrift (also z.B. Schwimmen) etwas nach unten nachdem ich draufgeklickt habe? Woran könnte das liegen?
Mit Zitat antworten
  #8 (permalink)  
Alt 29.08.2011, 21:18
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Auf diese Frage habe ich leider absolut keine Antwort parat. Ich muss aber auch gestehen, dass ich immer nur die neueste Firefox Version (keine Beta) da habe und diese teste.

Das einzige was ich mir erklären könnte, wäre ein Unterschied in irgendwelchen vordefinierten Abständen, da du kein CSS Reset dieser machst.

An deiner Stelle würde ich das hier an den Anfang der CSS-Datei schreiben:
Code:
* {margin:0; padding:0;}
Das zerlegt dir aber wahrscheinlich erst einmal weite Teile der Seite, da plötzlich Abstände wegfallen. Aber nur so ist es machbar ein einigermaßen Ähnliches Bild browserübergreifend zu generieren.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #9 (permalink)  
Alt 29.08.2011, 21:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.08.2011
Beiträge: 9
memphis2k befindet sich auf einem aufstrebenden Ast
Standard

Ändert sich leider nichts ;(
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 30.08.2011, 10:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.08.2011
Beiträge: 9
memphis2k befindet sich auf einem aufstrebenden Ast
Standard

Im IE 7 sieht es weiterhin verschoben aus:

IE7.jpg

Woran liegt das?
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
barrierefreiheit, browser, browserkompatibilität, css, internet explorer

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
unterschiedliche Darstellung zwischen ie und firefox danyboy CSS 13 17.12.2008 23:38
Unterschiedliche Darstellung in Firefox und IE leamaus CSS 6 06.12.2007 20:04
Unterschiedliche darstellung IE6 und Firefox kruegge CSS 1 20.10.2005 18:23
unterschiedliche css darstellung IE und firefox eyetag Site- und Layoutcheck 3 12.04.2005 18:09
Unterschiedliche Darstellung in Firefox und IE Icetiger CSS 3 17.03.2005 19:59


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:28 Uhr.