bredd på h2 element i IE7

Tjena,

Har problem med följande kod:

<h2 class="head-row">Namn</h2>
<table cellpadding="2" cellspacing="0" border="1">
<thead>
<tr class="sub-row">
<th colspan="3">Titel</th></tr>
</thead>
<tr class="row-odd">
<td class="form-desc" style="width: 100px;">
	Telefon<br />
	E-postadress
</td>
<td class="form-field">
	08 12 34 56<br />
	min@mailadress.se
</td>
<td rowspan="2" align="right">
	<img src="/explorer/images/system_user/_noavatar.gif" alt="avatar" />
</td>
</tr>
<tr class="row-odd">
<td colspan="2">dvdv</td>
</tr>
</table><br />

I IE7 blir inte h2 elementet lika bred som sidan, vilket jag vill. Det får samma bredd som texten "Namn" är lång. I FF däremot blir det som jag vill, hela bredden.

Hur fixar man det här?

Tack!

Normalt sett ska den ta hela bredden. Hur ser klassen head-row ut?

jawbreaker skrev:

Normalt sett ska den ta hela bredden. Hur ser klassen head-row ut?

.box-content h2.head-row,
.box-content table tbody tr.head-row {
	margin:				0px;
	padding:			2px 3px;
	background-color:		#c4d2eb;
}

Har även testat att sätta display: block; i min IE7 specifika css, men det gör ingen skillnad.

Om du kollar på H2:an i FF med FireBug, ser du då om H2 fått några ärvda klasser som du inte avsiktligen tänkt för H2?

Där kan du också i realtid laborera med att stänga av eller sätta på diverse egenskaper i realtid. Ett måste i ett sådant här arbetsflöde :)

Jo, jag vet vad Firebug är ;)

Det enda som ärvs är grundinställningen för H2 som jag satt:

h2 {
	font-size:		17px;
	line-height:		24px;
	height:			24px;
	margin:			0px 0 6px 0;
	padding:		0 0 0 0px;
	text-align:		left;	
	background:		url(../pics/header-bg.gif) bottom repeat-x;
}

Fortfarande inget som ska "störa ut" det här dock...

Det är väl något IE-knas bara.
Har du testat att sätta width på h2-taggen i CSS?

doridori skrev:

Det är väl något IE-knas bara.

Nä, säger du det?

doridori skrev:

Har du testat att sätta width på h2-taggen i CSS?

Har testat att sätta width: 400px; på H2 taggen och då blir den 400px bred, men det är liksom inte det jag vill, den ska vara max-bredd, oavsett om sidan är 1000px eller 400px bred.

Har du provat display: inline-block? (Den lär inte vara helt 100% i IE7 - men ändå) eller display:inline?

Dessutom bör det väl vara width:100% i samband med display, tippar jag.

Det skulle underlätta om du kunde visa en komplett sida, med all html och css.

Har testat olika kombinationer av inline/inline-block, utan resultat.

Kolla t.ex. här:
http://dev.kanslietonline.se/tavlingar/kalender/531-116/

Det är alltså rutan "tränare" och den blå bakgrunden som ska sträcka sig över hela bredden. Det funkar som sagt i Firefox, inte IE7 (har inte testat någon annan version av IE ännu).

MickeA.com skrev:

Det enda som ärvs är grundinställningen för H2 som jag satt:
...
Fortfarande inget som ska "störa ut" det här dock...

IE följer inte standard här utan låter

div.box {
	float:					left;
	margin:					0px 0px 10px 0px;
}

krympa alla autovidder till sina innehåll. Lösningen borde vara att sätta t.ex. width:100% på div.box så IE inte kan sätta auto ur spel.

MickeA.com skrev:

den ska vara max-bredd, oavsett om sidan är 1000px eller 400px bred.

Detta åstadkommer man genom att sätta width: 100%

joser skrev:

IE följer inte standard här utan låter
...
krympa alla autovidder till sina innehåll. Lösningen borde vara att sätta t.ex. width:100% på div.box så IE inte kan sätta auto ur spel.

Funkar skitbra, tack ska du ha!

MickeA.com skrev:

Funkar skitbra, tack ska du ha!

Det var en av flera lösningar. Kanske inte den bästa, men det var tänkt att funka generellt för klassen.

Men ingen av dina klass box-divar behöver float egentligen, så om du tar bort float på boxklassen löser du också problemet.

Och om du har de extra boxklass-divarna bara för bottenmarginalen kan du hellre sätta bottenmarginalen på box-footerklassen och skippa alla box-divar.