Hur fixar man "korrekt" utseende på en fieldset med CSS?

2 svar · 319 visningar · startad av sabbacus 24 feb. 2003

sabbacusMedlem sedan juli 2002630 inlägg

Frågan24 feb. 2003 23:34#1

Tja. Jag sitter här och morrar över att Phoenix visar mina fieldset prexis som jag vill ha dem medan IE visar en hyfsat morbid variant av samma kod. Hur modifierar jag min stilmall så att IE visar min fieldset som den "ska" se ut?

Hur det ska se ut:
http://home.vxu.se/mkand99/fieldset/html_phoenix.gif

Hur IE6 visar det:
http://home.vxu.se/mkand99/fieldset/html_IE6.gif

HTML:
<fieldset>
<legend>Först och främst</legend>
text text text
</fieldset>

CSS:
fieldset {
width: 400px;
font-size: 12px;
font-family: verdana;
background-color: #c0c0c0;
border: 2px solid black;
}
legend {
margin-top: 10px;
font-size: 12px;
font-family: verdana;
font-weight: bold;
background-color: #808080;
border: 2px solid black;
}

Att ändra margin-top till 0px gör ingen större skillnad då det verkar som att fieldsetelementet verkar gå en bit utanför dess border.

Tips vore trevligt.
/M

sabbacusMedlem sedan juli 2002630 inlägg

11 mars 2003 01:08#2

Ingen?
*snyft*

Peter SMedlem sedan dec. 20025 483 inlägg

11 mars 2003 07:49#3

Du kanske skulle kunna använda "div"-element istället?

(Har dock inte tillgång till någon Gecko-läsare för tillfället, men detta fungerar i MSIE 6)

<style type="text/css">
<!--

div#fieldset {
	position : relative;
	width : 400px;
	height : 200px;
	padding : 20px 10px 10px 10px;
	background : #c0c0c0;
	border : 2px solid #000;
	font : normal 12px verdana;
}

div#legend {
	position : absolute;
	width : auto;
	top : -10px;
	left : 10px;
	padding : 1px;
	background : #808080;
	border : 2px solid #000;
	font : bold 12px verdana;
	text-align : center;
	z-index : 2;
}

-->
</style>

</head>

<div id="fieldset">
	<div id="legend">Rubrik...</div>

	Lite text här...
</div>