Firefox & IE / Positionen

-Raid- · 20. Mai 2008

Hi,
vielleicht erinnert ihr euch noch an: http://www.tutorials.de/forum/css/288586-leiste-rechts-links.html

Nach knapp einem Jahr Pause, habe ich jetzt wieder angefangen zu coden/programmieren.
Die Fehler mit den Leisten konnte ich nach langem hin und her selbst beseitigen.

Jetzt ist die Seite soweit fertig, jedoch sitzt die Content-Box im IE an einer andere Stelle wie im Firefox. Was mir auch noch aufgefallen ist, dass die Footerweite im IE die beiden Leisten links und rechts einbezieht, soll heißen, stell ich die Weite auf 100% ist der Footer im IE genau zwischen den beiden Leisten und schließt bündig ab, im Firefox hingegen wird nur die Linke Leiste mit einbezogen, was zu einem Anzeigefehler führt, entweder im IE (unter 100%) oder im Firefox (100%).

Kann ich den IE bzw. Firefox verschiedene Positionen zuweisen?

FF Footer

IE Footer

IE Content

FF Content

Mit freundlichen Grüßen,
-Raid-

Maik · 20. Mai 2008

Hi,

da du dich auf deinen vergangenen Thread beziehst, reiche ich dir hier die überarbeitete Fassung meines damaligen Demos nach, in der ich das Problem mit dem Footer gefixt habe.

Auszug aus dem Stylesheet:

Code:

<style type="text/css">
<!--
...

div#footer {
position:absolute;
bottom:0;
left:20px;
right:20px;
background:#76b9d2;
}
-->
</style>
<!--[if lt IE 7]>
<style type="text/css">
div#footer {
width:100%;
}
</style>
<![endif]-->

Was die Content-Box betrifft, müsstest du schon den aktuellen Quellcode der Seite posten, damit man darauf auch näher eingehen kann.

-Raid- · 20. Mai 2008

Erstmal ein Vorwort an dich Maik:
Ich finde es klasse, wie schnell und Sachlich du Antwortest. In manch einem Forum würden nur Sachen wie nutzt die Suchfunktion usw. gepostet und nicht auf einen eingegangen, dafür ein großes Lob an dich.

Hier die .css:

Code:

#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%	
	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 100%; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

   
   html,body {
	margin:0;
	padding:0;
	height:100%;
}
   body {
    font-size:100.01%;
    font-family: Times New Roman;
    margin: 0em 0em; padding: 0em 0em;
    background: #121212 url("http://www.tutorials.de/forum/images/BarL.jpg") repeat-y;
  }
	h1 {
    font-size: 1.0em;
    margin: 0px -6px 0.2em; padding: 74.5px;
    background: url("http://www.tutorials.de/forum/images/header.jpg");
  }
    ul#Navigation {
	font-size: 14px;
    float: left;
    margin: auto -3.9px; padding: 0em 0em;
    clear: left;
  }
    ul#Navigation p {
    color: white;
    background: url("http://www.tutorials.de/forum/images/NaviDown.jpg");
    margin: 0px 0px; pedding: 0px 0px;
    width: 135px; height: 19px;
    clear: left;
  }
    ul#Navigation li {
    list-style: none;
    border: 0px solid;
    clear: left;
  }
    ul#Navigation a {
    display: block;
    padding: 2px;
	clear:left;
  }
    ul#Navigation a:link {
    color: white; background: url("http://www.tutorials.de/forum/images/NaviButton.jpg");
    text-decoration:none;
    text-align:center;
    clear: left;
  }
    ul#Navigation a:visited {
    color: white;
    text-decoration:none;
    text-align:center
    color: white; background: url("http://www.tutorials.de/forum/images/NaviButton.jpg");
    text-align:center;
  }
    ul#Navigation a:hover {
    color: #970202; background: url("http://www.tutorials.de/forum/images/NaviButtonOver.jpg");
    text-align:center;
  }
    ul#Navigation a:active {
    color: #000000; background: url("http://www.tutorials.de/forum/images/NaviButtonPressed.jpg");
    text-align:center;
  }
    ul#Uhrzeit {
	text-align:center;
	color:white;
	float: left;
	margin: auto -3.9px; padding: 0em 0em;
	clear: left;
  }
    ul#Uhrzeit p {
    color: white;
    background: url("http://www.tutorials.de/forum/images/Counter.jpg");
    margin: 0px 0px; pedding: 0px 0px;
    width: 135px; height: 19px;
    clear: left;
  }
 
    ul#Counter {
	text-align:center;
	color:white;
	float: left;
	margin: auto -3.9px; padding: 0em 0em;
	clear: left;
  }
    ul#Counter p {
    color: white;
    background: url("http://www.tutorials.de/forum/images/Counter.jpg");
    margin: 0px 0px; pedding: 0px 0px;
    width: 135px; height: 19px;
    clear: left;
  }
    div#Inhalt {
	width: 86%;
	margin: -16px auto 5%; padding: 0px auto;
	color: #ffffff;
  }
    div#Inhalt h2 {
    font-size: 1em;
    margin: 0em 0em;
    background: url("http://www.tutorials.de/forum/images/NaviDown.jpg");
  }
    div#Inhalt p {
    font-size: 1em;
    margin: 0em 0em;
    padding: 0.8em 1em;
    background: url("http://www.tutorials.de/forum/images/InhaltBackground.jpg");
	margin-bottom: 0em;
  }	 
    div#footer {
	margin:  auto auto; pedding: auto auto;
	text-align: center;
	position:absolute;
	bottom:0;
	width:96.8%;
	color: #FFFFFF; background: url("http://www.tutorials.de/forum/images/NaviDown.jpg");
	clear:both;
  }
	div#wrapper {
    position:relative;
    background:url("http://www.tutorials.de/forum/images/barR.jpg") right repeat-y;
    min-height:100%;
    height:auto !important;
    height:100%;
    padding:0px 20px; margin: 0px 0px;

