Autor |
Nachricht |
EmThSt
Threadersteller
Dabei seit: 13.03.2014
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 13.03.2014 11:46
Titel Browserkompatibilität |
|
|
Hallo zusammen!
Ich habe folgendes Problem:
3 divs (head, content und footer). Der mittlere div (content) hat nach oben und unten einen box-shadow.
Damit er sowohl über dem Head als auch über dem Footer liegt, habe ich es wie folgt gemacht:
HTML:
<div id="schatten">
<div id="content_bg">
TEXT TEXT TEXT
</div>
</div>
CSS:
#schatten{
position: relative;
margin: -50px 0px -50px 0px;
padding: 50px 0px 50px 0px;
overflow: hidden;
}
#content_bg{
width:100%;
height:auto;
min-height:730px;
background-image:url(../bilder/bg_content.jpg);
background-repeat:repeat;
-webkit-box-shadow: 1px 1px 50px 0px rgba(19, 19, 19, 1);
-moz-box-shadow: 1px 1px 50px 0px rgba(19, 19, 19, 1);
box-shadow: 1px 1px 50px 0px rgba(19, 19, 19, 1);
border-bottom:2px solid #505050;
}
Im Chrome läuft alles einwandfrei, allerdings ist der Content im IE und im firefox komplett nach rechts verschoben.
Zusatz Info: Alles was in den 3 divs liegt hat noch eine Klassse "rahmen", damit sie mittig vom Bildschirm platziert sind, da alle divs durchgehende bg-img haben und auf width:100% festgelegt sind.
Kann mir einer sagen, was ich machen kann damit es im IE und firefox auch funktioniert?
Ich habe es bereits mit Conditional Comments an allen möglichen Stellen versucht
(z.Z. hier
<body>
<!--[if IE]>
<link type="text/css" rel="stylesheet" href="css/ie.css" />
<![endif]-->
<div id="head">
) aber es klappt nichts :/
Ich hoffe, einer von euch kann mir helfen!
Vielen Dank schon mal!
|
|
|
|
|
JanG
Dabei seit: 13.10.2002
Ort: Köln/Düsseldorf
Alter: -
Geschlecht:
|
Verfasst Do 13.03.2014 12:04
Titel
|
|
|
Conditional Comments gehören die nicht in den Head?
Aber egal, ein Link zur Testseite wäre für manche (nicht für alle hier) besser,
um sich das Problem selbst ansehen zu können.
Peaze!
|
|
|
|
|
Anzeige
|
|
|
EmThSt
Threadersteller
Dabei seit: 13.03.2014
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 13.03.2014 12:11
Titel
|
|
|
Ja, ich bin auch der Meinung sie gehören in den Head.
Hatte das auch versucht, aber funktionierte nicht. Dann habe ich es im Netz unter
anderem auch so gesehen und das auch versucht :/
Hier der Link.
|
|
|
|
|
Karlarsch
Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht:
|
Verfasst Do 13.03.2014 12:19
Titel
|
|
|
Zuletzt bearbeitet von Karlarsch am Do 13.03.2014 12:19, insgesamt 1-mal bearbeitet
|
|
|
|
|
EmThSt
Threadersteller
Dabei seit: 13.03.2014
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 13.03.2014 12:23
Titel
|
|
|
Hallo Karlarsch,
danke auch für deine Reaktion.
Link
|
|
|
|
|
Karlarsch
Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht:
|
Verfasst Do 13.03.2014 13:11
Titel
|
|
|
Du hast gleich mehrere Probleme, abgesehen von der Darstellung
1) Du deklarierst zwar HTML5 hast aber statt der semantisch korrekten Elemente eine große div-Suppe
2) jquery 1.2.6? Aktuell sind 1.11.0 / 2.1.0
3) Viele überflüssige Elemente und dadurch eine unnötig hohe Verschachtelungstiefe
4) Ein clearfix aus der Steinzeit, da gibt es wahrlich moderne Methoden
5) absolute Positionierung und floats die nicht nötig sind
Alles in allem solltest du schauen, dass du deinen Code auf den aktuellen Stand der Dinge holst. Das erleichtert dir ungemein die Handhabung und das Debugging.
Gruß
Karl
|
|
|
|
|
Morgo
Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 39
Geschlecht:
|
Verfasst Do 13.03.2014 13:58
Titel
|
|
|
Klar fließt das nach rechts, du hast ja auch ein negatives margin nach oben - und da liegt schon ein Element mit float.
Die ganze Konstruktion hier:
Code: | #schatten{
position: relative;
margin: -50px 0px -50px 0px;
padding: 50px 0px 50px 0px;
overflow: hidden;
} |
ist Quatsch - lass das ganz weg. Positionier stattdessen das Element mit Schatten relativ und arbeite mit z-index.
|
|
|
|
|
EmThSt
Threadersteller
Dabei seit: 13.03.2014
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 13.03.2014 14:03
Titel
|
|
|
Hi!
Mit z-index hatte ich es zunächst vor, aber dann liegt der footer unter dem head und hinter dem content...
:/
|
|
|
|
|
|
|
|
Ähnliche Themen |
Browserkompatibilität
Browserkompatibilität
[iframes] browserkompatibilität
[css] browserkompatibilität float
Browserkompatibilität Internet Explorer
Browserkompatibilität mit meinem Änfänger-Code
|
|