[CSS / xHTML] Problemen met bg-image in firefox - Softwareontwikkeling

maandag 11 juli 2005 14:38

Acties:

Verwijderd

Topicstarter

Hallo mensen,

Ik ben een website aan het maken met CSS en xHTML. Ik loop alleen tegen een probleem op waar ik het antwoord maar niet op kan vinden.

Dit is mijn xHTML code:

code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Event Crew</title>

<link rel="stylesheet" type="text/css" href="_css/style.css" />

</head>

<body>


<div class="container">


    <div class="header"></div>

    <div class="main_head"></div>

    <div class="spacer"></div>
    
    <div class="main_body">
    
        <div class="left_container">
        
            <div class="sub_head">Test</div>
            <div class="sub_body">Test</div>
            <div class="sub_foot_head"></div>
            <div class="sub_foot_body">Test</div>
            <div class="sub_foot"></div>
    
        </div>
    
        <div class="right_container">
        </div>
        
    </div>
    
    <div class="spacer"></div>

<div class="main_foot"></div>

</div>

</body>
</html>

Ik heb daarin dus een div main_body met daarin genest een left_container en een right_container.

Nu heb ik in CSS alle divs die ik een background wil meegeven daarvan voorzien:

code:

body {
    text-align:center;
    background-color:#F1F6FC;
}

.container {
    margin-left: auto;
    margin-right: auto;
    height:auto;
    width:768px;
    background-color:#F1F6FC;
}

.header {
    height:134px;
    width:768px;
    background-image: url(../_img/core/header.jpg);
}

.main_head {
    height:32px;
    width:768px;
    background-color: #00dd00;
    background-image: url(../_img/core/main_head.jpg);
}

.main_body {
    height:auto;
    width:768px;
    background-image: url(../_img/core/main_body.jpg);
}


.main_foot {
    height:54px;
    width:768px;
    background-image: url(../_img/core/main_foot.jpg);
}

.spacer {
    clear:both;
}

.left_container {
    float:left;
    text-align:center;
    height:auto;
    width:191px;
}

.right_container {
    text-align:center;
    height:auto;
    width:577px;
    float:right;
}

(ik heb even de onnodige dingen weggelaten anders wordt het topic wel erg lang)

ik heb dus in main_body een background staan die 1px hoog is en die ik dus op de y-as wil repeaten. Nu komt IE met het volgende:

http://24.132.255.19/screens/ie.jpg

En dit geeft Firefox als resultaat:

http://24.132.255.19/screens/firefox.jpg

Firefox repeat de background dus niet in main_body terwijl de content van main_body inprincipe de geneste containers zijn?

Heeft iemand suggesties? Want ik heb vannacht van 12 tot 4 lopen zoeken en ben

niets wijzer geworden.

Alvast bedankt,

Gr MrOrange

[ Voor 38% gewijzigd door Verwijderd op 11-07-2005 15:00 ]

maandag 11 juli 2005 14:40

Acties:

disjfa

Een element met clear:both;

Aangezien je left container geen hoogte heeft en dus geeft firefox de left container geen hoogte mee en dus geen plaatje

disjfa - disj·fa (meneer)
disjfa.nl

maandag 11 juli 2005 14:42

Acties:

Verwijderd

Topicstarter

clear:both; staat er al:

code:

1
2
3

spacer {
   clear:both;
}

[ Voor 118% gewijzigd door Verwijderd op 11-07-2005 14:46 ]

maandag 11 juli 2005 14:45

Acties:

disjfa

code:

        <div class="left_container">
        
            <div class="sub_head">Test</div>
            <div class="sub_body">Test</div>
            <div class="sub_foot_head"></div>
            <div class="sub_foot_body">Test</div>
            <div class="sub_foot"></div>
    
        </div>

Waar dan

disjfa - disj·fa (meneer)
disjfa.nl

maandag 11 juli 2005 14:46

Acties:

Verwijderd

Topicstarter

en waar moet ik hem dan tussen plaatsen?

maandag 11 juli 2005 14:50

Acties:

Verwijderd

sowieso: heigth moet zijn height

maandag 11 juli 2005 14:53

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op maandag 11 juli 2005 @ 14:50:
sowieso: heigth moet zijn height

tja dat was ff een foutje

maar maakt voor het result verder niets uit

maandag 11 juli 2005 14:55

Acties:

disjfa

Verwijderd schreef op maandag 11 juli 2005 @ 14:53:
[...]
tja dat was ff een foutje maar maakt voor het result verder niets uit

Je left_container (het element waar het om gaat) heeft niet eens een hoogte dus dan neem ik idd niet aan dat het helpt

Verder is de css vol met overbodige codes die vaak niet eens samen goed werken en bestaan er meer elementen in html dan divjes

[ Voor 18% gewijzigd door disjfa op 11-07-2005 14:56 ]

disjfa - disj·fa (meneer)
disjfa.nl

maandag 11 juli 2005 14:59

Acties:

CH4OS

It's a kind of magic

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

offtopic:
Dacht dat dat alleen voor XML-sheets was... Maar kan aan mij liggen... Bij xHTML 1.0 is bovenstaand geciteerde code ook niet eens nodig

[ Voor 29% gewijzigd door CH4OS op 11-07-2005 15:00 ]

maandag 11 juli 2005 15:02

Acties:

Verwijderd

code:

.container {
    margin-left: auto;
    margin-right: auto;
    height:auto;
    width:768px;
        background:#F1F6FC url(main_body.jpg) top left repeat-y;
}

.main_body {
    height:auto;
    width:768px;

}

[ Voor 6% gewijzigd door Verwijderd op 11-07-2005 15:02 ]

maandag 11 juli 2005 15:03

Acties:

Verwijderd

Topicstarter

Nou ik heb wat overbodige shit uit mijn CSS gegooit maar het werkt allemaal nog steeds niet.

Kan niemand me nou vertellen waarom die main_body-background wel repeat als ik er keiharde tekst inzet en niet als ik er content in de vorm van een div in gooi? Kan ik dat niet forceren ofzo?

maandag 11 juli 2005 15:05

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op maandag 11 juli 2005 @ 15:02:

code:

.container {
    margin-left: auto;
    margin-right: auto;
    height:auto;
    width:768px;
        background:#F1F6FC url(main_body.jpg) top left repeat-y;
}

.main_body {
    height:auto;
    width:768px;

}

... jij bent de beste $_/-\o_$

Geweldig bedankt man!

maandag 11 juli 2005 15:06

Acties:

Verwijderd

lama, ik dacht dat hij het nog steeds niet deed

[ Voor 78% gewijzigd door Verwijderd op 11-07-2005 15:07 ]

Pagina: 1

Reageer