[css] 3 vakken naast elkaar in IE6, FF en IE7 werken

[t1mmy]

Hai tweakerts,

Ik heb een probleem, in FF en IE7(na veel geklooi) heb ik nu eigenlijk mooi 3 vakken naast elkaar maar nu IE6 nog.
Hier hoe het er bij staat:
http://tim.usework.nl/joomla

Ook werkt het niet als ik simpel weg het zelfde als IE7 gebruik.
Hier kunnen jullie de css file's vinden:
http://tim.usework.nl/joomla/templates/Opzeggen.nu/css/

Ik heb verder geen behoeften aan opmerkingen over mijn script 'kunsten'

Hopelijk kunnen jullie mij verder helpen, ik weet het niet meer.

Screenshotje van IE6 komt er aan, hoe hij moet zijn kunnen jullie zelf zien

Bij deze:

[ Voor 6% gewijzigd door t1mmy op 06-11-2008 21:00 ]

[Zakkenwasser]

Ik heb net ff in de source gekeken, maar kom er nog niet helemaal achter om welke div blokken het gaat.
Maar je kan veel doen met CSS argument: div positionering

Linkje: http://www.w3schools.com/Css/pr_class_position.asp

Het is wel verstandig ook, om overzicht te behouden, door minder divjes te gebruiken, je source staat er bomvol mee.
Zo zie je ook sneller waar het mis gaat.

Div: container
Div: menu
Div: content
Div: contentlinkns
Div: footer

oid, meer dan genoeg.

By the way: waarom gebruik je geen firebug?

[ Voor 41% gewijzigd door Zakkenwasser op 06-11-2008 23:53 ]

[Xirt]

Het probleem dat je hebt met Internet Explorer versus FireFox is waarschijnlijk dat de elementen net een paar pixels te breed zijn in Internet Explorer (door onzichtbare borders, padding etc.). Dit is op te lossen door een tweede CSS bestand aan te maken waarin je de kolommen een paar pixels minder breed maakt voor IE.

Je kan het ook zo kunnen proberen:

code:

container {
   position: relative;
}

.leftBox, .rightBox {
   position: absolute;
   top: 0px;
   width: 150px;
   background: #ededed;
}

.leftBox {
   left: 0px;
}

.rightBox {
   right: 0px;
}

.contentBox {
   margin: 0px 150px;
}

code:

<div class='container'>
   <div class='leftBox'>Content</div>

   <div class='contentBox'></div>

   <div class='rightBox'>Content</div>
</div>

Als de achtergrond van de kolommen door moet lopen dan kan je dit bewerkstelligen door een afbeelding te maken in de breedte van je pagina met aan beide zijkanten 150 pixels in een andere kleur. Deze doe je dan als achtegrond van .contentBox.

[ Voor 18% gewijzigd door Xirt op 07-11-2008 08:15 ]

[t1mmy]

MrJey schreef op donderdag 06 november 2008 @ 23:47:
Ik heb net ff in de source gekeken, maar kom er nog niet helemaal achter om welke div blokken het gaat.
Maar je kan veel doen met CSS argument: div positionering

Linkje: http://www.w3schools.com/Css/pr_class_position.asp

Het is wel verstandig ook, om overzicht te behouden, door minder divjes te gebruiken, je source staat er bomvol mee.
Zo zie je ook sneller waar het mis gaat.

Div: container
Div: menu
Div: content
Div: contentlinkns
Div: footer

oid, meer dan genoeg.

By the way: waarom gebruik je geen firebug?

Bedankt voor de tip, ga er gelijk naar kijken! Het gaat trouwens op de blokken menu_left, menu_text & menu_right.
Fire bug heb ik nu geinstaleerd, zal kijken wat ik er mee kan Bedankt voor de tip.

ZeroSixZero schreef op vrijdag 07 november 2008 @ 08:13:
Het probleem dat je hebt met Internet Explorer versus FireFox is waarschijnlijk dat de elementen net een paar pixels te breed zijn in Internet Explorer (door onzichtbare borders, padding etc.). Dit is op te lossen door een tweede CSS bestand aan te maken waarin je de kolommen een paar pixels minder breed maakt voor IE.

Je kan het ook zo kunnen proberen:

code:

container {
   position: relative;
}

.leftBox, .rightBox {
   position: absolute;
   top: 0px;
   width: 150px;
   background: #ededed;
}

.leftBox {
   left: 0px;
}

.rightBox {
   right: 0px;
}

.contentBox {
   margin: 0px 150px;
}

code:

<div class='container'>
   <div class='leftBox'>Content</div>

   <div class='contentBox'></div>

   <div class='rightBox'>Content</div>
</div>

Als de achtergrond van de kolommen door moet lopen dan kan je dit bewerkstelligen door een afbeelding te maken in de breedte van je pagina met aan beide zijkanten 150 pixels in een andere kleur. Deze doe je dan als achtegrond van .contentBox.

Hier zat ik ook al gelijk aan te denken maar, hoe breed ik de content div ook maak ze blijven onder elkaar staan. Toch zal ik er nog even naar kijken, bedankt


*Kuch**Proest* %%&*%&$@# Gisteravond de hele avond er aan gewerkt zie ik deze nutteloze divs staan:
#menu_right {
FLOAT: left;
}
#menu_left {
float: left;
}
Deze verwijderd en alles werkt perfect..
Bedankt voor jullie hulp!

[ Voor 6% gewijzigd door t1mmy op 07-11-2008 11:48 ]

[Zakkenwasser]

ZeroSixZero schreef op vrijdag 07 november 2008 @ 08:13:
Dit is op te lossen door een tweede CSS bestand aan te maken waarin je de kolommen een paar pixels minder breed maakt voor IE.

Dat kun je ook in de bestaande CSS toevoegen, houdt CSS bestanden zo gesorteerd mogenlijk.

1 voor style
2 voor positionering
3 voor kleur

[Xirt]

Daar ben ik het niet mee eens. Ik schrijf eerst CSS bestanden die door een validator heenkomen. Dan wil ik niet mijn werk verprutsen, omdat Internet Explorer niet met de standaarden om kan gaan. Vandaar dus een apart bestand voor al het debuggen mbt IE.

[Zakkenwasser]

ZeroSixZero schreef op zaterdag 08 november 2008 @ 00:46:
Daar ben ik het niet mee eens. Ik schrijf eerst CSS bestanden die door een validator heenkomen. Dan wil ik niet mijn werk verprutsen, omdat Internet Explorer niet met de standaarden om kan gaan. Vandaar dus een apart bestand voor al het debuggen mbt IE.

Have it your way...

Ik hou me meer aan de strengere regeltjes