• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Firefox rückt Grafiken verschieden ein

Status
Für weitere Antworten geschlossen.
MasterOfDsaster

MasterOfDsaster

Neues Mitglied
Hallo Leute!

Ich habe für einen Bekannten eine Internetseite gestaltet und programmiert (Dreamweaver+Editor).

Nun steht designtechnisch soweit alles, aber im Firefox habe ich ein Problem, dass im IE nicht auftaucht:

Die Seite: joergefarmer.de - portraits / malerei / photographie

Wenn man nun zwischen den Unterseiten über die Navigation hin und her springt, fällt einem auf, dass die Grafiken immer gleich sitzen, nur bei Photographie verrutscht alles um einige Pixel.

Ich bin mittlerweile soweit, dass es an den Grafiken liegt, komme aber nicht weiter.

Über Hilfe würde ich mich freuen,

MFG, Jonas
 
Falls dich das stört, sorge doch dafür, dass überall ein Scrollbalken erscheint (aber nicht einfach nur mehrere Absätze ;)). Dann sieht deine Seite immer schön gleichmäßig aus.
 
Ich hab gar keine Frames drin, die entstehen durch die Weiterleitung der 1&1-Domain aufn Arcor-Webspace...

Und ich hab jetzt das Scrolling überall an, im Firefox alles perfekt, aber im IE folgendes:



Danke für eure Antworten,
Gruß, Jonas
 
So wie auf deinem Screenshot sieht es bei mir weder im IE6 noch IE7 aus.
Im IE6 wird:
Code: 
<a id="ecke" href="index.html"></a>
unpositioniert an der oberen, linken Ecke angezeigt (kein position: fixed; für IE < 7).

Gebe dem gesamten Inhalt für IE6 (Conditional Comment oder Sternchehack) position: relative; und height: 100%;.
<a id="ecke" href="index.html">..</a> kannst du dann absolute vom Inhalt mit bottom und right ausrichten.


Code: 
<div id="inhalt">
<a id="ecke" href="index.html"><!--...--></a>
<div>
css:
Code: 
* html #inhalt {
position: relative;
height: 100%; /* #inhalt muss ein direktes Kinderelement von body sein.*/
...
...
}
* html #ecke {
position: absolute;
right: wert.px;
bottom: wert.px;
...
...
}
body, html müssten ebenfalls height: 100% haben.
Solltest du diese Variante auch für IE7 und andere Browser verwenden, brauchen diese für #inhalt min-height: 100%;.

Für Helfende ist das der relevante Link:
joergefarmer.de - portraits / malerei / photographie
Es sei denn es geht um ein Frame-Problem.
 
Zuletzt bearbeitet:
Danke für deine ausführliche Hilfe!
Ich versteh sie aber leider nicht ^^

Also, das ist jetzt meine originale css:

Code: 
body    {margin: 0; padding: 0; width:100%; height:100%; background-color: #333333;} 

#ecke    {position: absolute; right: 30px; bottom: 30px; display: block; width: 150px; height: 60px; border: 0px; background-color: transparent; 
        background-image: URL(../img/logo.png); background-repeat: no-repeat;}

#center    {width: 606px; border: 0px solid blue; margin: 0px auto;} 

a {outline:none;}

