Firefox und Internet Explorer sind interpretationsunfähig

lupus_bhg

lupus_bhg

Selbsttätiger Entlüfter
Registriert
30. April 2005
Reaktionspunkte
26.447
Ahoi,
und zwar bin ich momentan dabei, meine Homepage neu zu machen. Ich hab soweit das Grundgerüst fertig, so wie ich's mir vorgestellt hab' (einige Schönheitsfehler sind aber noch vorhanden). Ich hab' das Ganze mit dem Dreamweaver programmiert und immer eher auf den Quelltext vertraut als auf die grafische Oberfläche und kontrolliert hab' ich immer mit Opera.
Zur besseren Vorstellung erstmal der Link.

So, das Ganze ist aufgebaut aus 3 Rollover-Grafiken oben, einem Inlineframe mit einer Grafik in der Mitte (da soll auch der Inhalt der Unterseiten erscheinen) und wiederum 2 Rollover Grafiken unten (falls das zur Lösung beiträgt). Unter Opera wird die Seite immer korrekt dargestellt, aber als ich's mit dem IE probiert hab', waren die Grafiken verschoben. Das Gleiche ist auch unter Firefox der Fall, hab' da mal einige Leute gefragt, die das Teil nutzen...

Hat einer 'nen Plan, wie das zu lösen sein könnte? Es kann ja nicht sein, dass allein Opera fähig ist, die Seite richtig zu interpretieren... Weil ich jetzt ja erstmal nicht weitermachen brauch, denn die Mehrheit hat ja eh FF oder IE...

Besten Dank schonmal :)
 
iframe: hier hast du den nachteil das die suchmaschine das nicht so gut indizieren kann wie eine seite ohne frame. zudem zeigen manche browser ein scroll-bar obwohl sie es bei einen iframe nicht müssten.

du sagtest, du hättest die seite in dreamweaver programmiert, - sagen wir mal du hast dreamweaver benutzt um die fertigen code-stücke, welche dieser anbietet, zu nutzen. die funktionen MM_swapImage und MM_findObj etc... ist ein riesen javascript-gewurstel. dabei wäre die funktion ein bild auszutauschen so einfach:

statt diesem gewurstel im header:

PHP: 
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

direkt beim bild das benutzen:

<img src="/pfad/original.gif" onmouseout="this.src='/pfad/original.gif';" onmouseover="this.src='/pfad/original_over.gif';" />

die funktion MM_preloadImages im body tag könntest du dir auch sparen.

versuche mal die iframe-lösungen wegzumachen. du kannst die bilder dort auch ohne iframe einbinden.
 
Ich kann deine Frage insofern beantworten, dass dein Inlineframe einfach zu klein ist. Mein FF skaliert deshalb die dort enthaltene Grafik kleiner.

Abgesehen davon hat Thomas völlig recht und Inline Frames für den Hauptseiteninhalt finde ich völlig daneben, da mann als Benutzer dessen Größe nicht ändern kann (außer über "open Frame in own Tab"). Aber das ist vielleicht nur meine Meinung.

Grüße,
Daniel
 
@thomas: das is auch nur 'ne kleine private seite und es sind nur 5 links...
@wookie: was der dreamweaver da manchmal so alles reinhaut, weiß ich auch nicht. ich werd mir wohl auch 'ne andere lösung suchen. aber an sich gefällt mir die sache so ganz gut, zumal opera halt in der lage ist, alles richtig zu interpretieren ;)
@fubbes: grafik, spalte und iframe sind alle gleich groß, nämlich 800x440.

danke schonmal für die hilfe :)
 
lupus_bhg schrieb:
... zumal opera halt in der lage ist, alles richtig zu interpretieren ...
Zum Vergrößern anklicken....

ich möchte hier keine grundsatzdiskusion über die vor und nachteile der bekannter browser lostreten.

kann aber aus vielen jahren berufserfahrung sagen, das deine bedenken das andere browser html nicht richtig interpretieren können, falsch sind. - "100% richtig interpretieren" kann übrigens kein browser, da der vorgang des interpretierens z.B. von CSS mit kompromissen im eigentlichen html und css standard einhergeht.
 
Die endgültige Darstellung ist Sache des Clients. HTML ist schließlich eine Seitenbeschreibungssprache und kein Werkzeug, um irgendwas pixelgenau irgendwohin zu platzieren. Pixelgenau ist für textbasierte Browser (w3m, lynx) sowieso Unsinn.

