---
title: "Fråga om bakgrund till ett fieldset"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/172815-fråga-om-bakgrund-till-ett-fieldset"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "EmmaW"
published: "2008-07-16T17:05:16.000Z"
updated: "2008-07-21T11:58:32.000Z"
replies: 18
views: 1042
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/172815-fråga-om-bakgrund-till-ett-fieldset"
---

# Fråga om bakgrund till ett fieldset

## #1 — EmmaW, 2008-07-16T17:05Z

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? :)

Permalänk: https://www.webforum.nu/p/172815

## #2 — tanten, 2008-07-16T17:49Z

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...

Permalänk: https://www.webforum.nu/p/2126026

## #3 — tanten, 2008-07-16T18:08Z

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...

Permalänk: https://www.webforum.nu/p/2126027

## #4 — EmmaW, 2008-07-16T20:32Z

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..

Permalänk: https://www.webforum.nu/p/2126044

## #5 — tanten, 2008-07-16T20:47Z

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

Permalänk: https://www.webforum.nu/p/2126046

## #6 — hltm, 2008-07-16T21:00Z

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>

Permalänk: https://www.webforum.nu/p/2126051

## #7 — EmmaW, 2008-07-16T21:20Z

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.

Permalänk: https://www.webforum.nu/p/2126053

## #8 — hltm, 2008-07-16T21:23Z

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>
```

Permalänk: https://www.webforum.nu/p/2126054

## #9 — EmmaW, 2008-07-16T23:58Z

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å?

Permalänk: https://www.webforum.nu/p/2126063

## #10 — EmmaW, 2008-07-18T00:00Z

Bump

Permalänk: https://www.webforum.nu/p/2126191

## #11 — EmmaW, 2008-07-19T12:59Z

bump

Permalänk: https://www.webforum.nu/p/2126414

## #12 — Fuel, 2008-07-19T22:28Z

Sluta bumpa

Permalänk: https://www.webforum.nu/p/2126459

## #13 — jarvklo, 2008-07-19T23:08Z

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)

Permalänk: https://www.webforum.nu/p/2126462

## #14 — EmmaW, 2008-07-20T09:47Z

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 :(

Permalänk: https://www.webforum.nu/p/2126486

## #15 — jarvklo, 2008-07-20T23:40Z

> **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) ;)

Permalänk: https://www.webforum.nu/p/2126652

## #16 — EmmaW, 2008-07-21T09:21Z

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

Permalänk: https://www.webforum.nu/p/2126676

## #17 — tanten, 2008-07-21T09:27Z

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/>

Permalänk: https://www.webforum.nu/p/2126677

## #18 — EmmaW, 2008-07-21T10:18Z

> **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.

Permalänk: https://www.webforum.nu/p/2126682

## #19 — jarvklo, 2008-07-21T11:58Z

> **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](http://www.webforum.nu/showthread.php?p=1424748#post1424748) ä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 ;)

Permalänk: https://www.webforum.nu/p/2126692

---

Tråden på webben: https://www.webforum.nu/amne/html-css/172815-fråga-om-bakgrund-till-ett-fieldset