und hier die index.php:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="'Get Back' ist eine Seite der Band "Get Back""/>
<meta name="author" content="[...]"/>
<meta name="keywords" content="Get, Back, Get Back, Band, Musik, NRW"/>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="audio-player/audio-player.js"></script>
<title>Get Back - Willkommen</title>
<LINK REL="SHORTCUT ICON" href="http://www.tutorials.de/forum/images/favicon.jpg">
<style type="text/css">
@import "layout.css";
</style>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper" class="clearfix">
<h1></h1>

<ul id="Navigation">
  <center><p>Navigation</p></center>
  <li><a href="index.php">Willkommen</a></li></center>
  <li><a href="band.php">Band</a></li></center>
  <li><a href="musik.php">Musik</a></li></center>
  <li><a href="kontakt.php">Kontakt</a></li></center>
  <li><a href="impressum.php">Impressum</a></li></center>
  <p></p><br>
</ul>

<ul id="Navigation">
<center><p>Uhrzeit</p></center>
</ul>
<ul id="Uhrzeit">
<p><script type="text/javascript" src="js/uhrzeit.js"></script></p>
</ul>
<ul id="Navigation">
<p></p><br>
</ul>

<ul id="Navigation">
  <center><p>Counter</p></center>
</ul>
<ul id="Counter">
<p><? include ("Counter.php"); ?></p>
</ul>
<ul id="Navigation">
<p></p></ul>
</ul>

<div id="Inhalt">
  <h2><center>Willkommen</center></h2>
 <center><p>Willkommen auf der Seite von 'Get Back'!<br>
 Zum vergrößern eines Bildes, auf ein Bild klicken.<br><br>
[Persöhnliche Daten vorerst entfernt, noch keine Zustimmung der Personen]
</p><h2>&nbsp</h2></center>
</div>
<div id="footer"><center>© 2008 Get Back</center></div>
</body>
</html>

Maik · 20. Mai 2008

Versuch es mal hiermit:

Code:

* {
margin:0;
padding:0;
}

ul#Navigation {
    font-size: 14px;
    float: left;
    margin: 0 ;
    padding: 0em 0em;
    clear: left;
    width:135px;
  }

div#Inhalt {
        margin: 0 0 0 135px;
        padding: 0px auto;
        color: #ffffff;
}

Und korrigiere den Schreibfehler bei den padding-Eigfenschaften, wo du pedding geschrieben hast.

Zudem muss eine ID im HTML-Dokument eindeutig sein, sprich sie darf darin nicht mehrmals vergeben werden.

