[CSS]Waar blijft mijn achtergrond in Firefox - Softwareontwikkeling

woensdag 10 mei 2006 11:03

Acties:

Verwijderd

Topicstarter

Mijn Css is validated, en mijn html ook. Toch verdwijnt mijn achtergrond in firefox, terwijl hij hem in IE goed weergeeft. Iemand een idee? Hij doet het naast de header wel goed, maar als de rest van de content komt stopt hij ermee.

relevante css

Cascading Stylesheet:

body { 
    margin: 0; 
    font: 0.7em Tahoma, sans-serif; 
    line-height: 1.4em;
    color: #454545; 
}

p {
    margin: 0;
    padding: 4px 6px 4px 6px;
    }
    
/*Inhoud*/
#bg {
    width: 800px;
    background-image: url(../img/bg.jpg);
    margin: auto;
    }

#container {
    width: 750px;
    margin: 10px auto;
    background-color: #f4f4f4;
    }

#header {
    height: 55px;
    width: 750px;
    border-bottom: 1px solid #E0691A;
    background-color: #f4f4f4;
    }

#left {
    float: left;
    width: 162px;
    background-color: #f4f4f4;
    }
    
    .rek_info {
        float: left;
        width: 150px;
        margin: 10px 0 6px 0;
        padding: 0;
        border: 1px solid #E0691A;
        background-color: #FFFFFF;
        }
    
    
#center {
    float: left;
    background-color: #f4f4f4;
    }
    
    .nav {
    float: left;
    width: 424px;
    height: 1.8em;
    border-left: 1px solid #E0691A;
    border-right: 1px solid #E0691A;
    border-bottom: 1px solid #E0691A;
    background-color: #FFFFFF;
    }
    
#right {
    float: right;
    width: 162px;
    background-color: #f4f4f4;
    }
    
    .right_box {
        float: right;
        width: 150px;
        margin: 10px 0 6px 0;
        padding: 0;
        border: 1px solid #E0691A;
        background-color: #FFFFFF;
        }

HTML:

<body>
<div id="bg">

    <div id="container">
        <div id="header">
        </div>
        
        <div id="left">
            <div class="rek_info">
                
            </div>
        </div>
        
        <div id="center">
            <div class="nav">
            </div>
        </div>
        
        <div id="right">
            <div class="right_box">
            </div>
        </div>
    </div>
    
</div>


</body>

[ Voor 10% gewijzigd door Verwijderd op 10-05-2006 13:59 ]

woensdag 10 mei 2006 11:06

Acties:

crisp

Devver

Pixelated

Omdat je een deel van je content uit de flow haalt; zorg dat je container uitrekt tot voorbij je floats, bijvoorbeeld door een clearing element na je floats op te nemen of door je container overflow: auto of hidden te geven.

Zo zie je maar weer: validatie is geen garantie voor goede werking (dat IE het wel 'goed' lijkt te doen is feitelijk een bug in IE).

Intentionally left blank

woensdag 10 mei 2006 11:08

Acties:

BtM909

Watch out Guys...

Overigens kan je dat heel makkelijk zien door de webdevelopers-extensie te gebruiken van Firefox of even een border om bepaalde elementen te zetten

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 10 mei 2006 11:12

Acties:

Verwijderd

Topicstarter

Crisp: Ik begrijp eerlijk gezegd niet precies wat je bedoeld, of hoe het nu kwam, maar je oplossing werkt. Als je tijd/zin hebt om het uit te leggen graag, dan kan ik er volgende keer rekening mee houden. Anders in ieder geval bedankt voor de oplossing!

BtM909 Borders gebruik ik inderdaad ook weleens op dit soort problemen op te lossen, maar ik had geen idee hoe de bg om de container te laten doorlopen. Wat is die webextensie van FF precies?

woensdag 10 mei 2006 11:14

Acties:

BtM909

Watch out Guys...

http://chrispederick.com/work/webdeveloper/

Vervolgens krijg je een hele rits aan extra opties die je kan gebruiken om bepaalde elementen in je pagina te outlinen

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 10 mei 2006 11:15

Acties:

BtM909

Watch out Guys...

Clearing uitgelegd (en ook oplossingen ervoor):

http://positioniseverything.net/easyclearing.html
http://www.quirksmode.org/css/clearing.html

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

Pagina: 1

Reageer