E.
 
Wer hat schon Opera?
Ich Liebe den FF und die diversen PlugIns die einem das Leben leichter machen.
Vor ein paar Tagen war ich nochmal Notgedrungen mit dem IE unterwegs ... grusel ...
Wenn ich schon auf der Seite lese ... optimiert für ... :kotz:
 
Schildbürger schrieb:
Wer hat schon Opera?
Zum Vergrößern anklicken....
is das nich vollkommen egal?
ich hab's die sache ja auch nicht für opera programmiert, da die seite dann nur einen kleinen kreis richtig erreichen würde (und ich auch gar nicht wüsste, wie ich's auf genau einen browser optimieren könnte). ich find's nur trotzdem komisch, dass nur opera das ganze ordentlich hinbekommt. für mich sowieso der beste browser.
da brauch ich nich erst etliche plugins, bis alles passt (bestes beispiel sind die mausgesten). aber darum soll's doch überhaupt nicht gehen. es soll auf den gängigsten browsern fehlerfrei dargestellt werden, unabhängig davon, wer nun was gut findet ;)
ich hoffe jetzt auf weitere sinnvolle beiträge ohne auf die browserfrage einzugehen :)
 
Wirf dein bisheriges einfach über Bord und mach dein Design neu mit Div's. Tabellen nutzt heutzutage eigentlich niemand mehr für die Seitengliederung. Frames sind sowieso böse, werden überall anders dargestellt und sind nicht barrierefrei.

Einfach alles in divs packen, die kannst du auch pixelgenau platzieren, wenn es notwendig ist.

Grüße Joachim
 
Template HTML:

http://ride-le.de/cms/fileadmin/templates/home.php

PHP: 
<html>
<head>
<link rel="stylesheet" type="text/css" href="../stylesheets/style.css" />
<link rel="alternate" type="application/rss+xml" title="RSS-Feed" href="http://ride-le.de/cms/index.php?id=46&type=100">
<meta name="description" content="ride-le.de -- MTB Verein" />
<meta name="author" content="[email protected]" />
<meta name="keywords" content="ride-le, Dual, Dualslalom, Bikercross, BX, Street, Dirt, Downhill, DH, XC, Crosscountry, Marathon, Radsport, Rennen, MTB, Leipzig, BMX, le, Verein" />
<meta name="publisher" content="ride-le.de, leipzig, germany" />
<meta name="copyright" content="ride-le.de, leipzig, germany" />
</head>

<body>
<!--Header - Anfang-->
<div class="header">
	<div class="headermenucontent">	
		Headermenu
	</div>
	<div class="headerlogo">
	    <a href="http://ride-le.de/cms/index.php?id=11">
		<img src="../images/ridelogo_header.gif" alt="Startseite">
	    </a>
	</div>
</div>
<!--Header - Ende-->

<!--Menu - Anfang-->
<div class="menu">
	<!-- Menuspacer leerer Raum vor Menu-->
	<div class="menucontentspacer"></div>
	
	<!-- Div fuer eigentliches Menu, Punkte in eigene DIVs-->
	<div class="menucontent">    
    		Hauptmenu
	</div>
	
	<!-- Submenuspacer leerer Raum vor Menu-->
	<div class="submenucontentspacer"></div>
	
	<!-- Div fuer eigentliches Menu, Punkte in eigene DIVs-->
	<div class="submenucontent">
		Submenu
	</div>
</div>
<!--Menu - Ende-->

<!--Content-->
<!--Content div oeffnen-->
<div class="content">

<!--Contentsdiv fuer linke Spalte-->
<div class="contentleft">
 
	<div class="leftcontentmenu">
		leftcontentmenu
	</div>
	<div class="sponsoren">
		unterstützt von:<br>
		<a href="http://shop.burningline.com" target="_blank">
			<img src="../images/blracingteam.gif" alt="Burningline - klein">
		</a><br><br>
		<a href="http://www.diamant-rad.de/" target="_blank">
			<img src="../images/diamant.gif" alt="Diamant">
		</a><br><br>
		<a href="http://www.kfz-selbsthilfe-leipzig.de" target="_blank">
			<img src="../images/kfz-selbsthilfe-leipzig.jpg" alt="KFZ-Selbsthilfe-Leipzig">
		</a><br><br>
		<a href="http://www.trekbikes.com/de/de" target="_blank">
			<img src="../images/trek.gif" alt="Trek">
		</a><br><br>
	</div>
	
	<div class="clustrmaps">
		Websitebesucher aus:<br>
	</div>
	
