Forum

[morpher]

Hi Leute!

Ich habe mir das Demo-Template angepasst und im Firefox, IE7 und Safari passt auch alles. Im IE 6 wird es aber komplett zerschossen. Wer kennt sich mit IE 6 aus und könnte mir evtl. weiterhelfen?

Danke,

morpher

[morpher]

hier noch mein CSS:

Code: Alles auswählen

/*******************************************************************************

   Project      :   Redaxo Demo
   Copyright   :   Design - hundertmorgen - www.hundertmorgen.de

*******************************************************************************/



/*   Navigation vertical -
   Wenn nur die Navigation mit der ID 3 verwendet wird, kann alles bis
   zum nächsten Kommentar gelöscht werden
-------------------------------------------------------------------------------*/
/* ### Header Navigation ##################################################### */

#navheight_horiz_vert {
   min-height: 153px;
   margin: 20px 0;
}
* html body #navheight_horiz_vert { height: 153px; } /* IE 6 / 5.5 Hack */

#navheight_horiz_vert ul.nav1st { padding:0px 20px; }


#nav-header {
   font-size: 1.3em;
}


#nav-header li {
   display:inline;
   /*border-left: 1px solid #aaa;*/
}

#nav-header a,
#nav-header a:link {
   color:#00aeef;
   text-decoration: none;
   font-weight: bold;
   text-transform: uppercase;
   background-color: inherit;
   padding: 0 8px;
}

#nav-header a:hover {
   color:#ec008c;
   background-color: inherit;
   padding: 0 8px;
}

#nav-header a.current,
#nav-header a.current:link {
   color:#ec008c;
   background-color: inherit;
   padding: 0 8px;
}

#nav-header a.current:hover {
   color:#ec008c;
   background-color: inherit;
   padding: 0 8px;
}


/* ### Sub Navigation ######################################################### */

#nav {
   display:block;
   float:left;
   width:300px;
   height:425px;
   background:url(bg_nav.jpg) repeat-y;
}

#nav p.copy,
#nav p {
   padding-right:20px;
   color:#fff;
   background: inherit;
   text-align: right;
}


#nav p.copy a,
#nav p.copy a:link {
   color: #fff;
   background: inherit;
   text-decoration: none;
}

#nav p.copy a:hover {
   color: #fff;
   background: inherit;
   text-decoration: underline;
}

/*   Navigation horizontal and vertical -
   Wenn nur die Navigation mit der ID 2 verwendet wird, kann alles bis
   zum nächsten Kommentar gelöscht werden
-------------------------------------------------------------------------------*/

#navheight_vert {
   min-height: 425px;
}
* html body #navheight_vert { height: 425px; } /* IE 6 / 5.5 Hack */

#navheight_vert ul.nav1st { padding:10px 20px;  }


/* ### nav1st - first level navigation ######################################## */

ul.nav1st {
   padding:0px 20px;
   font-size:1.2em;
   text-transform:uppercase;
}

ul.nav1st li {
   display: block;
   padding:3px 0;
   color:#00aeef;
   background: inherit;
   font-weight:bold;
   text-align: right;
}

ul.nav1st a,
ul.nav1st a:link {
   display: block;
   color:#00aeef;
   background: inherit;
   padding: 1px 0;
}

ul.nav1st a:hover {
   color:#fff;
   background: inherit;
   padding: 1px 0;
}

ul.nav1st li a.current,
ul.nav1st li a.current:link {
   color:#fff;
   background: inherit;
   padding: 1px 0;
}

ul.nav1st li a.current:hover {
   color:#fff;
   background: inherit;
   padding: 1px 0;
}


/* ### nav2nd - second level navigation ######################################### */

ul.nav2nd {
   margin: 0 0 10px 0;
   font-size:1em;
   font-weight:normal;
   text-transform:none;
}

ul.nav2nd li {
   padding:0;
   margin:0;
   font-weight:normal;
   border:none;
   text-align: right;
}

ul.nav2nd a,
ul.nav2nd a:link {
   display:block;
   padding:4px 17px 4px 10px;
   background-image:url(button.gif);
   background-position:158px 8px;
   background-repeat: no-repeat;
}


ul.nav2nd a:hover {
   padding:4px 17px 4px 10px;
   background-image:url(button.gif);
   background-position:158px -12px;
   background-repeat: no-repeat;
   background-color:#c4d4dc;
   color:#00aeef;
}

ul.nav2nd li.active a,
ul.nav2nd li.active a:link {
   padding:4px 17px 4px 10px;
   background-image:url(button.gif);
   background-position:158px -32px;
   background-repeat: no-repeat;
   background-color:#c4d4dc;
   color:#00aeef;
}


