✔ CSS per Javascript löschen und hinzufügen bzw. ändern

G

Ghost123

Grünschnabel
Hallo!
Ich verzweifle langsam. Ich habe eine normale CSS Deklaration:
Code: 
#HeadContainer			{ background-image: url('images/header.png'); background-repeat: no-repeat; width:100%; height: 500px; margin-top: 57px; margin-left:auto; margin-right: auto; background-position: center; }
Nun geht dies aber überhaupt nicht im IE und setzt es zuweit nach unten. Mit dem Entwicklertool vom IE habe ich es durchprobiert und nur im IE(Opera, Firefox, Chrome funktionieren) ist der ganze DIV sage und schreibe 74px falsch. Das margin-top müsste also nur beim IE
Code: 
margin-top: -17px;
heißen. Nun habe ich es mittels Javascript(Sorry lerne es derzeit erst) so probiert:
Code: 
<SCRIPT Language="JavaScript">
if (navigator.appName.indexOf("Internet Explorer") != -1)
{
document.all.HeadContainer.style.setAttribute("margin-top", "-17px", false);
}
</script>
Hier die Beschreibung(SelfHTML). Das DIV trägt den Namen "HeadContainer".
Ich hoffe ihr könnt mir helfen und evtl. kennt jemand von euch ja sogar noch einen anderen Weg.

Mfg
 
Hi,

wie wäre es denn mit Alternative CSS-Dateien für den Internet Explorer (Conditional Comments)?

HTML: 
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style_ie.css">
<![endif]-->
style_ie.css
CSS: 
#HeadContainer { margin-top:-17px; }

Funktioniert auch, falls aus Sicherheitsgründen, oder wegen administrativer Direktiven Javascript im IE des Seitenbesuchers deaktiviert sein sollte.

mfg Maik
 
Guten Abend,
das Problem liegt darin, dass ich keinen Zugang zum <head> Container habe. Dieser ist per Ioncube verschlüsselt. Deshalb brauche ich eine andere Lösung als Lösungen im <head> Container.

Mfg
 
Dann verlagerst du den Conditional Comment eben in den <body></body>-Bereich, wo du das Script dann wohl auch eingebunden hättest.

mfg Maik
 
Gibt es keine anderen Möglichkeiten als andere CSS Files?
Per JS mit dem oben geposteten Code kommt übrigens im IE die Fehlermeldung:
Code: 
Details zum Fehler auf der Webseite

Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Win64; x64; Trident/4.0; .NET CLR 2.0.50727; SLCC2; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Tablet PC 2.0)
Zeitstempel: Tue, 22 Jun 2010 21:11:47 UTC


Meldung: 'document.all.HeadContainer.style' ist Null oder kein Objekt
Zeile: 39
Zeichen: 1
Code: 0
Dieser Code funktioniert anscheinend nur deshalb nicht. Wie soll das richtig sein? Bei SelfHTML findet man nichts weiter als dies.
 
Du hast doch eingangs nach einem anderen möglichen Lösungsweg gefragt :rolleyes:

Der Fehlermeldung zufolge hast du das Script wohl an der falschen Stelle des HTML-Codes eingebunden, wo das Element mit der ID beim Seitenaufruf noch nicht bekannt ist.

Binde es daher mal am Dokumentende vor </body> ein.

mfg Maik
 
Gut ist jetzt am Ende aber wird nicht ausgeführt.
Im Entwicklertool vom IE steht immernoch "MARGIN-TOP: 57px". Merkwürdig ist auch, dass er es in der Zeile hier schreibt:
Code: 
background-image : url(images/header.png); MARGIN-TOP: 57px
So schreibt der das. Normalerweise müsste er es ja nicht in einer Zeile sondern in 2 machen, tut er aber nicht.
 
Moin,

in Javascript heißt zudem die Eigenschaft marginTop, und nicht margin-top - siehe hierzu die Übersicht der Style-Eigenschaften.

Und wenn du die Box um 17px nach oben verrücken willst, mußt du 57px - 17px = 40px deklarieren.

Mit diesem Code am Ende des Dokumentkörpers funktioniert bei mir die Korrektur des oberen Außenabstandes tadellos:
HTML: 
<script type="text/javascript">
if (navigator.appName.indexOf("Internet Explorer") != -1)
{
document.all.HeadContainer.style.setAttribute("marginTop", "40px", false);
}
</script>


Wenngleich ich aus deinem Codeschnipsel den Zusammenhang überhaupt nicht nachvollziehen kann, warum IE8 den DIV-Block tiefer ausrichtet, wie die anderen Browser, denn normalerweise verhält er sich so nicht.

mfg Maik
 
Moin,
ich hab es jetzt ein wenig anders gemacht nämlich Extra-DIVs erstellt für den IE mittels JS:
Code: 
<SCRIPT Language="JavaScript">
if (navigator.appName.indexOf("Internet Explorer") != -1)
{
	document.write('<div id="HeadContainerIE" align="center">');
	document.write('<div id="mainmenuIE">');
}
else
{
	document.write('<div id="HeadContainer" align="center">');
	document.write('<div id="mainmenu">');
}
</script>
So funktioniert das ohne Probleme.
Vielen Dank trotzdem für eure Hilfe ;)

Mfg
 
Jo, mit meinem gezeigten Script funktioniert's auch problemlos :p Aber viele Wege führen nach Rom ;-)

Wenn deine Frage damit beatwortet ist, markiere das Thema bitte abschließend als erledigt.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück