✔ Content-Fetzen im IE6. hidden-element Problem?

joeboe · 15. November 2008

Hallo Liebe Leute.

Habe erneut Probleme mit meiner Seite. Im IE7 und FF läufts einfach super und ich war über beide Ohren am strahlen bis ich dann heute den IE6 testete.

Der haut mir in dieser Version: klick hier, unten noch Content-Fetzen hinzu.

hier der Code:
und hier die css dateien:

Code:

.highslide-html {
    background-color: white;
}
.highslide-html-blur {

}
.highslide-html-content {
	/* position: auto; */
  display: none;
}
.highslide-loading {
  display: block;
	color: black;
	font-size: 8pt;
	font-family: sans-serif;
	font-weight: bold;
  text-decoration: none;
	padding: 2px;
	border: 1px solid black;
  background-color: white;
    
    padding-left: 22px;
    background-image: url(..images/effect/graphics/loader.white.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
}


/* Styles for the popup */
.highslide-wrapper {
	background-color: white;
}
.highslide-wrapper .highslide-html-content {
    width: 540px;
    padding: 10px;
}
.highslide-wrapper .highslide-header div {
}
.highslide-wrapper .highslide-header ul {
	margin: 0;
	padding: 0;
	text-align: right;
}
.highslide-wrapper .highslide-header ul li {
	display: inline;
	padding-left: 1em;
}
.highslide-wrapper .highslide-header ul li.highslide-previous, .highslide-wrapper .highslide-header ul li.highslide-next {
	display: none;
}
.highslide-wrapper .highslide-header a {
	font-weight: normal;
	color: gray;
	text-transform: uppercase;
	text-decoration: none;
}
.highslide-wrapper .highslide-header a:hover {
	font-weight: normal;
	color: #ccc;
}
.highslide-wrapper .highslide-header .highslide-move a {
	cursor: move;
}
.highslide-wrapper .highslide-footer {
	height: 11px;
}
.highslide-wrapper .highslide-footer .highslide-resize {
	float: right;
	height: 11px;
	width: 11px;
}
.highslide-wrapper .highslide-body {
    font-family: Verdana, Helvetica;
    font-size: 11px;
	line-height:16px;
	}



/* These must be the last of the Highslide rules */
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}

Code:

body {
	background: #000;
	margin-top: 0px;
	margin-left: 0px;
}

p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #fff;
	font-weight: normal;
}

img {
	border: 0;
}

#container {
	width: 800px;
	margin: 0 auto;
}

#header {
	height: 317px;
}

#h01 {
	height: 49px;
	position: relative;
	background: #000;
}
 
#h01 ul {
	position: absolute;
	top: 15px;
  right:10px;
 	list-style-type: none;
 	margin: 0px;
 	padding: 0px;
}

#h01 li {
	margin-right: 10px;
	float: left;
}

#h01 .logo {
 	position: absolute;
 	top: 9px;
 	left: 0px;
}
 	
#h02_vh {
	position: relative;
	height: 240px;
	background-image: url(img/h02_vh.jpg);
}

#h02_of {
	position: relative;
	height: 240px;
	background-image: url(img/h02_of.jpg);
}

#h02_mc {
	position: relative;
	height: 240px;
	background-image: url(img/h02_mc.jpg);
}


#h03 {
	position: relative;
	height: 28px;
	background-image: url(img/h03_background.gif);
}

#h03 ul {
 	list-style-type: none;
 	margin: 0px;
 	padding: 0px;
 	position: absolute;
 	top: 1px;
}

#h03 ul li {
	float: left;
}

#h03 ul li a {
	display: block;	
	font-family: Arial, Verdana, sans-serif;
	font-size: 11px;
	color: #fff;
	padding-bottom: 6px;
	padding-top: 6px;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	width: 99px;
	border: solid 1px;
	border-color: #000;
	border-width:0 1px 0 0;
}

#h03 ul li a.last {
	width: 100px;
	border-style: none !important;
	border-width:0px;
}

#h03 ul li a.current {
	color: #000;
	background-image: url(img/h03_hover.gif);
}

#h03 ul li a:active {
	color: #000;
	background-image: url(img/h03_hover.gif);
}

#h03 ul li a:hover {
	color: #000;
	background-image: url(img/h03_hover.gif);
}

#h03 ul li:hover {
	color: #000;
background-image: url(img/h03_hover.gif); }

#h03 ul li ul {
	display: block;
	position: absolute;
	width: 172px;
	border: solid 1px;
	border-color: #ccc;
	border-width:0 1px 1px 1px;
	background: #70a9c6;
	top: 1em;
  left: -990px;
}
	

#h03 ul li ul li {
		clear: both;
}
	
#h03 ul li ul li a {

