Forenindex » Web allgemein » HTML und CSS / Stylesheets » Im Firefox sehr gut, im Opera ok und im IE s....e: Problem Positionierung?!

Im Firefox sehr gut, im Opera ok und im IE s....e: Problem Positionierung?!

flyfisherman
Beiträge gesamt: 42
2. Jun 2006, 00:33
Bewertung:

gelesen: 1439

Beitrag als Lesezeichen
Hallo miteinander

Ich habe folgendes Problem: meine mit xhtml und css erstellte Seite ist im Firefox gut, im Opera erste Probleme und im IE 6.0 nur Probleme, zb Menuleiste oben im IE fehlt gelbes Band und schwarze Linie stimmmt nicht mehr, die beiden Bilder sind im IE verschwunden und verdecken den Text, es muss etwas mit meinen Positionierungen zu tun haben, es sollte so aussehen wie im Firefox.

Nachstehend der code:

Code 
 
<?xml version="1.0" encoding="UTF-8"?>  
<!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"> 
<head> 
<title>Blumen Design - Nicht Allt&auml;gliches f&uuml;r den Alltag.</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="robots" content="index" /> 
<meta name="robots" content="follows" /> 
<meta name="language" content="deutsch" /> 
<meta name="Keywords" content="Blumen Design, Paula Jost, Fleurop, Allflora, Binningen, Basel, Basel und Umgebung, Bottmingen, Therwil, Biel-Benken, Oberwil, Allschwil, Sch&ouml;nenbuch, Leimental, Blumen, Schnittblumen, Pflanzen, Floristik, Blumenstrauss, Rosen, Rosenstrauss, Str&auml;usse, Gesteck, Hauslieferdienst, Zustelldienst, Lieferung, Lieferdienst, Events, Hochzeit, Liebeserkl&auml;rung, Brautstrauss, Hochzeitsauto, Kirchendekoration, Festtafel, Haarschmuck, Dekoration, Dekorationsobjekt, Tischdekoration, Trauerkranz, Trauerkarte, Trauerspenden, Trauer, Gratulation, Geburtstag, Feier, Weihnachten, Ostern, Valentinstag, Muttertag, Advent, Geschenk, Geschenkideen, Accessoires, Jubil&auml;um, Firmenkunden, Sympathietr&auml;ger, Arrangements, Visitenkarte, Abonnement, B&uuml;robegr&uuml;nung, Sujets, Blatt, Bl&uuml;te, nat&uuml;rlich, Gestaltungsmittel, saisonal, &Ouml;ffnungszeiten, Bouquet" /> 
<meta name="description" content="Blumen Design ist eine kreative Blumenwerkstatt, die es versteht natürliche Werkstoffe mit tollen Accessoires zu tollen Sträussen, Bouquets oder Arrangements zu vermählen. Freude und fachliche Kompetenz zeichnet das gesamte Team aus." /> 
<meta name="distribution" content="global" /> 
<meta name="robots" content="all" /> 
<meta name="revisit-after" content="10 days" /> 
<link rel="stylesheet" type="text/css" href="bd.css" /> 
 
<script language='javascript' src='http://127.0.0.1:1032/js.cgi?pca&r=27529' type="[XHTML 1.0 transitional]"></script> 
</head> 
 
<body> 
 
<!-- Container oder Boxdefinition --> 
		<div id="container"> 
 
<!--  Titelzeile mit Logo  --> 
		<div id="title"> <a href="index2.html"><img src="Logo_Banner_klein2.gif" alt="Logo Blumen Design" border="0" /></a></div> 
   