Ebenso ist das center- und p-Element kein Nachfahreelement des ul-Elements.

-Raid- · 20. Mai 2008

Das mit dem ul...
Ich wollte das der Counter eine andere Hintergrundgrafik bekommt, wie der obere und unter Balken. Habe das nicht anders hinbekommen, klappt aber auch.

Ich kenn mich noch nicht sogut mit diesen Teilen aus, also <ul> <p> etc..

Nachtrag:
Folgender Fehler tritt nun im IE auf:

Wie kann ich 2 Wrapper einfügen, einen für Links und einen für rechts?
Wenn ich das richtig sehe, umschließt bei meinem Versuch der Wrapper 1, den Wrapper 2 und somit haben die Leisten verschiedene größen.

Code:

 }
	div#wrapper {
    position:relative;
    background:url("http://www.tutorials.de/forum/images/barR.jpg") right repeat-y;
    min-height:100%;
    height:auto !important;
    height:100%;
    padding:0px 20px; margin: 0px 0px;
  }
	div#wrapper2 {
    position:relative;
    background:url("http://www.tutorials.de/forum/images/barL.jpg") left repeat-y;
    min-height:100%;
    height:auto !important;
    height:100%;
    padding:0px 20px; margin: 0px 0px;

Code:

<div id="wrapper" class="clearfix"><div id="wrapper2" class="clearfix">

Maik · 20. Mai 2008

Kann man sich die Seite mal "live" anschauen? Bei mir gab's da nämlich heute Morgen keine Probleme im IE.

Und wofür benötigst du nun zwei ineinander verschachtelte wrapper-Blöcke? Zumal diese "Technik" mit ihrer 100%-Mindesthöhe so nicht mehr funktionieren wird.

Das eine Hintergrundbild wird doch direkt im body-Element eingesetzt - und diese Methode funktioniert einwandfrei.

-Raid- · 20. Mai 2008

Du kriegst gleich Post mit dem Link zum Server.

Maik · 20. Mai 2008

Dann schau dir mal dieses Dokument an:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="'Get Back' ist eine Seite der Band Get Back">
<meta name="author" content="Kevin Wirtz">
<meta name="keywords" content="Get, Back, Get Back, Band, Musik, NRW">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="audio-player/audio-player.js"></script>
<title>Get Back - Willkommen</title>
<LINK REL="SHORTCUT ICON" href="http://www.tutorials.de/forum/images/favicon.jpg">
<style type="text/css">
* {
margin:0;
padding:0;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 100%;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


   html,body {
        margin:0;
        padding:0;
        height:100%;
}
   body {
    font-size:100.01%;
    font-family: Times New Roman;
    margin: 0em 0em; padding: 0em 0em;
    background: #121212 url(images/BarL.jpg) left top repeat-y;
  }
        h1#header {
    font-size: 1.0em;
    margin: 0px -6px 0.2em; padding: 74.5px;
    background: url(images/Header.jpg);
  }

  ul {
  list-style:none;
  }
    ul.Navigation {
        font-size: 14px;
    float: left;
    margin: 0;
    padding: 0em 0em;
    clear: left;
    width:135px;
  }
    ul.Navigation li.NaviDown {
    color: white;
    background: url(images/NaviDown.jpg);
    margin: 0px 0px; padding: 0px 0px;
    width: 135px; height: 19px;
    clear: left;
    text-align:center;
  }
    ul.Navigation li {
    list-style: none;
    border: 0px solid;
    clear: left;
  }
    ul.Navigation a {
    display: block;
    padding: 2px;
        clear:left;
  }
    ul.Navigation a:link {
    color: white; background: url(images/NaviButton.jpg);
    text-decoration:none;
    text-align:center;
    clear: left;
  }
    ul.Navigation a:visited {
    color: white;
    text-decoration:none;
    text-align:center
    color: white; background: url(images/NaviButton.jpg);
    text-align:center;
  }
    ul.Navigation a:hover {
    color: #970202; background: url(images/NaviButtonOver.jpg);
    text-align:center;
  }
    ul.Navigation a:active {
    color: #000000; background: url(images/NaviButtonPressed.jpg);
    text-align:center;
  }
    ul#Uhrzeit {
        text-align:center;
        color:white;
        float: left;
        margin: 0; padding: 0;
        clear: left;
  }
    ul#Uhrzeit li.Uhrzeit {
    color: white;
    background: url(images/Counter.jpg);
    margin: 0; padding: 0;
    width: 135px; height: 19px;
    clear: left;
    text-align:center;
  }

    ul#Counter {
        text-align:center;
        color:white;
        float: left;
        margin: 0; padding: 0em 0em;
        clear: left;
  }
    ul#Counter li.Counter {
    color: white;
    background: url(images/Counter.jpg);
    margin: 0px 0px; padding: 0px 0px;
    width: 135px; height: 19px;
    clear: left;
    text-align:center;
  }
    div#Inhalt {
        margin: 0 0 0 135px;
        padding: 0px auto;
        color: #ffffff;
        background: url(images/InhaltBackground.jpg);
  }
    div#Inhalt h2 {
    font-size: 1em;
    margin: 0em 0em;
    background: url(images/NaviDown.jpg);
    height:1%;
  }
    div#Inhalt p {
    font-size: 1em;
    margin: 0em 0em;
    padding: 0.8em 1em;
    margin-bottom: 0em;
  }
    div#footer {
        margin:  auto auto; padding: auto auto;
        text-align: center;
        position:absolute;
        bottom:0;
        left:16px;
        right:16px;
        color: #FFFFFF; background: url(images/NaviDown.jpg);
  }
        div#wrapper {
    position:relative;
    background:url(images/BarR.jpg) right top repeat-y;
    min-height:100%;
    height:auto !important;
    height:100%;
    padding:0px 16px; margin: 0px 0px;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