width: 150px;
padding-left: 22px;
text-align: left;
border: none;
border-top: solid 1px #ccc;
}

#h03 ul li ul li a:hover {
	background: #369;
}

#h03 ul li:hover ul { 
	left: auto;
	top: auto; 
}

#main {
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	float:left;
}

#main_left {
	padding-top: 50px;
	padding-left: 40px;
	padding-right: 40px;
	padding-bottom: 50px;
	width: 418px;
	min-height: 300px;
	float: left;
}

#main_left .space {
	margin-top: 50px;
}

#main_left .yaspace {
	margin-top: 20px;
}

#main_right {
	width: 300px;
	float: right;
	padding-top: 40px;
}

.main_prod {
	width: 260px;
	float:left;
	display:block;
	border-top: solid 1px #ccc;
	padding: 20px;
	background-image: url(img/bg_test.gif);
	background-repeat: repeat-x;
	margin-bottom: 10px;
}

.main_prod img {
	position: absolute;
	margin-left: 20px;
}

.main_prod h1 {

	margin: 0px;
	margin-bottom: 10px;
	float:left;
	font-family: Arial, Verdana, sans-serif;
	font-size: 11px;
	color: #fff;
	display: block;
	width: 160px;
}

.main_prod h2, h3 {
	font-family: Arial, Verdana, sans-serif;
	font-size: 11px;
	color: #fff;
	margin: 0px;
	margin-bottom: 5px;
}


 .main_prod p {
 	margin: 0px;
 	margin-bottom: 5px;
	display: block;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #fff;
	font-weight: normal;
	width: 160px;
	
}

.main_prod a {
	color: #369;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	
}

.main_prod a:hover {
	color: #ccc;
	text-decoration: none;
}

.main_prod ul {
	padding-left: 40px;
	margin: 0px;
	margin-bottom: 10px;
}

.main_prod ul li {
	list-style-type: none;
	list-style-image: url(img/pdf.gif);
	margin-left: 5px;
}

.main_block {
	width: 300px;
	float:left;
	display:block;
	margin-bottom: 10px;
}	



.main_block ul {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #fff;
 	list-style-type: none;
 	margin: 0px;
 	padding: 0px;
 	
}

.main_block ul li {
	float: left;
}


.main_block ul li a {
	display: block;	
	color: #fff;
	text-decoration: underline;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 5px;
	padding-bottom: 5px;
	/* background: #000; */
	border-left: solid 1px #000;
	border-top: solid 1px #000;
}

	
.main_block ul li a:hover {
	background: #00121c;
	color: #ccc;
}



#footer {
	height: 33px;
	background-image: url(img/bottom.gif);
}

auch wenn ich die hidden-elemente auskommentiere zeigt mir IE6 trotzdem noch kleinen Content-Müll an. klick hier

Maik · 15. November 2008

Hi,

die Ursache ist im Stylesheet effect.css zu suchen, denn als ich eben die Seite und die andere CSS-Datei default.css heruntergeladen, und die Seite zunächst ohne die erstgenannte CSS-Datei im IE6 geöffnet habe, wurde der Inhalt vollständig angezeigt.

Code:

.highslide-html-content {
        /* position: auto; */
  display: none;
}

Das Auskommentieren der rotmarkierten Deklaration bewirkt wahre Wunder im IE6.

Wo hast du eigentlich den vermeintlichen position-Wert auto ausgegraben?

Laut CSS2-Spezifikation stehen hier nur folgende Werte zur Auswahl:

static
relative
absolute
fixed
inherit

mfg Maik

joeboe · 15. November 2008

aber wenn ich doch das display: none; auskommentiere wird das element ja nicht als hidden-element angezeigt!?

ich steh am schlauch, das Skript hab ich vom Auftraggeber erhalten weil er so tolle flug effekte will.

das position: auto hab ich auskommentiert weil es das nicht gibt

Maik · 15. November 2008

Ich kann dir nur sagen, was ich festgestellt habe. Inwiefern sich meine Beobachtungen mit dem angedachten Seitenkonzept vereinbaren lassen, kann ich dir nicht sagen, da ich es nicht entwickelt habe. ;-)

So, ich bin dann erstmal offline, mein Magen fängt wie ein Wolf zu knurren an :suspekt:

mfg Maik

joeboe · 16. November 2008

So ich habe den übeltäter gefunden: Ich habe ganz einfach ein clear:both am ende vergessen.

Habe mich dennoch von dem CSS des Auftraggebers getrennt und erstelle den Style des Pop-Up Fensters nun selber. Das Javascript funktioniert ja einwandfrei. Danke für Deine Mühe!

✔ Content-Fetzen im IE6. hidden-element Problem?

joeboe

Mitglied

Maik

joeboe

Mitglied

Maik

joeboe

Mitglied

Neue Beiträge