</div>
 
<!--Contentsdiv fuer Hauptspalte-->
<div class="contentmain">
contentmain
</div>

<!--Contentsdiv fuer rechte Spalte-->
<div class="contentright">
 
	<div class="latestnews">latestnews</div>
	<br>
	
	<a href="http://ride-le.de/cms/index.php?id=41&type=100">
      		<img src="../images/feed-logos/rss2.gif" alt="rss 1.0 feed">
   	</a><br>
   	<a href="http://ride-le.de/cms/index.php?id=41&type=101">
      		<img src="../images/feed-logos/rdf1.gif" alt="rdf 1.0 feed">
   	</a><br>
   	<a href="http://ride-le.de/cms/index.php?id=41&type=102">
      		<img src="../images/feed-logos/atom1.png" alt="atom 1.0 feed">
   	</a><br>
</div>
<!--Content div schliessen-->
</div>
	
<!--Footer-->
<div class="footer">
	<div class="spruch">Zufallsspruch</div>
	
	<div class="letzteaenderung">letzte Änderung</div><br>
	<div class="besucherzaehler">Besucherzaehler</div>
</div>


</body>
</html>

CSS

PHP: 
/************************************************/
/*Allgemeine Einstellungen			*/
/************************************************/


/*Definition fuer Links*/
a:link    { text-decoration: none;	font-style:normal; color: #CC3300; }
a:hover   { text-decoration: none;	font-style:normal; color: #CC3300; }
a:active  { text-decoration: underline; font-style:normal; color: #CC3300; }
a:visited { text-decoration: none;	font-style:normal; color: #CC3300; }


/*Definition fuer den HTML Body der alles umschliesst*/
body
{
	margin:10px;
	background-color:white;
}

/*Definition fuer Bilder*/
img
{
    border-width:0px;

}

/************************************************/
/*Definition fuer den Header						*/
/************************************************/

/*dieser wird am oberen Browserrand platziert*/
.header
{

	font-family: Arial,Helvetica,sans-serif;font-size: small;font-weight: lighter;	color: black;
	background-color:#efefef;
	background-image:url(../images/header.jpg);background-repeat:no-repeat;
	width:970px;height:85px;
	padding:5px;margin-bottom:5px;
	clear:both;
}

.headermenucontent
{
	float:right;background-color:white;
}

.headerlogo
{
	float:right;clear:both;
}
/****************************************/
/*Menu					*/
/****************************************/

/*Menuumschliessendes Div*/
.menu
{
	border:0px;border-top:2px;border-color:#CC3300;border-style:solid;
	width:980px;
	clear:both
}

/*Spacerdiv der das Menu nach rechts einrueckt*/
.menucontentspacer
{
	width:175px;height:18px;
	padding-left:5px;padding-top:2px;padding-bottom:2px;
	margin-top:5px;
	left:0px;
	float:left;
}

/*Der Inhalt des Menus*/
.menucontent
{
	width:795px;height:18px;
	padding-right:5px;padding-top:2px;padding-bottom:2px;
	margin-top:5px;
	left:175px;
	float:left;
}

/*Spacerdiv der das Submenu nach rechts einrueckt*/
.submenucontentspacer
{
	width:175px;height:21px;
	padding-left:5px;padding-top:2px;padding-bottom:2px;
	left:0px;
	float:left;
}

/*Inhalt des Submenus*/
.submenucontent
{
	width:795px;height:21px;
	padding-right:5px;padding-top:2px;padding-bottom:2px;
	left:175px;
	float:left;
}

/*Menudiv das einen Menueintrag umschliesst*/
/*HeaderMenupunkt inaktiv*/
.headermenuelement-no
{
	font-family: Arial,Helvetica,sans-serif;font-size:small;font-weight: bolder;color: black;
	padding-right:10px;
        text-align:center;
	float:left;
}

/*Headermenupunkt aktiv*/
.headermenuelement-act
{
	background-color:#efefef;
	font-family: Arial,Helvetica,sans-serif;font-size:small;font-weight: bolder; color: black;

	padding-right:10px;
	text-align:center;
	float:left;
}

/*Menupunkt inaktiv*/
.menuelement-no
{
	font-family: Arial,Helvetica,sans-serif;font-size:larger;font-weight: bolder;color: black;
	padding-right:40px;
	text-align:center;
	float:left;
}


/*Menupunkt aktiv*/
.menuelement-act
{
	background-color:#efefef;
	font-family: Arial,Helvetica,sans-serif;font-size:larger;font-weight: bolder; color: black;
	padding-right:40px;
	text-align:center;
	float:left;
}

/*Submenupunkt inaktiv*/
.submenuelement-no
{
	font-family: Arial,Helvetica,sans-serif;font-size: medium;font-weight: bold;color: black;
	padding-right:40px;
	text-align:center;
	float:left;
}

/*Submenupunkt aktiv*/
.submenuelement-act
{
	background-color:#efefef;
	font-family: Arial,Helvetica,sans-serif;font-size: medium;font-weight: bold; color: black;
	padding-right:40px;
	text-align:center;
	float:left;
}

/*Leftcontentmenupunkt inaktiv*/
.leftcontentmenuelement-no
{
	font-family: Arial,Helvetica,sans-serif;font-size: medium;font-weight: bold;color: black;
	text-align:left;
}

/*Leftcontentmenupunkt aktiv*/
.leftcontentmenuelement-act
{
	font-family: Arial,Helvetica,sans-serif;font-size: medium;font-weight: bold;color: black;
	background-color: white;
	text-align:left;
}

/************************************************/
/*Inhalt					*/
/************************************************/

/*Inhaltumschliessender div*/
.content
{
	background-color:#efefef;
	font-family: Arial,Helvetica,sans-serif;font-size: medium;font-weight: normal;color: black;
        width:970px;
	padding:5px;
	float:left;clear:both;
}

/*Inhaltsmenu am linken Rand*/
.contentleft
{
	
	width:175px;
	left:0px;
	float:left;
}

	/*Sponsoren im contentleft*/
	.sponsoren
	{
		font-size: small;
	}

	/*Clustrmapsgrafik im Contentleft*/
	.clustrmaps
	{
		font-size: small;
	}
	
/*der eigentliche Inhalt in der Mitte*/
.contentmain
{

	left:175px;
	width:620px;
	float:left;
}

/*Zusatzinfos am rechten rand*/
.contentright
{
	background-color:#efefef;
	width:170px;
	left:795px;
	padding-left: 5px;
	float:left;
	text-align:right;
}

/************************************************/
/*Fusszeile					*/
/************************************************/

.footer
{
	border-width:0px;border-color:black;border-style:solid;
	font-family: Arial,Helvetica,sans-serif;font-size: small;font-weight: lighter;	color: black;
	width:970px;height:15px;
	padding:5px;
	margin-top:5px;
	clear:both;
}

.spruch
{
	float:right;
}

.besucherzaehler
{
	float:left;
}

.letzteaenderung
{
	float:left;
}

/************************************************/
/*Mitglieder					*/
/************************************************/
.mitgliedsbild
{
	width:100px;
	float:left;
	clear:both;
}

.mitgliedspunkte
{
	width:100px;
	
	float:left;
	font-weight: bold;
}


.mitgliedsdaten
{
	width:420px;
	text-align:left;
	float:left;
}

Die Inhaltsdivs werden bei mir dann vom CMS durch den Inhalt ersetzt.
Das kann man aber auch mit SSI oder PHP machen, so dass in diese dann Dateiinhalte aus anderen Dateien eingefügt werden.

Am Ende sieht das dann so aus: http://ride-le.de/cms/index.php

Grüße Joachim
 
danke :)
ich werd mir das so bald wie möglich mal genauer anschauen und alles mal ausprobieren. dafür isses jetz schon recht spät ;)
 
lupus_bhg schrieb:
danke :)
ich werd mir das so bald wie möglich mal genauer anschauen und alles mal ausprobieren. dafür isses jetz schon recht spät ;)
Zum Vergrößern anklicken....

