[CSS] background-(color/image) wordt niet geladen - Softwareontwikkeling

donderdag 28 april 2005 19:23

Acties:

Topicstarter

Probleem doet zich af en toe voor in IE en (bij mijn weten) altijd in FireFox.

Ik heb een <img /> waar ik graag een div met een background-color overheen wilt plaatsen. Doe ik nu met een negatieve margin-top. Vind het eigenlijk niet zo netjes, maar het kan zo en het werkt zo dus ok.

Maar nu als ik de pagina laadt, zou de DIV een gele background moeten krijgen. Helaas krijgt deze dat in FF helemaal niet, en in IE meestal wel, maar daar valt het ook zo af en toe weg. De code is beetje mengeling van XSLt en xHTML maar ik denk dat er wel uit te komen valt

HTML:

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
            <xsl:apply-templates select="pagina" />
            <link rel="stylesheet" type="text/css" href="./stl/default.css" />
        </head>
        <body>
            <div id="elCont">
                <div id="elNav">
                    <xsl:apply-templates select="navigatie" />
                </div>
                <div id="elContentCont">
                    <xsl:element name="img">
                        <xsl:attribute name="src">
                            ./prc/pTtlImage.php?sId=<xsl:value-of select="//module/@id" />
                        </xsl:attribute>
                    </xsl:element>
                    
                    <xsl:choose>
                        <xsl:when test="//error">
                            <xsl:apply-templates select="//error" />
                        </xsl:when>
                        <xsl:otherwise>
                            <div id="elTitel">
                                <h1><xsl:value-of select="//module/@id" /></h1>
                            </div>
                            <div id="elContent">
                                <xsl:apply-templates select="module[@type]" />
                            </div>
                        </xsl:otherwise>
                    </xsl:choose>
                </div>
            </div>
        </body>    
    </html>

en de bijbehorende stylesheet

Cascading Stylesheet:

*
{   box-sizing      :   border-box;
    -moz-box-sizing :   border-box;
            
    font-family     :   Trebuchet MS, Tahomea, Arial, sans-serif;
    line-height     :   20px;
    color           :   rgb(25,25,25);
}
body
{   background-color:   white;

    margin:         :   0 auto;
    padding         :   0 auto;
}
a
{   color           :   darkblue;

    text-decoration :   none;

    cursor          :   hand;       /* IE */
    cursor          :   pointer;    /* FF */
}
    a:hover
    {   color           :   red;
    }
img
{   border          :   0;
}

div#elCont
{   position        :   relative
    width:780px;
    margin          :   0 auto;
    /*background-image: url('../img/bordervert800px.png');
    background-repeat: repeat-y;*/
}
    div#elNav
    {   float           :   left;
        width           :   280px;
        
        background-color:   rgb(200,200,200);
    }
        div#elNav div, div#elNav * div
        {   padding-left     :   20px;
        }
    
    div#elContentCont
    {   width:500px;
        margin-left     :   280px;
        /*padding         :   0px 20px 20px 20px;*/
        clear: right;background-color:green;
    }
    div#elTitel
    {   margin          :   -60px 0 40px 0;
        background-color:   yellow; /* ### DEZE BACKGROUND GAAT HET DUS OM ;) ### */
    }
        div#elTitel h1
        {   font-size       :   15px;
        }

[ Voor 10% gewijzigd door r0bert op 28-04-2005 19:24 ]

donderdag 28 april 2005 19:25

Acties:

Verwijderd

Ik heb niet de hele code doorgelezen, maar moet je geen z-index gebruiken?

donderdag 28 april 2005 19:26

Acties:

r0bert

Topicstarter

Heb ik geprobeerd (met image op 0 en balk die eroverheen moet komen op 99), maar werkte helaas niet

donderdag 28 april 2005 19:29

Acties:

Verwijderd

Als je z-index gebruikt moeten overigens wel beide bijv position:absolute (of relative of wat dan ook) hebben.

[ Voor 20% gewijzigd door Verwijderd op 28-04-2005 19:30 ]

donderdag 28 april 2005 19:39

Acties:

r0bert

Topicstarter

Uh ohw..Als ik dat probeer werkt het helaas nog niet.

donderdag 28 april 2005 19:47

Acties:

Verwijderd

Als je die afbeelding even vervangt voor text, zie je dan wel een gele achtergrond?

donderdag 28 april 2005 19:50

Acties:

r0bert

Topicstarter

Dit lost de boel wel op

Cascading Stylesheet:

    div#elTitel
    {   position:fixed;clear:none;float:none;display:block;width:500px;
        margin          :   -60px 0 40px 0;
        background-color:   yellow;
    }

Nu alleen nog even uitzoeken waar door het nu komt

edit:

Cascading Stylesheet:

1	position:fixed

en hij doet het.. Snap niet dat ik dat zelf nog niet eerder uit had geprobeerd

^{Hé thnq Herelam}

edit 2:
fixed zorgt er in FF natuurlijk voor dat het element meescrolled. Position:absolute lijkt ook gewoon te werken, snap er weinig meer van maargoed, hoop dat degene die dit ooit via de search nog weer terug mocht vinden er wat aan heeft

[ Voor 47% gewijzigd door r0bert op 28-04-2005 20:52 ]