Css Ie7 - Ie6

napsi · 12. September 2008

Hallo Miteinander!

Im IE 7 wird die Seite prinzipiell richtig angezeigt, allerdings der IE6 funktioniert. Da ich es aber schon mal auf einer anderen Seite geschafft habe, hier nichts anderes gemacht habe, verstehe ich nicht, warum die Darstellung nicht gleich ist.

Code:

* {                           /* alle Elemente sollen urspruenglich keine Innen- und Aussenabstaende haben */
        margin: 0;
        padding: 0;
        /*border: 1px dashed red;*/
}

body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        width: 980px;
        margin: 0;
        padding: 0;
		background-image: url(../Img/style/background.gif);
}

div#pagewrap {
        width: 980px;
}

#logo {
		padding-top: 60px;
		padding-left: 50px;
		border:0px;
}

#menu1 {
		width: 170px;
		height: 250px;
		margin-top: 30px;
		/*background-color:#000000;*/
		float: left;
		/*border-right: 3px #EF3E35;*/
		padding-left: 5px;
		padding-top: 15px;
		
}

#navi_line {
		background-image: url(../Img/style/red_back.gif);
		width: 3px;
		height: 280px;
		margin-top: 30px;
		margin-left:171px;
}

ul.menu1, ul ul {
		padding:0; 
		margin:0; 
		border:0; 
		list-style-type:circle; 
		height:24em; 
		overflow:hidden; 
		width:12em; 
		text-align:left; 
		color:#F9B2AE;
		background: url(../Img/style/icone.gif) right middle no-repeat;
}

ul.menu1 table {
		border-collapse:collapse; 
		padding:0; 
		margin:0; 
		font-size:1em;
}

ul.menu1 ul {
		margin-left:1em;
}

ul.menu1 li {
		text-indent:0.5em;
}

ul.menu1 li.drop {
		margin-bottom:-2px;
}

ul.menu1 li a, ul.menu1 li a:visited {
		display:block; 
		width:12em; 
		height:2em; 
		line-height:1.9em; 
		text-decoration:none; 
		color:#F9B2AE;
}

ul.menu1 li a.last, ul.menu1 li a.last:visited {
		display:block; 
		width:12em; 
		height:6em; 
		line-height:2em;
}

ul.menu1 li ul {
		display:none;
}

ul.menu1 li:hover a, ul.menu1 li a:hover {
		border:0; 
		color:#EF3E35; 
		font-weight:bold;
}

ul.menu1 li:hover ul, ul.menu1 li a:hover ul {
		display:block; 
		height:8em; 
		width:10em; 
		margin-top:-1px;
}

ul.menu1 li:hover ul li a, ul.menu1 li a:hover ul li a {
		height:2em; 
		color:#F9B2AE; 
		font-weight:normal;
}

ul.menu1 li:hover ul li:hover a, ul.menu1 li a:hover ul li a:hover {
		background:#FFF216; 
		color:#EF3E35;
}

.picture {
		margin:3px;
}

#content_start {
		margin: -280px 5px 0 195px;
}

#content_start p {
		font-size:10px;
		color:#000000;
		line-height:20px;
		font:Verdana, Arial, Helvetica, sans-serif;		
}

#content_start h1 {
		font-size: 15px;
		color:#EF3E35;
		text-align:right;
}

#content {
		margin: -480px 5px 0 370px;
		overflow:auto;
}

#content p {
		font-size:10px;
		color:#000000;
		line-height:20px;
		font:Verdana, Arial, Helvetica, sans-serif;
		margin-bottom: 6px;
}

#content h1 {
		font-size: 15px;
		color:#EF3E35;
		text-align:left;
}

#content h2 {
		font-size: 13px;
		color:#EF3E35;
		text-align:left;
		margin-bottom: 6px;
}

#content_pictuer {
		margin-left: 198px;
		margin-top:-280px;
		border: 0px;
		width: 166px;
		float:left;
}

#content_pictuer a:hover .info {
	padding: 0px;
	border: 1px solid;
	border-color:#F9B2AE;
	display: block;
	position: absolute;
	top: 200px;
	left:435px;
	z-index: auto;
}


