Flash im Hintergrund (Internetexplorer Darstellung)

Linopacino

Hy Leute,
ich habe da ein kleines Problem und zwar gehts um folgende Seite:

http://www.13thunit.com

Öffnet man die Seite im Firefox oder Safari wird sie korrekt angezeigt ( wie im Anhang zu sehen).

Die Navigationsleiste ist oben sichtbar und unten die Footerleiste auch.

So, wird die Seite nun im Internet Explorer geöffnet, werden die zwei leisten nicht angezeigt (ich vermute das die SWF in den vordergrund gerückt wird)

Doch warum?
wäre sehr dankbar um Hilfe.

Hier noch die Stylecss:
im DIV "Flashcontent" befindet sich die SWF.

PHP

/*


/* Begin Typography & Colors */
body {
	font-size: 8px; /* Resets 1em to 10px */
	font-family: appletext;
	background: #000000;
	color: #ffffff;
	text-align: center;
	margin: 0px auto;
	padding: 0;
	}


#page {
	background-color: #000000;
	text-align: left;
	width: absolut;
	margin: 0px auto;
	}


#header {
	width: 100%;
	background: #121215 no-repeat top left;
	top:0;
	border: none;
	overflow:hidden;
	position:fixed;
	-moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
	}


#headerimg 	{
	margin: 7px 9px 0;
	height: 0px;
	width: 0px;
	}


#headernavigation {
	position:relative;
	top: -17px;
	z-index: 2;
	margin-top: 0px;
	margin-left: 80px;
	text-align: left;
	}
	
#flashcontent {
	z-index: -1;
  	position: absolute;
  	width: 100%;
  	height: 100%;
  	top: 0;
  	left: 0;
	}
	
#contact {
	position: relative;
	font-size: 8px;
	padding-top: 300px;
	width:640px;
	text-align: center;
	margin-left: -320px;
	left: 50%;
	}
	
#content {
	position: relative;
	font-size: 1.2em;
	background-color: #121215;
	}


#motion {
	position:relative;      
	width:640px;
	text-align:left;
	margin-left: -320px;
	left: 50%;
	font-size: 1.2em;
	}




.date	{
	font-size: 14px;
	font-family: Arial;
	font-weight: lighter;
	text-transform: uppercase;
	text-align: left;
	margin-left: -100px;
	background: #000000;
	float: left;
	width: 50px;
	height: 75px;
	
}
.month	{
	display: block;
	color: #ffffff;
}
.day	{
	color: #e55b5b;
	display: block;
	margin-top: 3px;
	font-weight: lighter;
}
.year	{
	margin-top: 3px;
	display: block;
}


.widecolumn .entry p {
	font-size: 1.05em;
	}


.narrowcolumn .entry, .widecolumn .entry {
	line-height: 1.4em;
	}


.widecolumn {
	line-height: 1.6em;
	}


.narrowcolumn .postmetadata {
	text-align: center;
	}




#footer {
	background: #121215 no-repeat top;
	border: none;
	height: 30px;
	width: 100%;
	}


small {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 0.9em;
	line-height: 1.5em;
	}


h1, h2, h3 {
	font-family: appletext;
	}


h1 {
	font-size: 4em;
	text-align: center;
	}


#headerimg .description {
	font-size: 1.2em;
	text-align: center;
	}


h2 {
	font-size: 1.6em;
	display: none;
	}


h2.pagetitle {
	font-size: 1.6em;
	}


#sidebar h2 {
	font-family: appletext;
	font-size: 1.2em;
	}


h3 {
	font-size: 1.3em;
	}


h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {
	text-decoration: none;
	color: white;
	}


.entry p a:visited {
	color: #b85b5a;
	}


.sticky {
	background: #f7f7f7;
	padding: 0 10px 10px;
	}
.sticky h2 {
	padding-top: 10px;
	}


#sidebar {
	font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
	}


