IE-Darstellung von Samtpfötchen

[vagabund62]

Hab ja für meine Samtpfötchen-Seite nen neues Design gemacht und unter funzt auch alles. Nur beim IE nicht. Der haut alles durcheinander, das Design steht nicht mittig sondern links und das Klappdesign funzt auch nicht.

Hier mal die IE-Darstellung:

Hier mal die FF-Darstellung:

Anbei mal meine CSS-Datei: [spoiler]

Code: Alles auswählen

body {
        margin:0;
        background-color: #F6F6F6;
        padding:0px;
        min-height:100%;
        background-image:url(http://file1.npage.de/005412/19/bilder/katzenstreu_mini.gif);
        background-repeat:repeat;
        
}

#all        {
        width:795px;
        height:100%;
        padding: 10px;
        margin:0 auto;
}
#mitte        {
        margin: 0 auto;
        width:795px;
        background-color: #F6F6F6;
        text-align:justify;
        border-right:solid 1px #3f3f3f;
        border-left:solid 1px #3f3f3f;
}
/* menue oben */

.menu {
        width:100%;
        height:32px;
        background-color:black;
        position:relative;
        z-index:100;
}
.menu ul li a, .menu ul li a:visited {
        display:block;
        text-decoration:none;
        color:#808080;
        background-color:#000;
        font-family:verdana, sans-serif;
        font-size: 86%;
        font-variant:normal;
        overflow:hidden;
        width: 155px;
        margin:0 1px;
        border:solid 1px #353535;
        line-height:30px;
        text-align:center;
        background-image:url(http://file1.npage.de/005412/19/bilder/ob_k.jpg);
}
.menu ul {
        padding:0;
        margin:0 auto;
        list-style: none;
}
.menu ul li {
        float:left;
        position:relative;
}
.menu ul li ul {
        display: none;
}

/* specific to non IE browsers */
.menu ul li:hover a {
        background-color:#282828;
        color:#fff;
        text-decoration:none ;
        border:solid 1px #7C7C7C;
        background-image:url(http://file1.npage.de/005412/19/bilder/mover_k.jpg);
}
.menu ul li:hover ul {
        display:block;
        position:absolute;
        top:31px;
        left:0;
        width:105px;
}
.menu ul li:hover ul li a.hide {
        background:#6a3;
        color:#fff;
}
.menu ul li:hover ul li:hover a.hide {
        background:#6fc;
        color:#000;
}
.menu ul li:hover ul li ul {
        display: none;
}
.menu ul li:hover ul li a {
        display:block;
        background:#282828;
        color:#808080;
        border:solid 1px #353535;
        line-height:30px;
        background-image:url(http://file1.npage.de/005412/19/bilder/ob_k.jpg);
}
.menu ul li:hover ul li a:hover {
        background-color:#282828;
        color:#fff;
        text-decoration:none ;
        border:solid 1px #7C7C7C;
}
/*
.menu2 a, .menu2 a:visited , .menu2 a:active {display: block;
color:#808080;
background-color:#000;
text-decoration:none ;font-family:verdana, sans-serif; font-size: 86%;
padding-left: 0px; padding-bottom: 0px; padding-top:0px;
margin-left: 1px;margin-right: 1px;
border:solid 1px #353535;
line-height:30px;
text-align:center;

background-image:url(http://file1.npage.de/005412/19/bilder/ob_k.jpg);
}

.menu2 a:hover {background-color:#282828;color:#fff; text-decoration:none ;border:solid 1px #7C7C7C;

background-image:url(http://file1.npage.de/005412/19/bilder/mover_k.jpg);
}
*/
#menu3        {
        width:100%;
        height:32px;
        background-color:black;
}
#menu3 a, #menu3 a:visited , #menu3 a:active {
        float:left;
        display:block;
        width:154px;
        font-family:verdana, sans-serif;
        font-size: 86%;
        padding-left: 0px;
        padding-bottom: 0px;
        padding-top:0px;
        margin: 0 1px;
        line-height:30px;
        text-align:center;
        text-decoration:none ;
        color:#808080;
        background-color:#000;
        border:solid 1px #353535;
        background-image:url(http://file1.npage.de/005412/19/bilder/ob_k.jpg);
}
#menu3 a:hover {
        float:left;
        display:block;
        width:154px;
        font-family:verdana, sans-serif;
        font-size: 86%;
        padding-left: 0px;
        padding-bottom: 0px;
        padding-top:0px;
        margin: 0 1px;
        line-height:30px;
        text-align:center;
        text-decoration:none ;
        background-color:#282828;
        color:#fff;
        border:solid 1px #7C7C7C;
        background-image:url(http://file1.npage.de/005412/19/bilder/mover_k.jpg);
}






h2        {
        padding:0 20px;
        color:#555555;
        margin-bottom:20px;
        letter-spacing:2px;
        font-family: "Trebuchet MS",arial, helvetica, verdana, tahoma, sans-serif;
        font-size: 125%;
}


/* hauptger�st */

#li {
        width:40px;
        height:1px;
/*        height:100%;
        background-image:url(http://file1.npage.de/005412/19/bilder/rand.gif) ;
        background-repeat:repeat-y;
        border-right:solid 1px #3f3f3f;border-left:solid 0px #000;*/
}


#re {
        width:40px;
        height:1px;
/*        height:100%;
        background-image:url(http://file1.npage.de/005412/19/bilder/rand.gif);
        background-repeat:repeat-y;
        border-left:solid 1px #3F3F3F;border-right:solid 0px #000;*/
}

