[CSS] Float: right; geeft extra inhoud

[Verwijderd]

Hallo,

ik heb in mijn menu een knop, om het menu uit te vouwen.
De knop is een image, die in een div staat (btnPane).

De knop en de div hebben alleen een styleobject:
.btnPane {
float: right;
margin-top: -15px;
margin-right: 4px;
border: 1px solid red;
}
De border is alleen om te kijken waar het probleem zit.
.btn {
margin: 1px;
}
De margin is omdat er mooie randje omheen komen als je er met de muis overheen gaat.


Maar op de een of andere manier gaat het fout. Het zit er zo uit (met border)

Als ik de float weg haal, dan is het wel goed. Alleen wil ik persee de knop (pane) rechts hebben. Het menu heeft ook nog eens een variabele breedte, dus vaste waardes ingeven kan niet .

Weet iemand wat het probleem is?

[faabman]

waarom maak je van dat plaatje niet gewoon een achtergrondplaatje??

[Verwijderd]

faabman schreef op donderdag 23 december 2004 @ 12:53:
waarom maak je van dat plaatje niet gewoon een achtergrondplaatje??

Omdat er als je er met de muis overheen gaat komt er een bevel randje omheen en de breedte is variabel.

[GX]

absoluut positioneren vanaf de rechterkant ?

[crisp]

Je bedoelt dat je margin van 4px in IE 8px is geworden? Dat is een IE-CSS bug die op te lossen is door display:inline op je float te zetten

[Verwijderd]

Ik zal het stukje javascript eens geven waarmee ik de knop erop zet:

code:

  pButtons = document.createElement('div');
  pButtons.className = 'btnPane';

  img = document.createElement('img');
  img.setAttribute('id', 'i' + this.id);
  img.setAttribute('src', 'images/down.gif');
  img.className = 'btn';
  img.setAttribute('width', '16');
  img.setAttribute('height', '16');

  pButtons.appendChild(img);

Het plaatje is 16x16 pixels groot.
De margin van 1px, is omdat er bij een mouseover een andere style wordt gegeven:
.btnOver{
border-top : 1px solid white;
border-left : 1px solid white;
border-right : 1px solid black;
border-bottom : 1px solid black;
}
Zonder die margin "verspringt" het plaatje.

Met een display: inline zijn de "extra pixels" inderdaad weg. Alleen werkt het niet samen met float. Of maakt de volgorde hierbij uit?
.btnPane {
display: inline;
float: right;
margin-top: -15px;
margin-right: 4px;
border: 1px solid red;
}

.btnPane {
float: right;
display: inline;
margin-top: -15px;
margin-right: 4px;
border: 1px solid red;
}

Deze twee heb ik geprobeerd, maar zonder succes. Maar krijg dezelfde ruimte in FireFox.

[crisp]

de display:inline zou verder geen invloed op de float mogen hebben.
Misschien zou je je img nog een display:block kunnen geven om te kijken of dat wat uitmaakt.

[ Voor 42% gewijzigd door crisp op 23-12-2004 14:14 ]

[Verwijderd]

Maakt het dan ook niet uit in welke volgorde ze staan?
Stukjes die ik heb geprobeerd, staan in mijn vorige post.

Maar die werken allebij niet.
Display block ook niet

[crisp]

nee, volgorde maakt ook niet uit.
Wat werkt er precies niet dan? Misschien is het handig ergens even een testcase online te zetten?

[Verwijderd]

arg.... wordt gek.

Als ik de meeste simpelste versie ervan maak. Zonder een JS classe en events dan werkt ie wel gewoon .

Hoe kan het het beste aan gaan pakken om de fout in andere elementen te vinden?

[Verwijderd]

Verwijderd schreef op donderdag 23 december 2004 @ 14:45:
arg.... wordt gek.

Als ik de meeste simpelste versie ervan maak. Zonder een JS classe en events dan werkt ie wel gewoon .

Hoe kan het het beste aan gaan pakken om de fout in andere elementen te vinden?

Gewoon zoals je altijd problemen oplost.

Eerst het probleem isoleren, en dat betekent allerlei dingen toevoegen, net zolang tot het misgaat. Als er iets misgaat laat je wat je het laatst hebt toegevoegd achterwege, en voeg je de andere dingen toe. Als er dan verder niets onverwachts meer gebeurt, weet je dat dat ene dingetje het probleem veroorzaakt (eventueel in combinatie met wat er al eerder was toegevoegd).

[Verwijderd]

Ik ben er inmiddels achter.
De div waarin het hele zootje stond had een "text-indent", die wordt waarschijnlijk dus ook meegegeven aan de kinderen ervan.