Erstell dir die divs, gib jedem eine andere Hinterundfarbe und benenne sie. Dann spielst du so lange mit der css rum, bis alle in allen Browsern korrekt angezeigt werden. Danach kümmerst dich um den Inhalt.

Auf selfhtml gibt es dazu auch eine Anleitung.

Grüße Joachim
 
wookie schrieb:
du sagtest, du hättest die seite in dreamweaver programmiert, - sagen wir mal du hast dreamweaver benutzt um die fertigen code-stücke, welche dieser anbietet, zu nutzen. die funktionen MM_swapImage und MM_findObj etc... ist ein riesen javascript-gewurstel. dabei wäre die funktion ein bild auszutauschen so einfach:

(...)

direkt beim bild das benutzen:

<img src="/pfad/original.gif" onmouseout="this.src='/pfad/original.gif';" onmouseover="this.src='/pfad/original_over.gif';" />
Zum Vergrößern anklicken....

Was aber auch nicht die feine Loesung ist, Stichwort "Unobtrusive Javascript". Ein img-Element (allgemein jedes Element in HTML) ist dazu da, ein Bild anzuzeigen (Struktur der Seite), nicht das Verhalten des Bildes in bestimmten Situationen zu beschreiben (Verhalten bei Events).

Sauberer (nicht zwangslaeufig einfacher) ist es, Eventhandler fuer 'mouseover' und 'mouseout' fuer das jeweilige DOM-Element zu registrieren und dann das Bild zu tauschen.