small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
	color: #777;
	}


code {
	font: 1.1em 'Courier New', Courier, Fixed;
	}


acronym, abbr, span.caps
{
	font-size: 0.9em;
	letter-spacing: .07em;
	}


a, h2 a:hover, h3 a:hover {
	color: #ffffff;
	text-decoration: none;
	}


a:hover {
	color: #e55b5b;
	text-decoration: none;
	}


/* End Typography & Colors */


/* Custom Font */
@font-face
{
    font-family: appletext;
    src: url('/wp-content/themes/13thunit/images/appletext.eot');
    src: local(my_font), url('/wp-content/themes/13thunit/images/appletext.ttf') format('opentype');
}


p
{
    font-family: my_font;
}
/* End Custom Font */




/* Begin Structure */
body {
	margin: 0px auto;
	padding: 0;
	}


#page {
	width: 100%;
	}


#header {
	z-index: 100;
	padding: 0;
	height: 45px;
	width: 100%;
	}


#headerimg {
	padding-left: 5px;
	padding-top: 0px;
	height: 30px;
	width: 100%;
	}


.narrowcolumn {
	padding: 50px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-top: 40px;
	position:relative;      
	width:640px;
	text-align:left;
	margin-left: -320px;
	left: 50%;
	}


.widecolumn {
	padding: 0;
	margin: 0;
	width: 640px;
	}
	
#posttext1 {
	font-family: appletext;
	color: #00fe47;
	font-size: 12px;
	}


.post {
	margin: 0 0 40px;
	text-align: justify;
	}


.post hr {
	display: block;
	float: left;
	}


.widecolumn .post {
	margin: 0;
	}


.narrowcolumn {
	padding-top: 10px;
	}
	
#datum {
	display: block;
	float: left;
}
	
.postmetadata {
	float: left;


}


.widecolumn {
	margin: 0;
	}


.widecolumn .smallattachment {
	text-align: center;
	float: left;
	width: 128px;
	margin: 0;
}


.widecolumn .attachment {
	text-align: center;
	margin: 5px 0px;
}


.postmetadata {
	display: block;
	float: left;
	clear: both;
}


.clear {
	clear: both;
}


#footer {
	z-index: 100;
	font-size: 8px; /* Resets 1em to 10px */
	font-family: appletext;
	bottom:0;
	margin:0 auto;
	overflow:hidden;
	position:fixed;
	width: 100%;
	clear: both;
	text-align: right;
	-moz-box-shadow: 0 5px 0 rgba(45, 0, 0, 0);
	-webkit-box-shadow: 0 5px 0 rgba(45, 0, 0, 0);
	box-shadow: 0 5px 0 rgba(45, 0, 0, 0);
	}


#footer p {
	font-size: 8px; /* Resets 1em to 10px */
	font-family: appletext;
	margin-top: 10px;
	margin-right: 10px;
	text-align: right;
	}
/* End Structure */






/*	Begin Headers */
h1 {
	padding-top: 0;
	margin: 0;
	}


h2 {
	margin: 30px 0 0;
	}


h2.pagetitle {
	margin-top: 0;
	text-align: center;
}


#sidebar h2 {
	margin: 5px 0 0;
	padding: 0;
	}


h3 {
	padding: 0;
	margin: 30px 0 0;
	}


h3.comments {
	padding: 0;
	margin: 40px auto 20px ;
	}
/* End Headers */






/* Begin Images */
p img {
	padding: 0;
	width: 660px;
	height: auto;
	}


/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */


img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}


img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}


img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}


.alignright {
	float: right;
	}


.alignleft {
	float: left;
	}
/* End Images */






/* Begin Lists


	Special stylized non-IE bullets
	Do not work in Internet Explorer, which merely default to normal bullets. */


html>body .entry ul {
	margin: 0px;
	padding: 0py;
	list-style: none;
	padding-left: 10px;
	text-indent: -10px;
	}


