webForumDet fria alternativet
Logga in / Bli medlem

Fråga om bakgrund till ett fieldset

HTML & CSS

18 svar · 1 031 visningar · startad av EmmaW

EmmaWMedlem sedan apr. 2008152 inlägg
Frågan#1

Hej :)

Jag har skapat detta:
http://img508.imageshack.us/img508/4706/nummer1ol3.jpg

Med hjälp av den här koden:

<html>
<head>

<style type="text/css">
<!--
.poll_wrap {
	width:300px;
}

	.poll_wrap fieldset {
		border: 1px solid #000;
		padding: 8px;
		background-color:#CCCCCC;
	}
-->
</style>
</head>

<body>

<div class="poll_wrap">
 
  <fieldset>
  <legend>Överskrift</legend>
	Test
  </fieldset>
</div>
		
</body>
</html>

Men jag skulle vilja skapa detta (ändrat i paint):
http://img297.imageshack.us/img297/1/nummer2zj7.jpg

Alltså bakgrundbilden inte går högre upp än till bordern, det ser dumt/fult ut..

Någon som vet hur man gör detta? :)

tantenMedlem sedan nov. 20051 596 inlägg
#2

Nu blev det ett klipp och klister från en av mina sidor.
Som vanligt Doctype...ett måste
Få bokstäver att bli lika stora. Nollställa så mycket man kan.
Sedan kolla sidan i någon som gör screenshots. Det kan finnas stora skillnader mellan webläsare när det gäller formulär, men min css kanske kan få dig en bit på väg om du anpassar min till din.

html{font-size:125%;}
body{font:49%/240% verdana,georgia,Helvetica,sans-serif;}
/*nästa är bara för IE6*/
* html{	font:124%/220% verdana,georgia,Helvetica,sans-serif;}
body,html,div,form,fieldset.legend,label,input{	margin: 0;padding: 0;}
form fieldset{width:300px;display:block;border:1px solid #b8860b;padding:1.5em;font-family:verdana,sans-serif;line-height:2em; height: 10em;}
input{border:none;margin:3px;background:#deb887; padding: 5px;}
label{font:small-caps bold 1em/2 "MS Sans Serif",Geneva,sans-serif;color:#b8860b;}
legend{font:small-caps 1.5em/2 Georgia;color:#b8860b;}

Hinner inte kolla nu...

tantenMedlem sedan nov. 20051 596 inlägg
#3

Kom på nu att din "överskrift" kommer ju ta med sig bakgrundsfärgen...<legend>
Så det var inte mycket hjälp jag kom med annat än att få det att se så lika ut som möjligt i webläsarnaför övrigt...

EmmaWMedlem sedan apr. 2008152 inlägg
#4

Ah okej :( Tack för försöket i alla fall :)

Kanske någon annan som vet en lösning på detta? Känns som det egentligen inte borde vara en så svår sak..

tantenMedlem sedan nov. 20051 596 inlägg
#5

Jag tror inte det är en lätt sak, vad du egentligen vill göra är att sätta bakgrundsfärg på ett halvt ord... :OO
Kanske går det med en bakgrundsbild, sedan hur det visas i olika webläsare...återstår att se... :q

hltmMedlem sedan nov. 2004438 inlägg
#6

Jag har själv tragglat med det här tidigare och fått det att funka med att sätta en negativ padding för IE, men det här är mycket snyggare och framför allt enklare lösning :) :
http://www.mattheerema.com/archive/getting-fieldset-backgrounds-and-legends-to-behave-in-ie

EmmaWMedlem sedan apr. 2008152 inlägg
#7

Tack för svar.

Ja det där med bakgrundsbild borde ju funka!

hltm skrev:

Jag har själv tragglat med det här tidigare och fått det att funka med att sätta en negativ padding för IE, men det här är mycket snyggare och framför allt enklare lösning :) :
http://www.mattheerema.com/archive/getting-fieldset-backgrounds-and-legends-to-behave-in-ie

Humm..jag kan inte läsa den här sidan alls bra. Alla hans visiningsbilder är borta plus att hans koder är helt ihoptryckta. Är det bara jag eller? Jag testade både IE och firefox men samma i båda.

hltmMedlem sedan nov. 2004438 inlägg
#8

Egentligen bara två små saker att lägga till i din kod: position: relative; på fieldset och position:absolute på legend

<html>
<head>

<style type="text/css">
<!--
.poll_wrap {
	width:300px;
}

	.poll_wrap fieldset {
		position: relative;
		border: 1px solid #000;
		padding: 8px;
		background-color:#CCCCCC;
	}
	html legend{ position:absolute; top: -.5em; left: .5em; }
-->
</style>
</head>

<body>

<div class="poll_wrap">
 
  <fieldset>
  <legend>Överskrift</legend>
	Test
  </fieldset>
</div>
		
</body>
</html>
EmmaWMedlem sedan apr. 2008152 inlägg
#9

Tack så mycket, det funkar jättefint! :)

Det enda är att nu går borden i fieldset:et rakt igenom texten(legend) i Opera och Safari (i IE och FF funkar det fint). Inte hela världen kanske, men tänkte endå höra om det finns någon liten lösning på det också?

EmmaWMedlem sedan apr. 2008152 inlägg
#10

Bump

EmmaWMedlem sedan apr. 2008152 inlägg
#11

bump

Fuels avatarFuelMedlem sedan okt. 20001 285 inlägg
#12

Sluta bumpa

jarvkloMedlem sedan juli 20013 378 inlägg
#13

Bump :moose

MSIE är den största "boven" i det här sammanhanget, så det som enbart behövs för att få till lösningen i den kan man flytta ut i en "villkorlig kommentar"

<style type="text/css">
<!--
.poll_wrap {
        width:300px;
}

        .poll_wrap fieldset {
                position: relative;
                border: 1px solid #000;
                padding: 8px;
                background-color:#CCCCCC;
        }
-->
</style>

<!--[if lte IE 7]>
<style type="text/css">
       html legend{ position:absolute; top: -.5em; left: .5em; }
</style>
<![endif]-->

(verifierat i FF3+Opera9.5+Safari+MSIE7 - alla på XP)

EmmaWMedlem sedan apr. 2008152 inlägg
#14

Ah funkar perfekt tack! :) Föresten kommer det här att funka på IE 6 nu också tror du?