.text {color: #CCCCCC; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.5;}

.green {color: #339966; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.5;}

Soll die dann so aussehen?

Code: 
body    {margin: 0; padding: 0; width:100%; height:100%; background-color: #333333;} 

#inhalt {position: relative; height: 100%;} /* #inhalt muss ein direktes Kinderelement von body sein.*/

#ecke    {position: absolute; right: 30px; bottom: 30px; display: block; width: 150px; height: 60px; border: 0px; background-color: transparent; 
        background-image: URL(../img/logo.png); background-repeat: no-repeat;}

#center    {width: 606px; border: 0px solid blue; margin: 0px auto;} 

a {outline:none;}

.text {color: #CCCCCC; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.5;}

.green {color: #339966; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.5;}

und in der originalen HTML:

Code: 
<!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>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.lite.js"></script>
<script type="text/javascript" src="js/moo.fx.js"></script>
<script type="text/javascript" src="js/litebox-1.0.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="all" />
<title>joergefarmer.de - portraits / malerei / photographie</title>
</head>
<body onload="initLightbox()"><a href="index.html" id="ecke"></a>
<div id="center"><p><a href="vita.html"><img src="img/1pt.png" alt="" width="601" height="25" border="0" /><img src="img/nav_vita_a.png" alt="Vita" width="44" height="27" border="0" /></a><a href="portraits.html"><img src="img/nav_port.png" alt="Portraits" width="101" height="27" border="0" /></a><a href="malerei.html"><img src="img/nav_malerei.png" alt="Malerei" width="92" height="27" border="0" /></a><a href="photo.html"><img src="img/nav_phot.png" alt="Photographie" width="153" height="27" border="0" /></a><a href="kontakt.html"><img src="img/nav_kont.png" alt="Kontakt" width="210" height="27" border="0" /></a></p>
<span class="Stil3"><a href="img/selbst_gross.png" rel="lightbox" title="Selbstportrait von Joerge Farmer"><img src="img/selbst.png" alt="Selbstportrait" width="170" height="227" border="0" align="right" /></a></span>
       <p align="left" class="text">Joerge Farmer, Jahrgang 1959, lebt und arbeitet seit 2004 in Füssen.</p>
       <p align="left" class="text">Nach einem Praktikum 1990 in einer Kunstgießerei in Pforzheim entstehen in den darauffolgenden Jahren außergewöhnlich filigrane Schmuckobjekte.</p>
       <p align="left" class="text">Freischaffend als <span class="green">Schmuckdesigner</span> tätig führt ihn sein Weg vom Kunsthandwerk ab 1996 zur Malerei.</p>
       <p align="left" class="text">Nach einem freiem Kunststudium an der Accademia dell'Arte in Verona wendet er sich der klassischen <span class="green">Portraitmalerei</span> zu. </p>
       <p align="left" class="text">Einige seiner <span class="green">Portraitphotographien</span> wurden 2005 in einer Gemeinschaftsausstellung des &quot;art-club-international&quot; einem breiten Publikum im Allgäu vorgestellt.</p>
</div>
</body>
</html>

und in der neuen:

Code: 
<!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>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.lite.js"></script>
<script type="text/javascript" src="js/moo.fx.js"></script>
<script type="text/javascript" src="js/litebox-1.0.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="all" />
<title>joergefarmer.de - portraits / malerei / photographie</title>
</head>
<body onload="initLightbox()">
<div id="inhalt">
<a href="index.html" id="ecke"></a>
<div id="center"><p><a href="vita.html"><img src="img/1pt.png" alt="" width="601" height="25" border="0" /><img src="img/nav_vita_a.png" alt="Vita" width="44" height="27" border="0" /></a><a href="portraits.html"><img src="img/nav_port.png" alt="Portraits" width="101" height="27" border="0" /></a><a href="malerei.html"><img src="img/nav_malerei.png" alt="Malerei" width="92" height="27" border="0" /></a><a href="photo.html"><img src="img/nav_phot.png" alt="Photographie" width="153" height="27" border="0" /></a><a href="kontakt.html"><img src="img/nav_kont.png" alt="Kontakt" width="210" height="27" border="0" /></a></p>
<span class="Stil3"><a href="img/selbst_gross.png" rel="lightbox" title="Selbstportrait von Joerge Farmer"><img src="img/selbst.png" alt="Selbstportrait" width="170" height="227" border="0" align="right" /></a></span>
       <p align="left" class="text">Joerge Farmer, Jahrgang 1959, lebt und arbeitet seit 2004 in Füssen.</p>
       <p align="left" class="text">Nach einem Praktikum 1990 in einer Kunstgießerei in Pforzheim entstehen in den darauffolgenden Jahren außergewöhnlich filigrane Schmuckobjekte.</p>
       <p align="left" class="text">Freischaffend als <span class="green">Schmuckdesigner</span> tätig führt ihn sein Weg vom Kunsthandwerk ab 1996 zur Malerei.</p>
       <p align="left" class="text">Nach einem freiem Kunststudium an der Accademia dell'Arte in Verona wendet er sich der klassischen <span class="green">Portraitmalerei</span> zu. </p>
       <p align="left" class="text">Einige seiner <span class="green">Portraitphotographien</span> wurden 2005 in einer Gemeinschaftsausstellung des &quot;art-club-international&quot; einem breiten Publikum im Allgäu vorgestellt.</p>
</div>
</div>
</body>
</html>
 
Entschuldige,
Ich habe da etwas falsch verstanden.
Das Logo soll immer am unteren rechten Bildschirmrand erscheinen.

Zunächst würde ich die Scrollbars für body abschalten.
Code: 
* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #5B5B5B;
}
Dann für Inhalt wieder einfügen:
Code: 
#inhalt {
height: 100%;
width: 100%;
overflow: auto;
}
#ecke absolute von body ausrichten:
Code: 
a {
position: absolute;
bottom: 15px;
right: 30px;
display: block;
width: 150px;
height: 60px;
background-image: url(http://home.arcor.de/joergefarmer/img/logo.png);
}
In einem schmalen Viewpoint würde das Logo den anderen Inhalt überdecken (war in deinem ersten Beispiel nicht anders).

Durch ein weiteres Element (#inhalt_innen) kannst du der "Ecke" mit margin von der Pelle rücken:
Code: 
#inhalt_innen {
margin-left: 150px;
margin-right: 150px;
position: relative;
}
position: relative; ist nötig damit #inhalt die #ecke nicht überdeckt.

Alles zusammen:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
  /* <![CDATA[ */
* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #5B5B5B;
}



a {
position: absolute;
bottom: 15px;
right: 30px;
display: block;
width: 150px;
height: 60px;
background-image: url(http://home.arcor.de/joergefarmer/img/logo.png);
}

#inhalt {
height: 100%;
width: 100%;
overflow: auto;

}

#inhalt_innen {
margin-left: 150px;
margin-right: 150px;
position: relative;
}

  /* ]]> */
  </style>
</head>
<body>
<div id="inhalt">
<div id="inhalt_innen">
<h1>Lorem ipsum</h1> 
<p>dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua... </p>   
</div>
<a href="index.html" id="ecke"><!-- --></a>
</div>
</body>
</html>

Für die Logo-grafik solltest du ein anderes Format wählen, da IE alpha-Transparenz erst ab IE7 in pngs richtig unterstützt. Ein einfacher Schriftzug würde auch als gif gut aussehen.
 
Zuletzt bearbeitet:
Oh, ich törichter Narr.
Ich muß mich noch einmal korrigieren.
possition: relative in #inhalt_innen beschert dem IE< 8 auch einen Bug.
Jetzt aber richtig:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
  /* <![CDATA[ */
* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #5B5B5B;
}