html>body .entry li {
	margin: 0px;
	}


.entry ul li:before, #sidebar ul ul li:before {
	content: "\00BB \0020";
	}


.entry ol {
	padding: 0px;
	margin: 0;
	}


.entry ol li {
	margin: 0;
	padding: 0;
	}


.postmetadata ul, .postmetadata li {
	float: left;
	list-style-type: none;
	list-style-image: none;
	}


#sidebar ul, #sidebar ul ol {
	margin: 0;
	padding: 0;
	}


#sidebar ul li {
	list-style-type: none;
	list-style-image: none;
	margin-bottom: 15px;
	}


#sidebar ul p, #sidebar ul select {
	margin: 5px 0 8px;
	}


#sidebar ul ul, #sidebar ul ol {
	margin: 5px 0 0 10px;
	}


#sidebar ul ul ul, #sidebar ul ol {
	margin: 0 0 0 10px;
	}


ol li, #sidebar ul ol li {
	list-style: decimal outside;
	}


#sidebar ul ul li, #sidebar ul ol li {
	margin: 3px 0 0;
	padding: 0;
	}
/* End Entry Lists */






/* Begin Form Elements */
#searchform {
	margin: 10px auto;
	padding: 5px 3px;
	text-align: center;
	}


#sidebar #searchform #s {
	width: 108px;
	padding: 2px;
	}


#sidebar #searchsubmit {
	padding: 1px;
	}


.entry form { /* This is mainly for password protected posts, makes them look better. */
	text-align:center;
	}


select {
	width: 130px;
	}


#commentform input {
	width: 170px;
	padding: 2px;
	margin: 5px 5px 1px 0;
	}


#commentform {
	margin: 5px 10px 0 0;
	}
#commentform textarea {
	width: 100%;
	padding: 2px;
	}
#respond:after {
		content: "."; 
	    display: block; 
	    height: 0; 
	    clear: both; 
	    visibility: hidden;
	}
#commentform #submit {
	margin: 0 0 5px auto;
	float: right;
	}
/* End Form Elements */


/* Begin Various Tags & Classes */
acronym, abbr, span.caps {
	cursor: help;
	}


acronym, abbr {
	border-bottom: 1px dashed #999;
	}


blockquote {
	margin: 15px 30px 0 10px;
	padding-left: 20px;
	border-left: 5px solid #ddd;
	}


blockquote cite {
	margin: 5px 0 0;
	display: block;
	}


.center {
	text-align: center;
	}


.hidden {
	display: none;
	}
	
.screen-reader-text {
     position: absolute;
     left: -1000em;
}


hr {
	display: none;
	}


a img {
	border: none;
	}


.navigation {
	display: block;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 60px;
	}

Alles anzeigen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Tutrix

Liegt vermutlich daran das Flash als Plugin geöffnet wird und deshalb beim IE im Vordergrund abgespielt wird.

Kannst ja mal das "flashcontent" div, mit "margin-top" in Höhe der Navigationsleiste und margin-bottom in Höhe der Footerleiste versehen.

Linopacino

okey hab ich mal gemacht..

kann jemand der Windows hat dass mal bitte checken für mich.. habe keinen windows rechner hier.. :S wäre dankbar

Tutrix

also die Navi ist jetzt da, hat aber einen kleinen Fehler, siehe Bild
der Footer fehlt noch

Linopacino

hmm wieso den dass?
also ich habe beim CSS genau das eingetragen:

PHP

#flashcontent {
	z-index: -1;
  	position: absolute;
  	margin-top: 45px;
  	margin-bottom: 30px;
  	width: 100%;
  	height: 100%;
  	top: 0;
  	left: 0;
	}

und in der Header.php habe ich folgendes:

PHP