ul.Navigation li {
float:left;
width:135px;
}
div#footer {
width:100%;
}
</style>
<![endif]-->
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper" class="clearfix">
<h1 id="header"></h1>

<ul class="Navigation">
  <li class="NaviDown">Navigation</li>
  <li><a href="index.php">Willkommen</a></li>
  <li><a href="band.php">Band</a></li>
  <li><a href="musik.php">Musik</a></li>
  <li><a href="kontakt.php">Kontakt</a></li>
  <li><a href="impressum.php">Impressum</a></li>
  <li class="NaviDown"></li>
</ul>

<ul class="Navigation">
    <li class="NaviDown">Uhrzeit</li>
</ul>

<ul id="Uhrzeit">
    <li class="Uhrzeit"><script type="text/javascript" src="js/uhrzeit.js"></script></li>
</ul>

<ul class="Navigation">
    <li class="NaviDown"></li>
</ul>

<ul class="Navigation">
  <li class="NaviDown">Counter</li>
</ul>

<ul id="Counter">
    <li class="Counter"><? include ("Counter.php"); ?></li>
</ul>

<ul class="Navigation">
    <li class="NaviDown"></li>
</ul>

<div id="Inhalt">
  <h2><center>Willkommen</center></h2>
 <center><p>Willkommen auf der Seite von 'Get Back'!<br>
 Zum vergrößern eines Bildes, auf ein Bild klicken.<br><br>
[Persöhnliche Daten vorerst entfernt, noch keine Zustimmung der Personen]
</p><h2>&nbsp;</h2></center>
</div>
<div id="footer"><center>© 2008 Get Back</center></div>
</div>
</body>
</html>

Getestet unter WinXP Prof. SP2 in Firefox 2.0.0.14, IE 6 + 7, Netscape 7.1, Opera 9.24, Safari 3.0.4

-Raid- · 20. Mai 2008

Genial

Vielen dank Maik! Hast mir wirklich sehr weitergeholfen!

Nachtrag: Soweit habe ich jetzt alles angepasst. Zwei kleine Sachen passen mir noch nicht (kein Abstand der Navigation zur Uhrzeit und von der Uhrzeit zum Counter, vorher mit <br> gelöst, funktioniert aber nicht (mehr) im IE) (Inhalt hat keinen Abstand zur Navigation, der Background bleibt in der gleichen Position, nur der Anfang mit dem Titel und der Abschluss verschieben sich) aber ich denke (hoffe) die Probleme werde ich alleine lösen.

Ich konnte so einiges rauslesen und nachvollziehen, was du gemacht hast, dass wird mir das erstellen meiner nächsten Seite weitaus einfacher machen.

