Legend element not lining up in IE6/7

BabyJeffy · Sep 15, 2008

I was styling up a form today, and came across some odd (yet well known) behaviour in IE6 and IE7.

The [tt]legend[/tt] element appears to have a left margin - that you cannot get rid of by setting the margin to zero (as works in all other browsers).

Here is the code as a stand-alone test page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="content-language" content="en"/>
	<title>Test Harness</title>
	<style type="text/css">
	form, fieldset, legend {
		margin: 0;
		padding: 0;
		border: 0;
	}
	</style>
<body>
	<form>
		<fieldset>
			<legend>Fill in the fields to get access</legend>
			<div class="formRow">
				<label for="username">Username</label>
				<input id="username" type="text"/>
			</div>
			<div class="formRow">
				<label for="password">Password</label>
				<input id="password" type="password"/>
			</div>
			<div class="formRow">
				<button id="submit">Submit</button>
			</div>
		</fieldset>
	</form>
</body>
</html>

There are posts that suggest using negative left margins are the solution... but I wasn't able to make them work (with the doctype I have used in this test harness).

If anyone has any suggestions for IE6 and IE7 solutons to this problem... that'd be great!

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

traingamer · Sep 15, 2008

A negative left margin of -7px worked just fine for me (in IE6 XP).

Code:

    <style type="text/css">
    form, fieldset, legend {
        margin: 0;
        padding: 0;
        border: 1;
    }
     legend { 
	margin-left: -7px;
    }
    </style>

The border: 1 without the negative margin pretty much suggests why it has a margin. Looks like IE wants to position it so the outline of the fieldset shows.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

grtammi · Sep 15, 2008

You could try setting the legend to display: block or display:inline ... maybe even float it to take it out of the normal document flow.

Greg

BabyJeffy · Sep 15, 2008

traingamer... interesting that it worked for you... for me using IE6 with XP I had no such luck! I'll do a reboot tomorrow and see if it's anything residual from the OS (you know how fickle Windows can be if you don't reboot from time to time).

I solved the problem by just not showing the legend using CSS - but I know the problem has bitten me before.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Legend element not lining up in IE6/7

BabyJeffy

Programmer

traingamer

Programmer

grtammi

Programmer

BabyJeffy

Programmer

Similar threads

Part and Inventory Search

Sponsor