/    Sign up×
Community /Pin to ProfileBookmark

No fieldset padding top in IE8

Copy linkTweet thisAlerts:
Nov 03.2012

Sample form:

[CODE]<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
fieldset {padding: 15px;}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Form</legend>
<p>
<label for=”name”>Name </label><input id=”name” type=”text”>
</p>
<p>
<label for=”email”>Email </label><input id=”email” type=”text”>
</p>
</fieldset>
</form>
</body>
</html>[/CODE]

There’s no padding top in IE8. Any cross-browser solution?

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@drunken_devNov 03.2012 — This is just a suggestion.

Try it with a div and see if it still happens.

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#field{padding:20px 20px 20px 20px;background-color:#ff00ee;height:150px;width:600px;border:ridge 1px #cccccc;}
</style>
</head>

<body>
<div id ="field">
<form>

<legend></legend>
<p>
<label for="name">Name </label><input id="name" type="text">
</p>
<p>
<label for="email">Email </label><input id="email" type="text">
</p>

</form>
</div>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@Rain_LoverauthorNov 04.2012 — This is just a suggestion.

Try it with a div and see if it still happens.[/QUOTE]

It doesn't help. Besides, I don't want to remove the fieldset and legend value.
Copy linkTweet thisAlerts:
@drunken_devNov 04.2012 — It doesn't help. Besides, I don't want to remove the fieldset and legend value.[/QUOTE]

For starters your CSS may need changing.

It may or may not be the problem though I only ever write CSS shorthand with all the elements.

Or I specify "padding-top"

[code=html]fieldset {padding: 15px;}[/code]

[code=html]fieldset {padding-top: 15px;}[/code]

[code=html]fieldset {padding: 15px 10px 15px 10px;}[/code]

Might be worth a try.

Good practice anyway.
Copy linkTweet thisAlerts:
@bundatNov 04.2012 — fieldset+legend padding-top is a mess in IE.

All padding-top values appear ABOVE the legend, thus pushing the entire fieldset box down (i.e. just like margin-top)

The easiest solution is to use <!--[if IE conditionals, and redefine the CSS for IE ONLY as:

fieldset {padding-top: 0}

legend {margin-bottom: 15px}

...yeah, I know, if IE conditionals are very ugly hacks, but the only way you'll get that space in the top of the box is adding it as margin-bottom to legend.

OR, you can drop the padding for fieldset altogether, then wrap the contents in a div block with its own padding/margin. Haven't tried it that way, but it should work, and it should be cleaner.
Copy linkTweet thisAlerts:
@Rain_LoverauthorNov 04.2012 — OR, you can drop the padding for fieldset altogether, then wrap the contents in a div block with its own padding/margin. Haven't tried it that way, but it should work, and it should be cleaner.[/QUOTE]

Best solution! Thanks! ?
×

Success!

Help @Rain_Lover spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...