[css]fieldset, legend en achtergrondkleur - Softwareontwikkeling

maandag 4 april 2005 12:15

Acties:

CQB 241

Topicstarter

Goedemiddag,

Bij het stylen van een fieldset kom ik een raar probleem tegen.
Versimpelde code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fieldset test</title>
<style type="text/css">
body {
    background-color:yellow;
}

fieldset {
    border: solid 1px black;
    background-color:white;
}
</style>
</head>
<body>
<fieldset>
    <legend>Legend text</legend>
    <p>test text</p>
</fieldset>
</body>
</html>

In mozilla valt de witte achtergrond de fieldset netjes binnen de zwarte border zoals ik wil. Zodra je dit ga bekijken in IE (6.0) dan zie je dat de witte achtergrond start vanaf de legend, en dus buiten de zwarte border valt.

Heb hier al eens eerder naar gekeken, en toen heb ik een "ranzige" (imho) oplossing hiervoor gevonden door de fieldset en de legend te vervangen met div-jes die negative margins e.d. bevatten.

HTML:

1 2	<div id="replace_legend">Legend text</div> <div id="replace_fieldset">test text</div>

Ik zou eigenlijk wel eens willen weten of hier een CSS only oplossing voor is.

Bijgevoegd screenshotjes van het betreffende probleempje.
Afbeeldingslocatie: http://www.tweakers.net/ext/f/55955/full.gif

Afbeeldingslocatie: http://www.tweakers.net/ext/f/55955/full.gif

Afbeeldingslocatie: http://www.tweakers.net/ext/f/55956/full.gif

[ Voor 11% gewijzigd door TeeDee op 04-04-2005 12:15 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

maandag 4 april 2005 12:18

Acties:

André

Analytics dude

Tja, het is gewoon de manier waarop IE de fieldset rendered. Misschien kun je de fieldset in IE een negatieve padding-top margin-top geven?

maandag 4 april 2005 12:22

Acties:

TeeDee

CQB 241

Topicstarter

Dat geeft als resultaat dat de tekst in de legend wordt afgesneden.

Heart..pumps blood.Has nothing to do with emotion! Bored

maandag 4 april 2005 16:53

Acties:

sopsop

[v] [;,,;] [v]

Persoonlijk vind ik de implementatie van FF ook niet mooi eigenlijk.

maandag 4 april 2005 17:43

Acties:

TeeDee

CQB 241

Topicstarter

boppert schreef op maandag 04 april 2005 @ 16:53:
Persoonlijk vind ik de implementatie van FF ook niet mooi eigenlijk.

Mjah, het is wel precies datgene wat ik wil hebben

Heart..pumps blood.Has nothing to do with emotion! Bored

maandag 4 april 2005 20:25

Acties:

Clay

cookie erbij?

Fieldset is sowieso een raar ding in IE. Het is voor zover ik weet het enige ding dat een ronde border heeft van zichzelf - wat IE verder niet kan - en zodra je er ook maar iets aan styled wordt die vierkant. Die backgroundcolor is zo op de meest waardeloze manier gedaan waarop ze het hadden kunnen implementeren

Cascading Stylesheet:

legend {
    position:relative;
    margin-top:-.5em;
    padding-left:1.2em;     
}

werkt wel enigszins, maar dan ziet het er in ff niet meer uit.

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

maandag 4 april 2005 20:29

Acties:

Verwijderd

ja... jammer maar helaas zijn fieldsets / legends vrijwel onmogelijk consistent cross browser te stylen. Bekijk het ook maar eens in Opera.

maandag 4 april 2005 21:09

Acties:

JHS

Splitting the thaum.

Clay schreef op maandag 04 april 2005 @ 20:25:
(...), maar dan ziet het er in ff niet meer uit.

Gelukkig is dat altijd op te lossen met conditional statements en een extra stylesheetje, en dat soort maatregelen

.

DM!