[css] problemen met achtergrondkleur in fieldset - Softwareontwikkeling

zondag 29 juni 2003 17:51

Acties:

Topicstarter

Ik zit met het volgende probleem:

Afbeeldingslocatie: http://www.excudo.net/got/CP_IE.png

Afbeeldingslocatie: http://www.excudo.net/got/CP_Mozilla.png

De achtergrond kleur wordt in IE netjes gevuld, maar zoals je ziet treed er bij Mozilla (ik heb Phoenix) iets raars op. Nou vroeg ik me af : is dit een bug? Of doe ik iets niet helemaal goed in m'n stylesheet:

ik heb de buttons even weggelaten in de html-code omdat die de opmaak nogal vernaggelden en er - heb ik getest - toch niet toe doen. dus daar staat nu -[button]- in de plaats

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<fieldset class="CPFieldset">
    <legend style="font-size: 10pt; font-weight:bold;"> Control Panel </legend>
    <div class="CPDiv">
        <div style="position: relative; float: left; background-color: inherit;">
            <br>
            <span style="background-color: #131366;">
                -[button]-
            </span>
         </div>
         <div style="position: relative; float: right; background-color: inherit;">
            Sorteer Op:<br>
            <span style="background-color: #131366;">
                -[button]-
            </span><br>
            <br>
            <span style="background-color: #131366;">
                -[button]-
            </span>
        </div>
    </div>
</fieldset>

</body>
</html>

Cascading Stylesheet:

body {
    font-family: verdana, arial;
    font-size: 10pt;
    background-color: #CCC;
    margin: 0px;
    }
 td {
    font-family: verdana, arial;
    font-size: 10pt;
    }
 .CPFieldset {
    background-color: #CCC;
    width: 250px;
    height: 165px;
    margin-right: 2px;
    padding: 2px;
    }
 .CPDiv {
    margin: 3px;
    padding: 3px;
    background-color: #DDD;
    border: 1px solid #BBB;
    height: 100%;
    }

ipv background-color: inherit; heb ik ook al geprobeerd om gewoon te zetten background-color: #DDD; maar dat maakte geen verschil

zondag 29 juni 2003 20:14

Acties:

Clay

cookie erbij?

het zit in de float:left (en right) en de height:100% voor die .cpdiv. Als je die eruit haalt rekt de inhoud wel gewoon de fieldset uit. Overigens doet mozilla het goed

een element met float heeft geen invoed meer op het element waar hij inzit, en hoort dit ook niet uit te rekken.
Je zou het moeten kunnen oplossen met een "clear" maar ik zou niet weten waar eigenlijk.

Afhankelijk van wat je in die fieldset zil laten zien is een gewone table misschien het makkelijkst

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

zondag 29 juni 2003 21:28

Acties:

marty

Topicstarter

Clay schreef op 29 June 2003 @ 20:14:
het zit in de float:left (en right) en de height:100% voor die .cpdiv. Als je die eruit haalt rekt de inhoud wel gewoon de fieldset uit.

Als ik die float left en right weghaal, dan komen die twee divjes onder elkaar te staan in plaats van dat ze naast elkaar komen - zoals je op het voorbeeld ziet en wat de bedoeling is. En als ik de height:100% weghaal, dan reikt het divje niet tot aan de onderkant, waardoor de achtergrondkleur dus ook halverwege ophoudt en dat is niet de bedoeling - die moet tot aan de onderkant van de fieldset komen
Dus hoe los ik dat dan op?

Overigens doet mozilla het goed een element met float heeft geen invoed meer op het element waar hij inzit, en hoort dit ook niet uit te rekken.

Wel of niet uitrekken is hier toch ook niet aan de orde?. Ik heb een divje (CPDiv) in die fieldset zitten die niet-floatend is en dus de maximale breedte krijgt voor zover dat door die fieldset wordt toegestaan (dat gaat goed) en daarbij heb ik 'm een height: 100% gegeven zodat ie verticaal ook wordt uitgerekt en de achtergrondkleur netjes (zoals in IE te zien is) tot de onderkant reikt. Die floatende divjes zouden dáár geen invloed op moeten hebben volgens mij

Je zou het moeten kunnen oplossen met een "clear" maar ik zou niet weten waar eigenlijk.

een clear ??

Afhankelijk van wat je in die fieldset zil laten zien is een gewone table misschien het makkelijkst

Wat je op m'n voorbeeldplaatjes ziet zit nu in die fieldset. Er komen nog een paar buttons bij. Maar ik zie dus ook geen reden tabellen te gebruiken, want die buttons moeten gewoon onder elkaar komen. Het is dus allemaal pure layout

zondag 29 juni 2003 21:39

Acties:

Justice

marty schreef op 29 June 2003 @ 21:28:
[...]

Als ik die float left en right weghaal, dan komen die twee divjes onder elkaar te staan in plaats van dat ze naast elkaar komen - zoals je op het voorbeeld ziet en wat de bedoeling is. En als ik de height:100% weghaal, dan reikt het divje niet tot aan de onderkant, waardoor de achtergrondkleur dus ook halverwege ophoudt en dat is niet de bedoeling - die moet tot aan de onderkant van de fieldset komen
Dus hoe los ik dat dan op?

[...]

bij die divjes moet je dan even display:inline; toevoegen, of ze veranderen in span. DIV's zijn block level elements, niet inline. (als je ze niet onder elkaar wilt hebben, je antwoord was een beetje vaag)

Je moet gewoon in die fieldset een div hebben die de achtergrond en border doet, en daarin dan de "add deelnemer" divje float:left geven, binnen de "sorteer op" kolom, die je text-align: right geeft.

ipv height in procenten geef je die in pixels, zodat je geen vage calculaties krijgt met de floatende div die geen 100% aan kan nemen van zijn parent, want die is er niet. Die floatende div geef je dus ook een pixel waarde. Dan moet het opgelost wezen.

En Inderdaad doet Mozilla het goed, en als je er met deze beschrijving niet uitkomt moet je je code maar even door de validator gooien en alle inline styles in de external stylesheet zetten, want er is geen reden om die markup te vervuilen.

[ Voor 40% gewijzigd door Justice op 29-06-2003 21:45 ]

Human Bobby

zondag 29 juni 2003 23:59

Acties:

marty

Topicstarter

thanks
die hoogte in pixels definiëren hielp inderdaad.
het is nog een beetje wennen in css te denken

maandag 30 juni 2003 12:52

Acties:

Justice

Inderdaad komt het door de gedachte achter de tags. Bijvoorbeeld de standaard grootte van text in een browser (of keyword: medium) heeft te maken met de armafstand van een gemiddeld persoon tot het scherm (en een hoek van ongeveer 0.227 graden) die dan een bepaalde leesbare text opleverd.

Als je je verdiept in de structuur zie je dus dat float betekend dat alle inhoud binnen een float buiten de context van het document gehaald wordt (wat logisch is), maar dit betekend dus dat er geen variablen ge-erfd kunnen worden (lastig trouwens dat vertalen van jargon). vandaar dat procenten niet helpen, 100% van 0 is nog steeds 0.

Human Bobby

maandag 30 juni 2003 13:23

Acties:

Rickets

Finger and a shift

marty schreef op 29 June 2003 @ 21:28:
een clear ??

[beetje-offtopic]
http://www.w3.org/TR/CSS21/visuren.html#propdef-clear

If some cunt can fuck something up, that cunt will pick the worst possible time to fucking fuck it up, because that cunt’s a cunt.