✔ Im Safari Browser nur Hintergrund sichtbar

marcelmaurice · 1. Mai 2007

Hallo zusammen

Habe hier ein kleines Problem mit dem Safari Browser. Die Webseite zeigt im Browser nur den Hintergrund an, der Rest ist einfach nicht sichtbar? Alle Anderen (IE, Firefox...) klappen.

Kann mir einer Sagen an was das wohl liegen könnte?

Hier die Html Datei:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">@import url(css/style.css) all;</style>
<!--[if lt IE 7]>
    <style type="text/css">@import url(css/ie.css);</style>
 <![endif]-->
 <!--[if IE 7]>
  	<style type="text/css">@import url(css/style.css);</style>
<![endif]-->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>..Individua.ch, the individual way of information, counseling and care.. </title>



<link rel="SHORTCUT ICON" href="images/butterfly.ico" type="image/x-icon" />
<script src="/script/listCollapse.js"></script>
<script type="text/javascript" language="javascript1.2"><!--
window.onload = function () { 
	compactMenu('menu',true,'Angebote'); 
	expandCollapseAll ('menu' ,false);
}

</script>
</head>
<body id="home">
<div id="top_logo"></div>
<div id="content">
  <div id="left">
	<blockquote>
	<div>
	<p>Mein Ziel ist es die Kurse nach ihren individuellen Bed&uuml;rfnissen und W&uuml;nschen auszurichten.</p>
	</div>
	</blockquote>
    <span class="zitat">Andrea Glauser</span>
	<br />
	<div id="addressbar"> INDIVIDUA<br />
	  <br />
	  8424 Embrach<br />
	  Tel. 076 504 12 24 <br />
	  <a href="mailto:contact@individua.ch">contact@individua.ch</a></div>
  </div>
  <div id="right">
	<div id="navcontainer">
		<ul id="menu">
			<li><a href="#" onfocus="this.blur()" class="a1">Home</a></li>
			<li><a href="#" onfocus="this.blur()" class="a2"></a>
				<ul>
				<li><a href="/angebote/beckenboden" onfocus="this.blur()" class="b2">Beckenboden Training </a></li>
				<li><a href="/angebote/geburtsbegleitung" onfocus="this.blur()" class="b4">Geburtsbegleitung</a></li>
				<li><a href="/angebote/babymassage" onfocus="this.blur()" class="b5">Babymassage</a></li>
				</ul>
			</li>
			<li><a href="/about" onfocus="this.blur()" class="a3">Zu meiner Person</a></li>
			<li><a href="/preise" onfocus="this.blur()" class="a4">Kursdaten &amp; Preise </a></li>
			<li><a href="/kontakt" onfocus="this.blur()" class="a5">Kontakt</a></li>
		</ul>
	</div>			
</div>
</div>
<div id="footer">
<p>copyright © 2007 Individua | AGB </p>
</div>

</body>
</html>

und hier die CSS:

Code:

* {
	margin: 0px;
	padding: 0px;
}
html {
	font-family:Arial, Helvetica, "Myriad Pro", Tahoma, sans-serif;
	color: #333333;
	height: 100%;
	font-size: 12px;
}
body {
	background-color:#d1b0cc;
	text-align: center;
	background: #d1b0cc url(../images/bg_large.gif) no-repeat 50% 0;
	margin: 70px 0 0 0;	
}
#home a.a1, #angebote a.a2, #person a.a3, #preise a.a4, #kontakt a.a5 {
	color: #999966;	
}
#beckenboden a.b2, #information a.b1, #geburtsvorbereitung a.b3, #geburtsbegleitung a.b4, #rueckbildung a.b6, #babymassage a.b5 {
	color: #999966;	
}

h1 {
	font-size: 1.5em;
	padding: 5px 0 10px 15px;
	font-weight: lighter;
	color: #7E7E7E;
}
h2 {
	font-style: italic;
	font-size: 1.2em;
	font-weight: lighter;
}
h3 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:1.3em;
	font-style:italic;
	color: #5A5A5A;
}
a {
	text-decoration:none;
}
p {
	font-size:1em;
	line-height: 1.2;
}
blockquote {
	background: transparent url(../images/quoleft.png) left top no-repeat;
	color: #B2B28E;
	font-size: 1.1em;
	margin: 75px 25px;
}
blockquote div {
  padding: 10px 20px;
  background: transparent url(../images/quoright.png) right bottom no-repeat;
}
#top_logo {
	background-image: url(../images/toplogo.png);
	background-repeat: no-repeat;
	width: 661px;
	height: 132px;
	margin: auto;
}
#content {
	background-image: url(../images/content_bg.png);
	background-repeat: repeat-y;
	margin: auto;
	width: 661px;
	text-align: left;
	overflow: hidden;
}