Förlåt för bump :(

jarvkloMedlem sedan juli 20013 378 inlägg
#15

EmmaW skrev:

Föresten kommer det här att funka på IE 6 nu också tror du?

Har testat nu - och det verkar inte vara några problem där...

Kan rekommendera http://www.microsoft.com/windows/products/winfamily/virtualpc/overview.mspx tillsammans med http://www.microsoft.com/downloads/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8ef&DisplayLang=en om du vill kunna testa MSIE6/7/8 i egna miljöer utan att meka med installationerna på din egen Windows-box (MS lägger upp nya virtuella miljöer så snart en av de äldre passerar sitt bäst-före-datum) ;)

EmmaWMedlem sedan apr. 2008152 inlägg
#16

Aha, det låter bra, det ska jag test! :)

tantenMedlem sedan nov. 20051 596 inlägg
#17

Du har en snabbkollsida här också där man också kan mixa 6:an och 7:an också för att se skillnaderna.
http://ipinfo.info/netrenderer/

EmmaWMedlem sedan apr. 2008152 inlägg
#18

tanten skrev:

Du har en snabbkollsida här också där man också kan mixa 6:an och 7:an också för att se skillnaderna.
http://ipinfo.info/netrenderer/

Humm, alltså min sida renderas helt och hållet fel när jag testar med IE8 Beta. Vissa sidor visas inte alls medans andra visas konstigt. Stämmer det verkligen? Den funkar bra i IE7, firefox, opera, Safari men så i IE8 blir den helt fel?
Är det bra att tanka hem IE8 Beta någonstans redan nu och testa felen ordentligt, eller tror ni det kommer rättas till i slutversionen?

Jag tycker att webläsarskillnaderna det jobbigaste med att göra hemsidor.

jarvkloMedlem sedan juli 20013 378 inlägg
#19

EmmaW skrev:

Jag tycker att webläsarskillnaderna det jobbigaste med att göra hemsidor.

Jag med - därför är det viktigt att man hittar verktyg man kan lita på och trivs med..

Men det fiffiga med att köra VirtualPC är att Microsoft tillhandahåller olika "images", en med IE6, En med IE7 och en med IE8 - så oavsett vad du har på din "vanliga" Windowsmaskin, kan du testa hur det ser ut med andra webbläsare utan att ändra det du är van vid (eller är påtvingad) ;)

Dessutom är MS VirtualPC helt gratis ;)

265 ms totalt · 4 externa anrop · v20260731065814-full.86ec41c2
127 ms — deklarationer (db)
0 ms — hämta statistik (cache)
135 ms — hämta tråd, inlägg och bilagor (db)
124 ms — ändringar (db)