[html/css] div + css probleempje

[_NeMeSiS_]

Ik ben bezig met een siteje (mijn eerste probeerseltje met div's en css) maar ik krijg hem niet helemaal firefox compatible. In internet explorer doet ie t wel goed maar firefox maakt er een boeltje van.

http://www.symbolic.nl/gm/

Zoals je kunt zien gooit ie de footer een stukje naar rechts maar zie zou gewoon zoals in internet explorer onderaan moeten staan.

De html

code:

<div id="pagewidth">
    <div id="header">
        <div class="content">Contact&nbsp;|&nbsp;Help&nbsp;|&nbsp;Mail een vriend&nbsp;|&nbsp;Home&nbsp;</div>
    </div>
    <div id="header2">
        <div class="content">&nbsp;</div>
    </div>
    <div id="content">
        
        
    <div id="leftcol"> 
      <div class="contentleft"> 
        <p>aap</p>
      </div>
    </div>
        
        
    <div id="rightcol"> 
      <div class="contentright">bbb</div>
    </div>
    </div>
    <div id="footer">
        <div class="content">Blabalbalba kshdfkjhskdhf skhdfksdhfkjhsd shd<a href="http://www.test.nl" target="_blank">Testlink</a>. &copy; 2004 Gezondheidsmagazine.</div>
    </div>
</div>

De css

code:

html, body{
    margin:0;
    padding:0;
    text-align:center;
    background-image: url(images/bg.gif);
    background-repeat: repeat;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
} 
 
#pagewidth{
    width:750px;
    text-align:left;
    margin-left:auto;
    margin-right:auto;
} 
 
#header{
    height: 70px;
    width: 750px;
    background-color: #FFFFFF;
    margin-top: 4px;
    background-image: url(images/logo.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    border-top-width: 1px;
    border-right-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    border-top-color: #000000;
    border-right-color: #000000;
    border-left-color: #000000;
    text-align: right;
}
 
#header2{
    height: 154px;
    width: 750px;
    background-color: #FFFFFF;
    background-image: url(images/home.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #000000;
    border-left-color: #000000;
} 
 
#content{
    width: 706px;
    hight: 100%;
    background-color: #FFFFFF;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #000000;
    border-left-color: #000000;
    padding: 22px;
}

#leftcol{
    width:430px;
    float:left;
    position:relative;
    margin-right:22px;
    background-color: #00bb00;
}

#rightcol{
    width:250px;
    float:left;
    position:relative;
    background-color: #00bb00;
} 

#footer{
    height: 30px;
    width: 100%;
    clear: both;
    background-color:#FFFFFF;
    text-align: center;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: #000000;
    border-bottom-color: #000000;
    border-left-color: #000000;
}

Iemand die zo lief is die mij zou kunnen helpen dit probleempje op te lossen/uit te leggen??

[BtM909]

Hier heb je hier wel netjes clear: both aangegeven voor je footer en op de site achter je link niet.

Waar zou het probleem liggen?

[ Voor 18% gewijzigd door BtM909 op 08-07-2004 20:58 ]

[_NeMeSiS_]

BtM909 schreef op 08 juli 2004 @ 20:57:
Hier heb je hier wel netjes clear: both aangegeven voor je footer en op de site achter je link niet.

Waar zou het probleem liggen?

Hmm strange Zou zweren dat ik em had geupload maar nu is er weer een nieuw probleem ontstaan

De content div rekt niet mee naar beneden.. Die hight 100% werkt natuurlijk niet.. dus die hebbik er alweer uit gehaald.. Enig idee hoe ik dit nu weer kan oplossen?

[faabman]

_NeMeSiS_ schreef op 08 juli 2004 @ 21:20:
[...]


Hmm strange Zou zweren dat ik em had geupload maar nu is er weer een nieuw probleem ontstaan

De content div rekt niet mee naar beneden.. Die hight 100% werkt natuurlijk niet.. dus die hebbik er alweer uit gehaald.. Enig idee hoe ik dit nu weer kan oplossen?

ff zoeken op http://alistapart.com... (geloof trouwens dat anne van http://annevankesteren.nl ook nog een aantal voorbeelden heeft staan...)

[_NeMeSiS_]

faabman schreef op 08 juli 2004 @ 21:38:
[...]


ff zoeken op http://alistapart.com... (geloof trouwens dat anne van http://annevankesteren.nl ook nog een aantal voorbeelden heeft staan...)