<!--  Men&uuml;leiste  --> 
		<div id="menu"> 	<a class="menu" href="#">Portrait</a>&nbsp;&nbsp;|&nbsp;&nbsp; 
  						 	<a class="menu" href="#">Inspirationen</a>&nbsp;&nbsp;|&nbsp;&nbsp;  
							<a class="menu" href="#">Neue Werke</a>&nbsp;&nbsp;|&nbsp;&nbsp; 
							<a class="menu" href="#">Angebot</a>&nbsp;&nbsp;|&nbsp;&nbsp; 
							<a class="menu" href="#">Referenzen</a>&nbsp;&nbsp;|&nbsp;&nbsp; 
							<a class="menu" href="#">Kontakt</a>&nbsp;&nbsp;|&nbsp;&nbsp;  
							<a class="menu"	href="#">Links</a>	</div> 
  
<!-- Inhalt --> 
		<div id="content"> 
   
<!-- Es folgt ein script zur Ausgabe des aktuellen Datums--> 
  		<p class="datum"> 
  			 
		<script language="JavaScript1.2" type="text/javascript"> 
		function Datum() { 
		var now = new Date(); 
		var TageLang = new Array ("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"); 
		var MonateLang = new Array ("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", 		"November", "Dezember"); 
		var date = now.getDate(); 
		function VierZeichen(number) { 
		return (number < 1000) ? number + 1900 : number; 
		} 
		heute = TageLang[now.getDay()]+ ", " + date + ". " + MonateLang[now.getMonth()] + " " +(VierZeichen(now.getYear())) ; 
		document.write("" +heute); 
		} 
		Datum(); 
		</script>  
		  </p> 
		 
		<p>&nbsp; </p> 
		 				 <h1>Blumen und mehr... </h1> 
		<p>&nbsp; </p>			   
				   
  		<p class="kurztext">Hier erleben Sie in kurzer Zeit die ganze Pracht der Natur...</p> 
		 
		<p class="kurztext">Unsere Homepage wird in den n&auml;chsten Wochen laufend ausgebaut. Einzelne Links funktioneren noch nicht, doch kommen Sie in den n&auml;chsten Wochen zur&uuml;ck und entdecken Sie Neues... </p> 
		 
		<div id="media"><img src="HauptbildHome.jpg" width="250" height="190" alt="Rosen" /></div> 
		 
		<div id="media2"><img src="Tulpenstrauss.jpg" width="250" height="190" alt="Tulpenstrauss" /> </div> 
		 
      	</div> 
		 
					   
<!-- Subcontent rechts für Box und Submenu --> 
		<div id="subcontent"> 
	   
	  	<div class="box"><strong>Herzlich willkommen bei Blumen Design!</strong> <br />  
	  	  <br />Wir sind ein junges und aktives Team, das sich jeden Tag darauf freut, f&uuml;r Sie t&auml;tig zu werden... <br />In unserem neuen Internet-Auftritt finden Sie einen kurzen Abriss unseres Schaffens, ein Besuch bei uns im Laden ist aber noch spannender! Bis bald...</div> 
	   
	    <h2>Untermenu</h2> 
	   
	  	<ul class="untermenublock"> 
		 
		<li><a href="#">Menu option 1</a></li> 
  		<li><a href="#">Menu option 2</a> 
    	<ul> 
	  		<li><a href="#">Submenu 1</a></li> 
      		<li><a href="#">Submenu 2</a></li> 
		</ul></li> 
   
  		<li><a href="#">Menu option 3</a></li> 
  		<li><a href="#">Menu option 4</a></li> 
		</ul> 
	   
	  <p>&nbsp;  </p> 
	  	   
	  </div> 
	   
<!-- Footer --> 
	  <div id="footer"> 
		<p align="center">Copyright &copy; 2006 Blumen Design</p> 
		<div align="right"><span class="impressum "><a href="impressum.html">Impressum </a>&nbsp;&nbsp;|&nbsp;&nbsp; <a href="www.flyfisherman.ch">created by </a> </span></div> 
		</div> 
</div>		 
 
<script language='javascript' type="[XHTML 1.0 transitional]">postamble();</script> 
 
</body> 
</html>


/* CSS Document für Blumen Design Relaunch Mai 2006 */

/* Body und Tag Infos */
body { background-color: #CCCC99;
color: #996600;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
/* Hack für Zentrierung wegen Int Explorer */
text-align: center;
}