#top {
        background-image:url(http://file1.npage.de/005412/19/bilder/samtpfoetchenheader_1.jpg);
        background-repeat:repeat-y;
        vertical-align:middle;
        text-align:center;
        height:292px;
        background-color:#1F1F1F;
        border-bottom:solid 1px #535353;
        border-top:solid 1px #161616;
}

#leistetop {
        background-color:#000;
        height:40px;
        width:795px;
        border-bottom:solid 1px #3F3F3F;
        border-top:solid 1px #000;
        background-image:url(http://file1.npage.de/005412/19/bilder/leiste_k.jpg);
        background-repeat:repeat-x;
}
.leistetop        {
        line-height:40px;
        letter-spacing:10px;
        color:#000;
        font-variant:small-caps;
        margin-left:10px;
        margin-bottom:1px;
        vertical-align:bottom;
        font-family: georgia,arial, helvetica, tahoma ,verdana,  sans-serif;
}
#leiste1 {background-color:#000;
height:34px;
letter-spacing:0px;
color:#56686D;
font-variant:small-caps;
padding-left:0px;
padding-bottom:0px;
width:100%;
vertical-align:middle;
border-bottom:solid 1px #535353;
border-top:solid 1px #000;
border-bottom:solid 0px #000;
font-family: georgia,arial, helvetica, tahoma ,verdana,  sans-serif;
text-align:center;
}
#leiste2 {height:0px;

background-color:#000;
height:34px;
letter-spacing:0px;
color:#56686D;
font-variant:small-caps;
padding-left:0px;
padding-bottom:0px;
width:100%;
vertical-align:middle;border-bottom:solid 1px #535353;
border-top:solid 1px #000;
border-bottom:solid 0px #000;
font-family: georgia,arial, helvetica, tahoma ,verdana,  sans-serif;
text-align:center;
}



#sp1 {color:#fff;font: normal 11px/15px verdana, sans-serif; padding-left: 0px;padding-right:0px;padding-top: 0px;
background-color:#0c0c0c;
border-right:solid 1px #313131;

}

#content {
        width:795px;
        padding: 30px 0;
        background-color:#0c0c0c;
        background-image:url(http://file1.npage.de/005412/19/bilder/leiste_k.jpg);
        background-repeat:repeat-x;
}
.sp2        {
        display:block;
        padding:0 20px;
        color:#808080;
        letter-spacing:0px;
        font-size: 94%;
        line-height: 125%;
}

#fussb {
        font: normal 11px verdana, sans-serif;
        color: #6F6F6F;
        line-height: 24px;
        height:24px;
        text-align:center;
        background-color:#121212;
        width:100%;
        border-top:solid 1px #343434;
        background-image:url(http://file1.npage.de/005412/19/bilder/ob_k.jpg);
        background-repeat:repeat-x;

}
/* scrolleiste internet explorer ab vers.5.5 */




/* menue  */

#menu1 a , #menu1 a:visited , #menu1 a:active {display:block;
background-color:#0c0c0c;
color:#808080;
text-decoration:none ;
text-align:center;
width:200px;
font-size: 86%;line-height: 28px;
font-family: verdana,"Trebuchet MS",arial, helvetica, verdana, tahoma, sans-serif;
margin:0px;
border-top:solid 1px #0c0c0c;
border-bottom:solid 1px #000;

}