Ja ik kende die eerste site wel. Heb van een aantal sites bekeken hoe het werkte en wat dingetjes gebruikt alleen met dit laatste loodje kom ik er niet zo uit.

[Grijze Vos]

Als je net begonnen bent, les 1 in humility:

als het in FF niet uitziet is de kans zo'n 98% dat jij er een boeltje van hebt gemaakt.

En om je code leesbaarder te maken zou ik je footer als volgt inkorten (en de rest ook btw):

code:

footer{
    height: 30px;
    width: 100%;
    clear: both;
    background-color:#FFFFFF;
    text-align: center;
    border-width: 0px 1px 1px 1px;
    border-style: solid;
    border-color: #000000;
}

verder ontopic, laat je rightcol rechts floaten, en je leftcol niet floaten. Zet je rightcol dan wel ff boven je leftcol in de code. Dan zou het volgens mij moeten werken helemaal.

[ Voor 74% gewijzigd door Grijze Vos op 09-07-2004 00:11 ]

[_NeMeSiS_]

Grijze Vos schreef op 09 juli 2004 @ 00:07:
Als je net begonnen bent, les 1 in humility:

als het in FF niet uitziet is de kans zo'n 98% dat jij er een boeltje van hebt gemaakt.

En om je code leesbaarder te maken zou ik je footer als volgt inkorten (en de rest ook btw):

code:

footer{
    height: 30px;
    width: 100%;
    clear: both;
    background-color:#FFFFFF;
    text-align: center;
    border-width: 0px 1px 1px 1px;
    border-style: solid;
    border-color: #000000;
}

verder ontopic, laat je rightcol rechts floaten, en je leftcol niet floaten. Zet je rightcol dan wel ff boven je leftcol in de code. Dan zou het volgens mij moeten werken helemaal.

Kben wel iets verder alleen die achtergrond Dat van die css schoon ik wel op zodra alles af is hoor Wil hem eerst mozilla en ie compatible hebben.

Wat er gebeurd is dus het volgende:



De content div moet dus meerekken ook met het rechter menu. Is er een mogelijkheid om em gewoon mee te rekken tot of de linkercontent of de rechtercontent verder naar beneden is?

in IE werkt het dus wel maar mozilla laat het even afweten.

[ Voor 3% gewijzigd door _NeMeSiS_ op 15-07-2004 12:06 ]

[Clay]

Mozilla laat het niet afweten, mozilla doet het juist goed; IE doet dat fout. Lees de specs er maar op na (afegezien van of je het eens zou zijn met de specs, maar IE doet het toch echt fout dus)

om contentdiv zoals in je plaatje mee te laten rekken tot na content left en right moet je er iets in zetten na die 2 met clear:both;

[_NeMeSiS_]

Clay schreef op 15 juli 2004 @ 12:15:
Mozilla laat het niet afweten, mozilla doet het juist goed; IE doet dat fout. Lees de specs er maar op na (afegezien van of je het eens zou zijn met de specs, maar IE doet het toch echt fout dus)

om contentdiv zoals in je plaatje mee te laten rekken tot na content left en right moet je er iets in zetten na die 2 met clear:both;

clear:both staat erin bij de footer zoals je kan zien:

http://www.symbolic.nl/gm/gezondheidsmagazine.css

Dat zorgt ervoor dat de langere contentdiv niet dwars over de footer loopt.

[Bonno]

als je een 'float: left' toevoegd aan je '#content' dan loopt hij hier wel goed in FF

of snap ik het probleem weer es niet goed

[ Voor 32% gewijzigd door Bonno op 15-07-2004 12:34 ]

[_NeMeSiS_]

NonnoB schreef op 15 juli 2004 @ 12:31:
als je een 'float: left' toevoegd aan je '#content' dan loopt hij hier wel goed in FF

of snap ik het probleem weer es niet goed

Hmm vreemd het lijkt inderdaad te werken nu (zo nog ff verder testen) Thanx!

[T-MOB]

Clay schreef op 15 juli 2004 @ 12:15:
om contentdiv zoals in je plaatje mee te laten rekken tot na content left en right moet je er iets in zetten na die 2 met clear:both;

[Clay]

die "in" is idd nogal essentieel ja.

[Bonno]

hmm, daar had ik overheen gelezen, dat was inderdaad ook al een oplossing
nuja, de TS is geholpen