h1 { font-size:18px;
color:#996600;
margin:0px; }

h2 { font-size:14px;
color:#996600; }

h3 { font-size:12px;
color:#996600; }

p { margin-top:0px;
color: #996600;
font-size: 10px; }

a:link, a:visited, a:active, a:hover
{
text-decoration:none;
font-weight:bold;
color:#996600;
font-size:9px;
}
a:active, a:hover
{
color:#FF3333;
font-size: 9px;
}

/* Container oder Boxdefinition */
#container {
background-color: #FFFFCC;
width: 760px;
margin:0px auto;
padding: 0px 0;
text-align: left;
}

/* Die Hyperlinks im Menü */
a.menu:link, a.menu:visited
{
color:#996600;
text-decoration:none;
}
a.menu:active, a.menu:hover
{
color:#FF3333;
}

/* Die Titelzeile mit Logo */
#title {
height:80px;
padding:5px;
text-align:center;
background-color:#996600;
}

/* Das Menü */
#menu {
border-top:1px solid #000000;
color:#996600;
background-color:#FFCC33;
text-align:center;
padding:10px 0px;
}

/* Der Inhalt im Content */
#content {
border-top:1px solid #000000;
background-color:#FFFFCC;
width: 500px;
float: left;
padding:5px 30px 10px 10px;
color:#000000;
position: absolute;
}

p.datum {
color: #996600;
font-size: 10px;
}

p.kurztext {
padding: 0 0 0 25px;
}

/* Media-Bereich für Fotos */
#media {
filter: alpha(opacity=60);
opacity: 0.6;
position: absolute;
top: 200px;
left: 36px;
background-color: #FFFFCC;
width: 250px;
height: 190px;
float: left;
border: 1px solid #996600;
}

#media2 {
position: absolute;
bottom: -325px;
right: 50px;
background-color: #FFFFCC;
width: 250px;
height: 190px;
float: left;
border: 1px solid #996600;
}


/* Subcontent für Box und Untermenu */
#subcontent {
float: right;
width: 200px;
border-top:1px solid #000000;
background-color: #FFFFCC;
padding: 40px 10px 10px 10px;
line-height:1.4em;
}

.box {
margin: 20px 10px 20px 10px;
padding: 10px;
border: 1px solid #996600;
background-color: #FFFFCC;
color: #996600;
line-height: 1.5em;
}

#subcontent h2{
padding: 10px;
display:block;
margin:0 0 15px 0;
font-size:1.6em;
font-weight:normal;
text-align:left;
letter-spacing:-1px;
color:#996600;
background-color:inherit;
}

#subcontent p{margin:0 0 16px 0; font-size:0.9em;}

/**************** Stile für Untermenublock ****************/

.untermenublock{margin:0 0 20px 8px; font-size:0.9em;}
.untermenublock li{list-style:none; display:block; padding:2px; margin-bottom:2px;}
.untermenublock li a{font-weight:bold; text-decoration:none;}
.untermenublock li a:hover{text-decoration:none;}
.untermenublock li ul{margin:3px 0 3px 15px; font-size:1em; font-weight:normal;}
.untermenublock li ul li{margin-bottom:0;}
.untermenublock li ul a{font-weight:normal;}


/* Footer */
#footer {
clear: both;
background-color: #ffcc33;
width: 760px;
border-top: 1px solid #000000;
color: #996600;
font-size: 70%;
}

#footer p {
margin: 0em 0em 0.5em 0.5em;
padding: 2px;
}

#footer impressum {
float: right;
font-size: 9px;
text-decoration: none;
margin-top: 0em;
}

Wer kann mir helfen?
Danke und Gruss
flyfisherman
flyfisherman
<url>http://www.flyfisherman.ch</url>

Im Firefox sehr gut, im Opera ok und im IE s....e: Problem Positionierung?!

SabineP
Beiträge gesamt: 7586
2. Jun 2006, 09:36
Bewertung:

gelesen: 1427

Beitrag als Lesezeichen
Hallo flyfisherman,

bei den beiden Bildern fehlt der z-index:

http://de.selfhtml.org/...onierung.htm#z_index

Hier gibts gleich noch ein Beispiel zur Positionierung von Fotos:

http://de.selfhtml.org/.../anzeige/z_index.htm

Scripte vom Typ [XHTML 1.0 transitional] gibt es übrigens nicht:

<script language='javascript' type="[XHTML 1.0 transitional]">postamble();</script>

richtig wäre:

<script type="text/javascript">postamble();</script>

Gruß Sabine

Im Firefox sehr gut, im Opera ok und im IE s....e: Problem Positionierung?!

flyfisherman
Beiträge gesamt: 42
2. Jun 2006, 20:45
Bewertung:

gelesen: 1414

Beitrag als Lesezeichen
Hallo Sabine

Besten Dank für den Tip, habe z-index: 1 und z-index: 2 ausprobiert; praktisch keine Veränderung?

Was könnte das sein?

Besten Dank für Eure Hilfe.
Gruss
flyfisherman
<url>http://www.flyfisherman.ch</url>

Im Firefox sehr gut, im Opera ok und im IE s....e: Problem Positionierung?!

SabineP
Beiträge gesamt: 7586
2. Jun 2006, 21:17
Bewertung:

gelesen: 1410

Beitrag als Lesezeichen
Hallo flyfisherman,

ich hatte gehofft, daß Du Dir den Link mit den Beispielen ansiehst, den ich oben schon einmal gepostet hatte:
http://de.selfhtml.org/.../anzeige/z_index.htm

Positioniere die Bilder mit top und left,
also ausgehend von der oberen linken Ecke und schon klappt es in IE und Firefox.

#media2 {
position: absolute;
top: 250px;
left:250px;
background-color: #FFFFCC;
width: 250px;
height: 190px;
border: 1px solid #996600;
z-index:2;
}
Gruß Sabine

Im Firefox sehr gut, im Opera ok und im IE s....e: Problem Positionierung?!

flyfisherman
Beiträge gesamt: 42
2. Jun 2006, 22:09
Bewertung:

gelesen: 1408

Beitrag als Lesezeichen
Hallo Sabine

Besten Dank, nun stimmt es im Opera 8.5, im FF 1.5 sowieso, aber im IE 6 habe ich keine Bilder, der Text ist ebenso verschwunden und in der Menuleiste fehlt der gelbe Balken und das Menu ist nicht zentriert..

Sorry, wenn ich Dich belästige damit, aber es ist immer der IE, der einem fast zum Wahnsinn bringt. Was mache ich falsch?

Gruss
flyfisherman
<url>http://www.flyfisherman.ch</url>

Im Firefox sehr gut, im Opera ok und im IE s....e: Problem Positionierung?!

SabineP
Beiträge gesamt: 7586
2. Jun 2006, 22:38
Bewertung:

gelesen: 1405

Beitrag als Lesezeichen
>> aber im IE 6 habe ich keine Bilder, der Text ist ebenso verschwunden

Das ist ja eigenartig. Gibt es eine URL dazu?
Ich kann nur mit IE4 testen, der zeigt die Position der Bilder richtig an und der Text ist auch da,
IE6 habe ich nicht.

Gruß Sabine

Im Firefox sehr gut, im Opera ok und im IE s....e: Problem Positionierung?!

flyfisherman
Beiträge gesamt: 42
2. Jun 2006, 22:50
Bewertung:

gelesen: 1403

Beitrag als Lesezeichen
Hallo Sabine

Nein keine url, weil es ein Relaunch der Site ist und noch das alte Layout mit Tabellen im Netz ist. Ich schaue mir die verschiedenen Resultate jeweils aus der Dreamweaver 8 Vorschau aus in den versch. Browsern an. Könnte hier das Problem liegen?
Gruss
flyfisherman
<url>http://www.flyfisherman.ch</url>