#content_pictuer a .info {
	display:none;
}

#content_pictuer a {
		text-decoration:none;
		color:#000000;
		border: 0px;
}

#content_pictuer a:hover {
		color: #F9B2AE;
}

#content_pictuer a:visited {
		color: #F9B2AE;
}

#content ul {
		font-size:10px;
		color:#000000;
		line-height:20px;
		font:Verdana, Arial, Helvetica, sans-serif;		
		margin-left: 35px;
}

#content_produkt {
		font-size:10px;
		color:#000000;
		line-height:20px;
		font:Verdana, Arial, Helvetica, sans-serif;
		margin-bottom: 6px;
}

#content_produkt a:hover .info {
	padding: 0px;
	border: 1px solid;
	border-color:#F9B2AE;
	display: block;
	position: absolute;
	top: 200px;
	left:435px;
	z-index: auto;
}


#content_produkt a .info {
	display:none;
}

#content_produkt a {
		text-decoration:none;
		color:#000000;
		border: 0px;
}

#content_produkt a:hover {
		color: #F9B2AE;
}

#content_produkt a:visited {
		color: #F9B2AE;
}

#content_picture {
		margin-left: 198px;
		margin-top:-280px;
		border: 0px;
		width: 166px;
		float:left;
		color:#000000;
}

#content_picture a:hover .info {
	padding: 0px;
	display: block;
	position: absolute;
	top: 225px;
	left:435px;
	z-index: auto;
	width: 500px;
}


#content_picture a .info {
	display:none;
}

#content_picture a {
		text-decoration:none;
		color:#000000;
		border: 0px;
}

#content_picture a:hover {
		color: #F9B2AE;
}

#content_picture a:visited {
		color: #F9B2AE;
}

#content_picture h1 {
		font-size: 15px;
		color:#EF3E35;
		text-align:left;
}

#content_picture h2 {
		font-size: 13px;
		color:#EF3E35;
		text-align:left;
		margin-bottom: 6px;
}

content_picture p {
		font-size:10px;
		color:#000000;
		line-height:20px;
		font:Verdana, Arial, Helvetica, sans-serif;
		margin-bottom: 6px;
}

#content_start  .kontakt_lable {
	margin-left: 2.2em;
	padding: 1px;
	width: 100px;
}

#content_start .kontakt_field {
	width: 350px;
}

#content_start label {
         float:left;
         display:block;
		 width:160px;
		 /*position:relative;*/
}

http://www.mgloop.at/infrarotheizsysteme

Prinzipell war passt nicht:
Die Hoverbilder und die Position des "<div id="content_picture">"

Wer weiß, was ich falsch gemacht habe?

Mit der Bitte um Hilfe verbleibe ich mit

lg.

Napsi

Maik · 12. September 2008

Hi,

da hier niemand außer dir selbst weiß, was du wie in der vorherigen Seite konkret umgesetzt hast, können wir dazu auch keine Stellung nehmen.

Nach dem ersten Überfliegen der Seiten mit dem IE6, der wohl eher nicht wie gewünscht funktioniert, empfehle ich dir meinen Webmaster-FAQ-Artikel CSS IE6 rückt floatende Boxen zu weit ein - was tun?, da es in ihm doch sehr stark nach dem "Doubled Float-Margin Bug" aussieht.

mfg Maik

Security · 12. September 2008

Schreib mal bitte so, dass man es das nächste mal versteht, ich versuche ja jetzt immer braf alles zu lesen, aber dein Text ist naja unverständlich

Andere Sache, deine Navigation ist etwas schlecht, wenn man von oben nach untern fährt mit der Mouse kommt man nicht auf Kontakt

Außerdem sollten sich durch einen hover nie irgendwelche positionen verschieben, das sieht komsich aus.

Ansonsten schönes Design

LG John

//Edit

und der Background darf sich nicht wiederhohlen, das sieht seltsam aus, bei mehr text

Maik · 12. September 2008

So, nun hab ich Zeit gefunden, mir deine Seite mal etwas näher anzuschauen.