a {
position: absolute;
bottom: 15px;
right: 30px;
display: block; /* kann auch wegfallen. position:absolute sorgt immer für Blogdarstellung*/
width: 150px;
height: 60px;
background-image: url(http://home.arcor.de/joergefarmer/img/logo.png);
}

#inhalt {
height: 100%;
width: 100%;
overflow: auto;
}

#inhalt_innen {
margin-left: 150px;
margin-right: 150px;
}

  /* ]]> */
  </style>
</head>
<body>


<div id="inhalt">



<div id="inhalt_innen">

<h1>Lorem ipsum</h1> 
<p>dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut ...</p>   


</div>
<a href="index.html" id="ecke"><!-- --></a>
</div>


</body>
</html>
Diesmal habe ich es auch mit IE6, IE7, ff2, ff3; safari 3.1 (win), Opera 9.6 und Opera 9.2 geprüft.

Mit dem Frame hat Efchen natürlich recht. Darum mein Hinweis auf die relevante Adresse.
Wenn es ein kommerzielles Angebot sein soll, ziehe richtig um (das kostet beinahe nichts). Ansonsten lasse die Billig-Domain weg und verweise auf die richtige Adresse.
Wenn der "Künstler" keine 6.-€ im Jahr locker machen kann ist das ganze eh zum scheitern verurteilt.
Die übrigen Kosten (Hardware, Software, Filmmaterial, Print, Telefon,...) dürfen diesen Betrag um ein vielfaches übersteigern.

Warum wird gerade am Internetauftritt so gerne gespart?
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben