[CSS] faux-columns wel in IE7 niet in Firefox? - Softwareontwikkeling

maandag 19 november 2007 21:45

Acties:

Topicstarter

Op het moment van tikken ben ik bezig met een spoedklusje voor een bedrijfje waar ik voor gewerkt heb met webscripten. Nu is het alleen al veel te lang geleden natuurlijk dat ik nog eraan gewerkt heb, dus mijn kennis van de dingen is redelijk wat verslechterd.

Het probleem is dat ik faux-columns moet gebruiken om de lengte van de div te vullen met een kleurtje en tegelijk de zelfde hoogte met datzelfde kleurtje.
Eerst maar eens de code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <link type="text/css" rel="stylesheet" href="./stylesheets/body.css"/>
  <link type="text/css" rel="stylesheet" href="./stylesheets/container.css"/>
  <link type="text/css" rel="stylesheet" href="./stylesheets/header.css"/>
  <link type="text/css" rel="stylesheet" href="./stylesheets/main.css"/>
  <link type="text/css" rel="stylesheet" href="./stylesheets/load.css"/>
  <link type="text/css" rel="stylesheet" href="./stylesheets/page.css"/>
</head>
<body>
  <div id="container">
    <div id="header">
      <div id="navigation">
        <a href="" class="first">home</a></li>
        <a href="">bedrijfsinfo</a>
        <a href="">activiteiten</a>
        <a href="">projecten</a>
        <a href="">contact</a>
        <a href="">reageren</a>
      </div>
      <div id="subnavigation">
        <a href="">serviceplan</a>
        <a href="">vacatures</a>
        <a href="" class="last">goorse volkswoning</a>
      </div>
    </div>
    <div id="main">&nbsp;
      <div id="load">
        <h1>documentatie</h1>
        <p>asd</p>
      </div>
      <div id="page">
        <h1>Bouwen volgens uw idee</h1>
        <p>asd</p>
      </div>
    </div>
  </div>
</body>
</html>

Cascading Stylesheet:

body {
    margin:  18px auto 0px auto;
    padding: 0px;
}

#container {
    margin: 0px auto 0px auto;
    width:  936px;
}

#header {
    width:               936px;
    height:              122px;
    background-image:    url('../images/header.jpg');
    background-repeat:   no-repeat;
    background-position: 0px 34px;
}

#main {
    width:             936px;
    background-image:  url('../images/main.gif');
    background-repeat: repeat-y;
    background-color:  #000000;
}

#load {
    float: left;
    width: 156px;
    background: transparent;
}

#page {
    float: right;
    width: 772px;
}

#page h1 {
    margin:           0px;
    padding:          0px 0px 7px 10px;
    background-color: #FFFFFF;
    font-family:      verdana;
    font-size:        10px;
    font-weight:      bold;
    line-height:      10px;
    color:            #8471b9;
    text-transform:   uppercase;
}

Als ik de pagina nu in IE7 bekijk krijg ik netjes de faux-columns te zien, maar in Firefox blijven de achtergronden wit in plaats van doorzichtig.

Ik denk dat ik misschien wat bergeten ben, maar ik kan het niet vinden

een voorbeeldje is te vinden op:
http://www.b2ontwerp.nl/jaap/
De bedoeling is dat onder het kopje documentatie weer een zwart vlak komt en hetzelfde aan de rechterkant.

Wie o wie ziet mijn fout en is zo vriendelijk me er even op te wijzen?

A byte walks into a bar and orders a pint. Bartender asks him "What's wrong?" Byte says "Parity error." Bartender nods and says "Yeah, I thought you looked a bit off."

maandag 19 november 2007 21:55

Acties:

MoietyMe

zij/haar

Je load en page hebben allebei een float. Deze clear je niet meer en firefox doet dan wat het moet doen.

Je zult dus nog even die twee div's moeten clearen. Simpelste is gewoon:

code:

 <div id="main">&nbsp;
      <div id="load">
        <h1>documentatie</h1>
        <p>asd</p>
      </div>
      <div id="page">
        <h1>Bouwen volgens uw idee</h1>
        <p>asd</p>
      </div>
      <br class="clear" />
    </div>

code:

1	.clear{clear:both;}

maandag 19 november 2007 21:57

Acties:

k0ewl

Topicstarter

Good Fella schreef op maandag 19 november 2007 @ 21:55:
Je load en page hebben allebei een float. Deze clear je niet meer en firefox doet dan wat het moet doen.

Je zult dus nog even die twee div's moeten clearen. Simpelste is gewoon:
code:
1
2
3
4
5
6
7
8
9
10
11
 <div id="main">&nbsp;
      <div id="load">
        <h1>documentatie</h1>
        <p>asd</p>
      </div>
      <div id="page">
        <h1>Bouwen volgens uw idee</h1>
        <p>asd</p>
      </div>
      <br class="clear" />
    </div>
code:
1
.clear{clear:both;}

inderdaad, nu je het zegt... domme ik. Thnx dude!
Loop ik dus al gewoon een uur naar te zoeken

Van mij mag er een slotje op!

[ Voor 30% gewijzigd door k0ewl op 19-11-2007 23:10 ]

A byte walks into a bar and orders a pint. Bartender asks him "What's wrong?" Byte says "Parity error." Bartender nods and says "Yeah, I thought you looked a bit off."

maandag 19 november 2007 21:59

Acties:

MoietyMe

zij/haar

k0ewl schreef op maandag 19 november 2007 @ 21:57:
[...]

inderdaad, nu je het zegt... domme ik. Thnx dude!
Loop ik dus al gewoon een uur naar te zoeken

Geen probleem, soms heb je gewoon even een frisse kijk op dingen nodig