Als erste Maßnahme empfehle ich dir, in allen Projektseiten dafür zu sorgen, dass dieselbe ID #content_picture zum Einsatz kommt, und nicht zusätzlich eine ähnlich lautende ID mit dem Buchstabendreher #content_pictuer in den Dokumenten Einzug hält.

Diese ID mit allen folgenden Selektoren hab ich daher komplett aus dem Stylesheet entfernt und in den entsprechenden Seiten im DIV den ID-Bezeichner auf #content_picture umgestellt:

Code:

#content_pictuer {
		margin-left: 198px;
		margin-top:-280px;
		border: 0px;
		width: 166px;
		float:left;
}

#content_pictuer a:hover .info {
	padding: 0px;
	border: 1px solid;
	border-color:#F9B2AE;
	display: block;
	position: absolute;
	top: 200px;
	left:435px;
	z-index: auto;
}

#content_pictuer a .info {
	display:none;
}

#content_pictuer a {
		text-decoration:none;
		color:#000000;
		border: 0px;
}

#content_pictuer a:hover {
		color: #F9B2AE;
}

#content_pictuer a:visited {
		color: #F9B2AE;
}

In der Projektseite "technisches.asp" fehlt am Dokumentende das schliessende </div>-Tag zum DIV #pagewrap.

Kommen wir zum Kern des Problems, dem Stylesheet.

Wenn du alle drei Spaltenblöcke am linken Fensterrand (#menu1, #navi_line, #content_picture) mit float:left auszeichnest, sind keine extrem hohe negativen margin-top-Werte für #content_start und #content erforderlich, um sie unterhalb dieser drei Blöcke im Viewport nach oben zu hieven, und im Browserfenster an der gewünschten Position auszurichten.

Und auch hier würde ich mich auf einen einheitlichen ID-Bezeichner festlegen. Oder welchen Sinn und Zweck sollen die unterschiedlichen ID-Bezeichner für den Inhaltscontainer auf den Projektseiten erfüllen? Wenn diese Unterscheidung lediglich in der overflow:auto-Deklaration begründet liegt, kann diese auch als CSS-Klasse den entsprechenden #content-Boxen zugewiesen werden.

Okay, das hier sind nachfolgend meine überarbeiteten CSS-Regeln, mit denen ich in den gängigen Browsern ein einheitliches Erscheinungsbild erzielt habe.

Code:

#navi_line {
                background-image: url(../Img/style/red_back.gif);
                width: 3px;
                height: 280px;
                margin-top: 30px;
                /*margin-left:171px;*/ /* auskommentiert = deaktiviert */
                float:left;
}

#content_start {
                margin:30px 5px 0 190px;
}

#content { /* Für standardkonforme Browser */
                margin:0 5px 0 10px;
                overflow:auto;
}

* html #content { /* Für IE6 */
                margin:0 5px 0 370px;
}

#content_picture {
                margin-left:10px;
                margin-top:30px;
                border: 0px;
                width: 166px;
                float:left;
                color:#000000;
}

#content_picture a:hover {
                color: #F9B2AE;
                background:none; /* Hat für den IE6 gefehlt. damit er die CSS-Popups öffnet */
}

Alle von mir vorgenommenen Korrekturen habe ich in den folgenden Browsern erfolgreich überprüft:

FF 1.5.x, 2.x, 3.x
IE 5.x, 6, 7
Mozilla 1.8b
Netscape 9.x
Opera 9.5
Safari 3.0.4 (Win)
SeaMonkey 1.1.6

Eventuell erforderliche Positionskorrekturen in der Vertikalen für den Content-Block darfst du dann selbst in die Hand nehmen, sowie das Kontaktformular auf Vordermann bringen, da es in den standardkonformen Browsern bisweilen ziemlich zerschossen ausgerichtet wird. Diese Fehldarstellung ist aber schon "Status Quo" in der derzeitigen Online-Version.

mfg Maik

Css Ie7 - Ie6

napsi

Erfahrenes Mitglied

Maik

Security

Erfahrenes Mitglied

Maik

Neue Beiträge