[CSS] Plaatsing minimize en close buttons

[Verwijderd]

Dag mensen, vorig topic ben ik goed geholpen dus ik denk ik probeer het nog een keer

ditmaal een probleem met het plaatsen van minimize en close buttons zoals te zien
hier.

in mozilla gaat het 'bijna' goed. de linker kolom wordt precies weergegeven zoals ik het graag zou hebben. de andere twee kolommen echter doen om voor mij onverklaarbare redenen anders.

css met betrekking tot de buttons:

code:

.contentbox {
    margin-bottom: 5px;
    border: 1px solid black;
    background-color: #CEE9FF;
}
/* -- max/minimize/close buttons -- */
a.buttonmin {
    border: 2px outset;
    float: right;
    margin-right: 15px;
    margin-top: -14px;
    background: url(../style/styletest/buttonmin.gif) no-repeat gray;
    width: 8px;
    height: 7px;
}
a.buttonmax {
    border: 2px outset;
    float: right;
    margin-right: 15px; 
    margin-top: -14px;
    background: url(../style/styletest/buttonmax.gif) no-repeat gray;
    width: 8px;
    height: 7px;
}
a.buttonclose {
    border: 2px outset; 
    float: right;   
    margin-right: 2px; 
    margin-top: -14px;
    background: url("../style/styletest/buttonclose.gif") no-repeat gray;
    width: 8px;
    height: 7px;
}

in IE6 gaat het echter helemaal goed fout.
hij lijkt de rechtermarge niet op de parent uit te voeren maar op het voorgaande float-item (de close button staat links van de minimize button ipv de rand van de parent)
Ik kan denk ik dit probleem oplossen door de volorde van de buttons in de html aan te passen.

verder lijkt IE6 ook lak te hebben aan de opgegeven hoogte van de knop.

eigenaardigheidje: mozilla kent de kleur 'grey' en 'gray' , IE kent alleen 'gray';


grrr@IE

[crisp]

gray is ook officieel de juiste benaming

[T-MOB]

De hoogte van de knoppen kun je waarschijnlijk goed krijgen door de line-height aan te passen.
IE en rechts-uitlijnen is een RAMP... een voorbeeld:

code:

#sidebar {
margin: 0 -210px 5px 0; 
_margin-right: -105px; /*yet another IE bug */
padding-left: 20px; 
_padding-left: 5px;
float: right;
width: 200px; 
_width: 210px;
}

alles wat met '_' begint is om het er in IE ongeveer hetzelfde uit te laten zien als de bedoeling is \0/.

[Verwijderd]

en waar dat denk je dat ik die 'line-height' dan op moet instellen?

op zowel normal als 1.5 zie ik geen verschil in mozilla/IE

[T-MOB]

Hij zou dan ook omlaag moeten (hij is nu immers te groot voor IE). Andere oplossing zou "overflow: hidden;" kunnen zijn. IE rekt in tegenstelling tot de specificatie elementen met een vaste hoogte uit als de inhoud groter is.

[humi]

Grey and Gray zijn in de engelse taal alletwee correct.
Als ik 't goed zie wordt gray meer in de US gebruikt, en grey in de UK.
De originele spelling is grey.

Volgens de CSS specificatie zou gray de goede kleur moeten zijn. Mozilla heeft blijkbaar grey zelf toegevoegd, om 't mensen gemakkelijker te maken.

[Verwijderd]

het ging me echter niet zozeer om het gray/grey verhaal, meer om het 'hoe positioneer ik deze knoppen verhaal'