XHTMLforum - Rahmen mit Abstand um ein Bild

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Rahmen mit Abstand um ein Bild (http://xhtmlforum.de/showthread.php?t=37836)

Rahmen mit Abstand um ein Bild

Hallo,

ich möchte per CSS einen Rahmen um ein Bild definieren. Der Rahmen soll einen Abstand von 4px zum Bild haben.

Folgender Code funktioniert zwar im Firefox, nicht aber im IE - hier wird der Rahmen direkt um das Bild gezeigt, ohne Abstand. (IE nicht im Quirks Mode)

Code:

div#header_fotos img {

        border: 1px solid #CCC;

        padding: 4px;

}

Wie bekomme ich das denn hin?

Re: Rahmen mit Abstand um ein Bild

Zitat:

Zitat von butterhead

(IE nicht im Quirks Mode)

Bist du dir da sicher?

Zeig mal den kompletten Code, bei mir klappt das so im IE im Standartmodus :)

Der Doctype ist wie folgt angegeben:

Code:

<?xml version="1.0" encoding="ISO-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

und im body steht dann

Code:

<div id="logo">[img]images/logo_glashaus.gif[/img]</div>

...hab ich irgendwas falsch angegeben...?

Durch das "<?xml version="1.0" encoding="ISO-8859-1"?> " ist der IE im Quirksmode ;)
Also lass es am besten weg!

cool, das klappt, danke für Deine Hilfe!

Nun hab ich aber noch ein anderes Problem, was vorher nur im FF auftrat, jetzt aber auch (ohne das <?xml... ?>) im IE... vielleicht hast Du dafür auch ne Lösung? Dann wären meine Probleme ...vorerst... beseitigt ;)

Ich will ein Feld mit einer height von 100% haben, unabhängig vom Inhalt... es geht aber immer nur soweit wie der Content reicht. Im Quirks Mode funktionierte das so im IE wie gesagt, aber nicht im FF - nun auch nicht mehr im IE. Hab das Problem mal in eine einzelne Datei ausgelagert:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">



<head>

<title></title>

<style type="text/css">

body {

        margin: 0;

        padding: 20px 0 0 0;

        background-color: #E1E1E1;

}

* html body {

        width: 100%;

        text-align: center;

        overflow: hidden;

}

div#page_box {

        width: 788px;

        height: 100%; 

        text-align: left;

        margin: 0px auto 0px auto;

        padding-top: 1px;

        background-color: #00495A;

}

#content {

        width: 100%;

        margin: 30px;

        font-family: Verdana;

        color: #FFF;

}

</style>

</head>



<body>



<div id="page_box">





                <div id="content">

                Hier Content.



Das gr&uuml;ne Feld soll immer bis ganz unten gehen, egal wieviel Content hier drin steht!

                </div>





</div>





</body>

</html>

Hast Du hierfür auch nen Tipp...?

Das Prinzip für 100%-height ist folgendes:

Code:

html, body {

height: 100%;

margin: 0;

padding: 0; }



#page_box {

min-height: 100%; }



* html #page_box {

height: 100%; }

Schöne Grüße,
Heiko

VIELEN DANK!!!!!!!

Damit ist nicht nur mein Problem für das aktuelle Projekt gelöst, sondern auch für diverse andere, bei denen ich immer das gleiche Problem hatte!! ...min-height... da hätt ich ja auch mal drauf kommen können...

Also danke danke danke! Gruss, Christine

Nochmal kurz zur Erläuterung (wahrscheinlich ist es Dir ja eh klar): In dem Selektor * html #page_box {height: 100%;} steht nichts weiter als das (nämlich der Hack für den IE, der height wie min-height interpretiert), während alle übrigen Definitionen (d.h. Farben, margin, padding etc.) im ersten #page_box-Selektor stehen.

Schöne Grüße,
Heiko

ja, den Hack kenne ich, benutze ich auch so. Trotzdem danke nochmal :D

Hallo Heiko,
... ähem ... nochmal ich... vielleicht kannst Du mir nochmal helfen ...:oops: ? Ich wollte in die Box mit den 100% Höhe noch eine Box reinsetzen, die ebenfalls 100% Höhe hat und eine Border, die dann auch immer bis unten geht...

Habe diese zweite Box genauso angegeben wie die äussere mit min-height: 100% ... die innere geht jetzt aber trotzdem nicht bis ganz runter... (im folgenden Code ist nur das div #main_box dazugekommen)

Gruss,
Christine

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">



<head>

<title>H&ouml;henproblem Firefox</title>

<style type="text/css">

html, body {

height: 100%;

margin: 0;

padding: 20px 0 0 0;

background-color: #E1E1E1; 

}

* html body {

        width: 100%;

        text-align: center;

        overflow: hidden;

}

div#page_box {

        width: 788px;

        min-height: 100%;

        text-align: left;

        margin: 0px auto 0px auto;

        padding-top: 1px;

        background-color: #00495A;

}

* html #page_box {

height: 100%; 

}

div#main_box {

        width: 770px;

        min-height: 100%;

        margin: 7px 8px 0 8px;

        border-top: 1px solid #CCC;

        border-left: 1px solid #CCC;

        border-right: 1px solid #CCC;

}

* html div#main_box {

        height: 100%;

}

#content {

        width: 100%;

        margin: 30px;

        font-family: Verdana;

        color: #FFF;

}

</style>

</head>



<body>

<div id="page_box">

        <div id="main_box">

                <div id="content">

                Hier Content.



Das innere div mit dem grauen Rahmen soll ebenfalls immer bis ganz unten gehen...






                Tut's im IE, aber nicht im Firefox...

                </div>

        </div>

</div>

</body>

</html>