Willkommen auf dem Portal für Mediengestalter

EmThSt · Threadersteller

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>

<div id="head">
) aber es klappt nichts :/

Ich hoffe, einer von euch kann mir helfen!
Vielen Dank schon mal!

JanG · **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!

EmThSt · Threadersteller

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 · **Verfasst** Do 13.03.2014 12:19 **Titel**

EmThSt · Threadersteller

Hallo Karlarsch,

danke auch für deine Reaktion.
Link

Karlarsch · **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 · **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:

EmThSt · Threadersteller

Hi!

Mit z-index hatte ich es zunächst vor, aber dann liegt der footer unter dem head und hinter dem content...
:/

Willkommen auf dem Portal für Mediengestalter

Thema: Browserkompatibilität vom 13.03.2014

Browserkompatibilität