Es geht aber noch viiiiiieeeeeel einfacher: mal "CSS Background Swap" bei Google eingeben. (Stichwort: Verschieben des CSS-Hintergrundbildes bei Mouseover).
 
rikman schrieb:
Was aber auch nicht die feine Loesung ist, Stichwort "Unobtrusive Javascript". Ein img-Element (allgemein jedes Element in HTML) ist dazu da, ein Bild anzuzeigen (Struktur der Seite), nicht das Verhalten des Bildes in bestimmten Situationen zu beschreiben (Verhalten bei Events).

Sauberer (nicht zwangslaeufig einfacher) ist es, Eventhandler fuer 'mouseover' und 'mouseout' fuer das jeweilige DOM-Element zu registrieren und dann das Bild zu tauschen.

Es geht aber noch viiiiiieeeeeel einfacher: mal "CSS Background Swap" bei Google eingeben. (Stichwort: Verschieben des CSS-Hintergrundbildes bei Mouseover).
Zum Vergrößern anklicken....

türlcih, aber mein vorschlag ist für anfänger total einfach zu begreifen und funktioniert in jedem browser. darum gings hier ja
 
lupus_bhg schrieb:
is das nich vollkommen egal?
ich hab's die sache ja auch nicht für opera programmiert, da die seite dann nur einen kleinen kreis richtig erreichen würde (und ich auch gar nicht wüsste, wie ich's auf genau einen browser optimieren könnte). ich find's nur trotzdem komisch, dass nur opera das ganze ordentlich hinbekommt. für mich sowieso der beste browser.
Zum Vergrößern anklicken....
Richtig ist relativ. Vielleicht hast du auch falsch programmiert und die anderen Browser machen es richtig.

Der FF ist für die Entwicklung mit seinen Steck-Reins wie der Webdeveloper-Bar oder Firebug zwar wirklich toll, aber eine Lanze für Opera kann ich auch brechen: es ist nach wie vor der schnellste Browser, den ich kenne.

Rikmans Hinweis mit Bildertauschen per CSS wäre übrigens auch meine bevorzugte Lösung. Funktioniert sogar, wenn Javascript abgeschaltet ist.

Grüße,
Daniel
 
Fubbes schrieb:
Richtig ist relativ. Vielleicht hast du auch falsch programmiert und die anderen Browser machen es richtig.
Zum Vergrößern anklicken....

Irgendwie muss ich da zwangsläufig an den Acid2-Test denken :D
Aber das nur mal nebenbei. Ich hab' mir schon gedacht, dass jetzt viele verschiedene Lösungen zu Tage kommen (und bin erfreut), wie gesagt, ich werd's ausprobieren. Heut abend setz ich mich wieder ran, die letzten beiden Tage war ich durch die Rückschläge nicht so motiviert, aber die ganze Sache soll ja schließlich bald fertig sein ;)

Vielen Dank an alle!
 
Bitte beachte unsere Verhaltensregeln beim Antworten. Danke 🙂
Zurück