#left {
	width: 425px;
	float: left;
	padding: 0 10px 0 0;
	text-align: left;
	border-left: 10px solid #633808;
	margin: 20px 0 20px 35px;
}
#home #left, #person #left, #kontakt #left, #preise #left {
	border-left: 10px solid #fff;
}

#beckenboden #left {
	border-left: 10px solid #82B3E9;
}
#babymassage #left {
	border-left: 10px solid #840620;
}
#geburtsbegleitung #left {
	border-left-color: #815120;
	border-left: 10px solid;
}

#left p {
	font-size:1em;
	padding:0 15px 0 15px;
}
#left img {
	float:right;
	padding: 10px 0 0 0;
}
#left ul {
	list-style:outside;
	margin: 5px 0 10px 0px;
}
#left li {
	list-style-type: none;
	list-style-image:url(../images/arrow_dbl.gif) ;
	margin-left: 30px;
	padding-top:5px ;
}

#person #left img {
	display: block;
	vertical-align: bottom;
	
}

.text {
	width: 330px;
	clear: left;
}
.cursiv {
	font-style: italic;
	font-size: 1.4em;	
}

.doppelpunkt {
	line-height: 1.8;
}
#right {
	width: 179px;
	float: right;
	min-height: 320px;
}

#right p {
	font-size: 1em;
	padding: 0 0 0 25px;
	font-weight: lighter;
	line-height: 1.3;
}

#navcontainer {
	margin: 20px 16px 0 13px;
	height: 150px;
}
#navcontainer ul {
	padding: 3px 0 0 5px;
}
#navcontainer ul li {
	list-style:none;
	padding: 5px 0 0 0;
}
#navcontainer ul ul li {
	padding: 2px 0 0 0;
	list-style: outside;
	list-style-image: url(../images/arrow_dbl.gif);
	margin: 0 0 0 8px;
}
#navcontainer a {
	text-decoration: none;
	color: #1C1C1C;
}
#navcontainer a:hover {
	color: #333333;
	background-color: #ad88a7;
}
#navcontainer ul ul li a {
	color:#666666;
}
#navcontainer ul ul li a:hover {
	color: #333333;
}
#addressbar {
	position: relative;
	bottom: 0px;
	left: 440px;
	border-top: 1px solid #999;
	width: 120px;
	margin: 0 25px 0 10px;
	padding: 20px 10px 0 5px;
}
#addressbar a {
	color: #999999;
}
.addressbar {
	color: #999999;
}
#addressbar a:hover {
	color: #ad88a7;
}

#footer {
	background-image: url(../images/footer.png);
	background-repeat: no-repeat;
	width: 661px;
	height: 20px;
	margin: auto;
}
#footer p {
	font-size:0.9em;
	color:#FFFFFF;
	text-align: right;
	padding: 12px 25px 0 0;
}
.sig01 {
	text-align:right;
	margin:0 0px 0 0;
	color: #666666;
}
.zitat {
	color: #C4C4A6;
	font-size: 0.9em;
	float: right;
	margin: 0 30px 0 0;
}
#menu {
}
.bild {
	display: block;
	width: 86px;
	float: right;
}

Danke vielmals im voraus

Freundliche Grüsse

Marcel Maurice Naef

Benny_Ben_Ben · 1. Mai 2007

Das Problem ist, dass jeder Web-Browser CSS und Java-Script anders implementiert.
Im Notfall müsste man für jeden Browser eine eigene Version der Webseite erstellen.

Hoffe ich konnte helfen.

Maik · 1. Mai 2007

Hi,

vielleicht hilft es weiter, wenn du im zweiten Script den öffnenden HTML-Kommentar <!--- entfernst, zu dem das Gegenstück fehlt?

Code:

<script type="text/javascript" language="javascript1.2"><!--
window.onload = function () { 
	compactMenu('menu',true,'Angebote'); 
	expandCollapseAll ('menu' ,false);
}

</script>

In diesem Zusammenhang solltest du auch den Abschnitt Unterschied: Inhalt von Script- und Style-Bereichen für XHTML-Dokumente studieren.

marcelmaurice · 1. Mai 2007

Man Danke, das war es!

Viel dank an all die schnellen Helfer!

Freundliche Grüsse

✔ Im Safari Browser nur Hintergrund sichtbar

marcelmaurice

Grünschnabel

Benny_Ben_Ben

Mitglied

Maik

marcelmaurice

Grünschnabel

Neue Beiträge