<div id="header" role="banner">
	<div id="headerimg">
		<a href=""><img src="/images/13thunit-WHITEKopie.png"></a>
	</div>
	<div id="headernavigation">
	<a href="/still/">STILL</a> &nbsp;&nbsp;
	<a href="/motion/">MOTION</a> &nbsp;&nbsp;
	<a href="/contact/">CONTACT</a> &nbsp;&nbsp;
	<a href="">TWITTER</a>
	</div>
</div>

Alles anzeigen

ist da was falsch dass da so komische zeichen sind?
und dass soll ja eigentlich weiss sein?!

Tutrix

nun die Zeichen sind die erzwungenen Leerzeichen (   ), warum die im IE komisch dargestellt werden, weiß ich auch gerade nicht, bin eigentlich kein IE Nutzer
Der Footer fehlt übrigens nur auf der Startseite, unter Still ist alles da.

was sollte weiß sein?

Linopacino

die links in der navileiste sollten weiss sein.. bei dir im internet explorer sind sie blau/grünlich..

gibst noch ne andere möglichkeit für gezwungene leerzeichen?

th67ci

vielleicht liegt es ja an deinen Fehlern. siehe Link

http://validator.w3.org/check?uri=http…Validator%2F1.1

jörg

Linopacino

der w3c check zeigt mir nur links vom javascript.

da hab ich aber auch noch ne frage zu.
Woher weiss ich in welcher PHP und welcher Line der Fehler ist den mir W3C ausspuckt?

Gibt es immernoch keine Lösung für die erzwungenen Leerzeichen zwischen den Links oben??

Tutrix

Zitat von Linopacino

internet explorer sind sie blau/grünlich..

das ist bei mir auch im Firefox so, nur in Opera ist die Schrift weiß

Zitat von Linopacino

gibst noch ne andere möglichkeit für gezwungene leerzeichen?

entferne mal die Leerzeichen und füge stattdessen bei

Code

#headernavigation {
margin-left:80px;
margin-top:0;
position:relative;
text-align:left;
top:-17px;
z-index:2;




}

Alles anzeigen

dies

Code

word-spacing: 10px;

ein

Linopacino

oke habs mal geändert auf "word-spacing: 10px;"

jetzt ist aber das Problem dass aus irgendeinem Grund ein scrollbalken erscheint! den ich eingentlich nicht wolle..

Tutrix

wenn du den Scrollbalken rechts meinst, mach mal die Höhe des "flashcontent" statt 100% nur 92 oder 91%

Linopacino

okey vielen dank.. passt nun :)

Tutrix

Nicht ganz, unter Windows verschwindet der Scrollbalken erst ab 92%(IE, Firefox und Opera), im Moment hast du ja 96% eingestellt.

Zur grünen Schrift:
Das liegt an deiner "Appletext-Schriftart" die du über deinen Server laden lässt.
Bei Pixelgröße 8px scheint diese unter Windows, etwas mit dem Hintergrund zu verschwimmen, was dann diesen Farbschimmer bewirkt.
Ab 9px ist es weiß ;)

Linopacino

okey, gibt es eine möglichkeit dass er bei Windows 92% grösser nimmt und bei Firefox und Safari 96% ? geht das?

danke für deine Antwort :)

Michi91

also mit php lassen sich browser und bs bestimmen =)

Linopacino

cool könntest du mir erklären wie das geht :S

am besten schon mit bisschen beispiel code :)

Tutrix

Denke mal das dies nicht der richtige Weg ist, es gibt ja nicht nur 2 Betriebssysteme.

Die Startseite ist ja extra definiert, füge da mal bei "body" style="overflow:hidden;" ein.

also

Code

<body style="overflow:hidden;">

dann müsste der Balken auf der Startseite auch weg sein

also "nicht" in der style.css, bei body eintragen

Linopacino

okey habs mal eingetragen, könnte das noch jemand für mich testen :S

Tutrix

jo, is weg :)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Flash im Hintergrund (Internetexplorer Darstellung)

Jetzt mitmachen!