Nachtrag 2: Warum ich einen 2ten Wrapper brauchte, war der Grund, dass ich die Seite einrücken wollte, also 2em Platz links und rechts, also die Seite sollte erst bei 2em anfangen und 2em früher aufhören, aber da trau ich mich jetzt nichtmehr ran, bin froh, wenn die Seite steht.
Nachtrag 2²: Hab es jetzt geschaft, die Seite hat einen 2em dicken Rand. Habe einfach die Bildbreite angehoben und so ging es dann auch ohne einen 2ten Wrapper.

Nachtrag Nummer 3: Oh, schon 6 Uhr...
Ich hätte da noch ne Idee, habe aber im Moment noch nicht wirklich eine Ahnung wie ich die umsetzen soll. Hatte mir gedacht, ich erstelle einfach eine Tabelle zwischen Navi und Content und zieh die in die Länge, Image der rechten Leiste und gut ist, klappte aber nicht.

Mit Paint bearbeitet, so sollte es aussehen.

Ist jetzt aber nicht notwendig.

Eine kleine Aufgabe hab ich noch für dich. Auf der Seite steht das Problem.
Die Seite ist aktualisiert auf dem Server.

Nochmals vielen dank an dich!

Mit freundlichen Grüßen,
-Raid-

Maik · 21. Mai 2008

Moin.

-Raid- hat gesagt.:
Zwei kleine Sachen passen mir noch nicht (kein Abstand der Navigation zur Uhrzeit und von der Uhrzeit zum Counter, vorher mit <br> gelöst, funktioniert aber nicht (mehr) im IE) (Inhalt hat keinen Abstand zur Navigation, der Background bleibt in der gleichen Position, nur der Anfang mit dem Titel und der Abschluss verschieben sich) aber ich denke (hoffe) die Probleme werde ich alleine lösen.

Neues Markup:

Code:

<ul class="Navigation">
  <li class="NaviDown">Navigation</li>
  <li><a href="index.php">Willkommen</a></li>
  <li><a href="band.php">Band</a></li>
  <li><a href="musik.php">Musik</a></li>
  <li><a href="kontakt.php">Kontakt</a></li>
  <li><a href="impressum.php">Impressum</a></li>
  <li class="NaviDown"></li>
</ul>

<ul id="Uhrzeit">
    <li class="NaviDown">Uhrzeit</li>
    <li class="Uhrzeit"><script type="text/javascript" src="js/uhrzeit.js"></script></li>
    <li class="NaviDown"></li>
</ul>

<ul id="Counter">
    <li class="NaviDown">Counter</li>
    <li class="Counter">8</li>
    <li class="NaviDown"></li>
</ul>

Neues Stylesheet:

Code:

/*  aus ul.Navigation li.NaviDown {...} wird li.NaviDown {...} */
li.NaviDown {
    color: white;
    background: url(images/NaviDown.jpg);
    margin: 0px 0px; padding: 0px 0px;
    width: 135px; height: 19px;
    clear: left;
    text-align:center;
}

ul#Uhrzeit {
    text-align:center;
    color:white;
    float: left;
    margin: 0;
    margin-top:10px;
    padding: 0;
    clear: left;
}

ul#Counter {
    text-align:center;
    color:white;
    float: left;
    margin: 0;
    margin-top:10px;
    padding: 0em 0em;
    clear: left;
}

-Raid- hat gesagt.:
Eine kleine Aufgabe hab ich noch für dich. Auf der Seite steht das Problem.
Die Seite ist aktualisiert auf dem Server.

Zwischen dem Inhalt und der Navigation sollen 0.2% Platz sein. Leider verschiebt sich der Hintergrund nicht mit.

Das mit den 0.2% haut so nicht hin, da die linke Spalte eine fixe Breite besitzt, aber so richtest du einen Abstand zwischen den beiden Spalten ein:

Code:

div#Inhalt {
        background: #262626;
        margin: 0 0 3% 140px; /* von mir frei gewählt */
        padding: 0 0.2%;
        color: #ffffff;
}

Firefox & IE / Positionen

-Raid-

Mitglied

Maik

Anhänge

-Raid-

Mitglied

Maik

-Raid-

Mitglied

Maik

-Raid-

Mitglied

Maik

-Raid-

Mitglied

Maik

Neue Beiträge