#menu1 a:hover{
background-color:#000;
color:#fff;
text-decoration:none ;
border-top:solid 1px #1f1f1f;
border-bottom:solid 1px #1F1F1F;}

/* allgemeine links im text */

a:link, a:visited, a:active{ font-family: arial, helvetica, tahoma ,verdana,  sans-serif;
font-size: 97%;line-height: 125%;
text-decoration:underline;color:#555555;}

a:hover{ text-decoration:none;background-color:#555555;
color:#fff;}

[/spoiler]

Was kann man da machen?/Was hab ich falsch gemacht?

Gruß Jörg

[Jasko]

Nun zu erst hast du mal nichts falsch gemacht. Der IE ist nun mal etwas eigensinig.

Aber es kommt auch oft darauf an welche IE Version du nutzt um deine Seite anzuschauen.

Generel kann man dagegen etwas machen, mann kann einene eigenen Stylesheet (CSS) für den IE machen, der wird dann eingessetzt wenn die Seite mit dem IE betrachtet wird.

Das ganze wird dan so eingefühgt, dabei muss der eigentliche Stylesheet zu erst eingesetzt werden dann der für den IE:

Code: Alles auswählen

<link rel="stylesheet" href="style.css" type="text/css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style_ie.css" />
<![endif]-->

MFG

[vagabund62]

Habe ich gemacht, hatte aber keine Auswirkungen.

Code: Alles auswählen

<link rel="stylesheet" href="http://file1.npage.de/005412/19/html/format_k33.css" type="text/css" />
<!--[if lte IE 5.5]>
<link rel="stylesheet" media="all" type="text/css" href="http://file1.npage.de/005412/19/html/ie_format4.css" />
<![endif]-->

Habe den IE 9 installiert. Muß aber dazu sagen das dieses Design von mir heruntergeladen und danach angepasst wurde, obwohl ich mich in CSS nicht auskenne. Hatte auch ne extra IE-CSS, die ich auch anpasste... Hab schon alles ausprobiert finde aber den Fehler nicht...
Original IE-CSS

[spoiler]

Code: Alles auswählen

body
{scrollbar-arrow-color: #0e0e0e; scrollbar-base-color: #f3f3f3;
scrollbar-highlight-color : #969696; scrollbar-shadow-color : #ffffff;
SCROLLBAR-TRACK-COLOR: #D6D6D6;}

.menu ul li a.hide, .menu ul li a:visited.hide {
	display:none;
}
.menu ul li a:hover ul li a.hide {
	display:none;
}
,menu2 ul li a,  .menu ul li a:visited{
	float:left;
	display:block;
	width:152px;
	font-family:verdana, sans-serif;
	font-size: 86%;
	padding-left: 0px;
	padding-bottom: 0px;
	padding-top:0px;
	margin: 0 1px;
	line-height:30px;
	text-align:center;
	text-decoration:none ;
	color:#808080;
	background-color:#000;
	border:solid 1px #353535;
	background-image:url(http://file1.npage.de/005412/19/bilder/ob_k.jpg);
}
.menu ul li a:hover {
	background-color:#282828;
	color:#fff;
	text-decoration:none ;
	border:solid 1px #7C7C7C;
	background-image: url(http://file1.npage.de/005412/19/bilder/mover_k.jpg);
}
.menu ul li a:hover ul {
	display:block;
	position:absolute;
	top:37px;
	left:0;
	width:153px;
}
.menu ul li a:hover ul li a {
	display:block;
	background:#282828;
	color:#808080;
	border:solid 1px #353535;
	line-height:30px;
	background-image:url(http://file1.npage.de/005412/19/bilder/ob_k.jpg);
}
.menu ul li a:hover ul li a ul {
	visibility:hidden;
}
.menu ul li a:hover ul li a:hover {
	background-color:#282828;
	color:#fff;
	text-decoration:none ;
	border:solid 1px #7C7C7C;
}
.menu ul li a:hover ul li a:hover ul {
	visibility:visible;
	position:absolute;
	left:105px;
	top:0;
	color:#000;
}
.menu ul li a:hover ul li a:hover ul.left {
	left:-105px;
}
 

[/spoiler]

Und hier mal zum Vergleich die angepasste IE-CSS
[spoiler]

Code: Alles auswählen

body
{scrollbar-arrow-color: #0e0e0e; scrollbar-base-color: #f3f3f3;
scrollbar-highlight-color : #969696; scrollbar-shadow-color : #ffffff;
SCROLLBAR-TRACK-COLOR: #D6D6D6;
margin:0;
background-color: #F6F6F6;
padding:0px;
min-height:100%;
background-image:url(http://file1.npage.de/005412/19/bilder/katzenstreu_mini.gif);
background-repeat:repeat;

}

.menu ul li a.hide, .menu ul li a:visited.hide {
	display:none;
}
.menu ul li a:hover ul li a.hide {
	display:none;
}

.menu2 ul li a,  .menu ul li a:visited
	{
	float:left;
	display:block;
	width:155px;
	font-family:verdana, sans-serif;
	font-size: 86%;
	padding-left: 0px;
	padding-bottom: 0px;
	padding-top:0px;
	margin: 0 1px;
	line-height:30px;
	text-align:center;
	text-decoration:none ;
	color:#808080;
	background-color:#000;
	border:solid 1px #353535;
	background-image:url(http://file1.npage.de/005412/19/bilder/ob_k.jpg);
}

.menu ul li a:hover {
	background-color:#282828;
	color:#fff;
	text-decoration:none ;
	border:solid 1px #7C7C7C;
	background-image: url(http://file1.npage.de/005412/19/bilder/mover_k.jpg);
}
.menu ul li a:hover ul {
	display:block;
	position:absolute;
	top:31px;
	left:0;
	width:105px;
}
.menu ul li a:hover ul li a {
	display:block;
	background:#282828;
	color:#808080;
	border:solid 1px #353535;
	line-height:30px;
	background-image:url(http://file1.npage.de/005412/19/bilder/ob_k.jpg);
}
.menu ul li a:hover ul li a ul {
	visibility:hidden;
}
.menu ul li a:hover ul li a:hover {
	background-color:#282828;
	color:#fff;
	text-decoration:none ;
	border:solid 1px #7C7C7C;
}
.menu ul li a:hover ul li a:hover ul {
	visibility:visible;
	position:absolute;
	left:105px;
	top:0;
	color:#000;
}
.menu ul li a:hover ul li a:hover ul.left {
	left:-105px;

[/spoiler]

Gruß Jörg

[Jasko]

Nun du musst die Sachen in der IE CSS Anpassen die nicht so aussehen wie sie aussehen sollen, sprich die menu Elemente verkürtzen von 105 pixeln, auf z.B. 100px, das bringt schon was. Und dan natürlich Baustelle für Baustelle abarbeiten.

[Stephan]

Moin vagabund62,

ist diese Seite schon Online, wenn ja schreibe mal bitte den Link, damit ich sie mal ansehen kann und wa die CSS für den IE dabei oder voher hast du Sie (normal braucht man keine extra CSS für den IE)

grüße aus hamburg

stephan

[vagabund62]

Hi Stephan, ja die Seite ist online. Brauchst nur auf diesen Banner klicken... Die IE-CSS war beim Download schon mit bei...(hab da momentan nur die Bilder eingefügt...). Allerdings hab ich in der normalen Format-Css Datei(die bei den anderen Browsern funzt) einiges rausgenommen wie z.B. ein Menue...

Gruß Jörg

[Jasko]

Hast Du was hingekriegt?

[vagabund62]

Leider nicht... Hab es stundenlang probiert, aber i-wie wollte nichts klappen... Weis mir echt keinen Rat mehr... :JJ

Gruß Jörg

[Stephan]

Also habe mal deine jetzige Seite in den Internet Browser K-Meleon angesehen und die Navigation steht dort wo sie sein soll, welches Problem hast du genau mit der Navigation oder mit dem Design?
Brauche klein bisschen mehr Info, damit ich helfen kann. (ich kenne dieses Design und Tücken mit der Ausrichtung der Navi usw.)
Grüße aus Hamburg
Stephan

[vagabund62]

Also den Melon-Browser kenn ich nicht. Schön das da alles funzt, aber mir wurde gesagt das bei dem Browser Avant es nicht funktioniert, genau wie beim IE. Dort steht 1. die Seite nicht in der Mitte, sondern am linken Bildschirmrand und das Klappmenue sieht so aus wie in meinem ersten Beitrag bereits dargestellt(geht nicht über die volle Breite, am rechten Rand erscheint ein weißer Streifen, steht teilweise untereinander und es funktioniert nicht. Das einzige was passiert das die Schriftfarbe sich ändert und der Menue-Button sich beim draufklicken verkleinert wie hier:



Gruß Jörg