/* ### Breadcrump Navigation #################################################### */

#sitePath {
   float:left;
   padding-left:20px;
   color:#c4d4dc;
   background: inherit;
}

#sitePath a, #sitePath a:link {
   color:#c4d4dc;
   background: inherit;
   text-transform:none;
}


[Richard.Laing]

hi
mit einer url wäre hier schon mal geholfen, damit man weiss was nicht stimmt.
gruß richy

[morpher]

www.jamie-s.com

[Richard.Laing]

hi
das ist dach schon besser
sollte ein padding problem sein und das bild im oberen berecih könnte etwas zu brait sein.
ich schaue aber nochmal genau nach und melde mich umgehend.
gruß richy

[morpher]

vielen Dank schon einmal

[Richard.Laing]

hi
sodele

schau mal in deine navigation.css zeile 67 zum indest bei mir

Code: Alles auswählen

#nav {
   display:block;
   float:left;
   width:295px;
   height:425px;
   background:url(bg_nav.jpg) repeat-y;
}


da ist die breite zu hoch width:295px; mach das mal etwas weniger denke mal 5 also auf 290px

und in der default.css das menue anpassen bitte hier eine breite vergeben.

Code: Alles auswählen

#nav-header {
   position:absolute;
   left:302px;
   top:300px;
}


z.b width: 600px;

dann sieht es schon mal passender aus.
habe leider nicht die zeit um alles zu kontrollieren.

gruß richy

[morpher]

das mit der default.css hat schon mal dafür gesorgt, dass die Navi in einer Reihe sitzt.

Wenn ich in der navigation.css die width verkleinere, dann passt die Logo-Grafik nicht mehr rein, die oben links sitzt (sieht dann auch in den anderen Browsern nicht mehr so gut aus.

[Richard.Laing]

eins davon wirst du aber ändern müßen, das es sonnst nicht passt. du kannst ja auch den border links rechts weg machen und den diirekt ins bild machen. also nicht per css dann sollte es auch passen.

gruß richy

[morpher]

oki- dann werde ich das mal ausprobieren

[Richard.Laing]

jup wenn es nicht klappt einfach nochmal melden.
gruß richy

[mow]

hallo zusammen,

so kann das rumprobieren beschleunigt werden:
1. alle ie-hacks aus dem css entfernen.
2. folgendes skript im headbereich einsetzen:

Code: Alles auswählen

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

näheres dazu unter http://code.google.com/p/ie7-js/
mit diesem skript ist man (fast) alle sorgen mit ie los.
und dann natürlich validieren: http://validator.w3.org!
im moment sind noch viele fehler in deinem code vorhanden. ist dieser bereinigt, kann das css überprüft werden.

grüsse
mow

[TiCar]

Hi,

hab das hier gerade über die Suche gefunden und find es sehr interessant und hab es gleich getestet.

Ein paar Dinge hauen allerdings immer noch nicht ganz hin und vielleicht kann mir da jemand sagen wo der Knackpunkt zwischen IE6/IE7 und Firefox liegen.

Es geht um diese Page: http://www.vmax.de/ticar
Achtung Startseite hat ein anders Template und den obigen Link von google integriert. Alle weiteren Seiten greifen auf das Default Template zu, sind ohne diesen google Link, allerdings auch noch nicht durch den Validator gejagt.

In dem Zuge: Kann es sein dass der IE6/IE7 nicht mit negativen magin zurecht kommt?

Da ich unter Ubuntu arbeite und die Seiten erstelle, tue ich mich immer wieder schwer meine Seiten auf IE6, IE7 zu prüfen. Gibt es hierfür eine Lösung? Bzw. gibt es eine Möglichkeit IE6 und IE7 parallel zu installieren, da ich momentan unter MacOS X Prallels XP installiert habe, damit ich überhaupt was prüfen kann :-/

PS: Per Google habe ich den Link gefunden: IEs4Linux

[shoq]

Mit negativen Margins hatte ich im IE bisher auch nur Probleme. Sollte aber kein Problem sein, die Seite so aufzubauen, dass du ohne diese auskommst. Bei DIVs in denen du ein Padding benötigst ist es sinnvoll ein inneres und ein äußeres DIV zu erstellen. Dem äußeren gibst du nur ein float und die Breite mit und im inneren stellst du dann das Padding usw. ein.

Zum testen der Site in den verschiedenen Browsern kann ich dir www.browsershots.org empfehlen.

Gruß shoq

[TiCar]

Hi,

hab jetzt Weg 2 gewählt und die Eingabe dem User überlassen. Muss er halt etwas darauf achten, dess er CTYPE[2] mit den gleichen Daten füllt wie CTYPE[3]