/    Sign up×
Community /Pin to ProfileBookmark

firefox issue with height/padding

Copy linkTweet thisAlerts:
Jun 07.2007

The padding-top and height css properties differs in IE and Firefox.
This is what happens:
<h2> Hello</h2>
Now if we add the style tags
h2
{
background-color:yellow;
padding-top:10px;
height:50px;
}

In IE ,the height stays fixed as 50px but with Firefox, the height tends to increase as we add the padding-top value.

Is there any way to fix this in Firefox, ie to have the height fixed at a certain value?

Please help.

thanks
Bindia

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriJun 07.2007 — [B]NOTHING[/B] needs to be fixed in Firefox - the defined size of an elements is the inside dimensions, and padding, margins, and borders add to this. If you are seeing different behaviour in IE, it is because you are not using a [B]valid doctype[/B] and IE is in [B]quirks mode[/B] with its buggy outdated box model.
Copy linkTweet thisAlerts:
@bindiaauthorJun 07.2007 — Pardon me...I am quite a beginner with CSS.

Is there anything to be done to fix this 'quirk' mode in IE?....any line of css style tags or anything.


Thanks
Copy linkTweet thisAlerts:
@CentauriJun 07.2007 — This is not css, but basic html - the first line that should appear in your html page is the doctype. For new pages, the most appropriate one to use is html 4.01 strict - so the start of your html should look like [CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Your title here</title>
</head>[/CODE]
Copy linkTweet thisAlerts:
@ray326Jun 07.2007 — Centauri is being kind by using the term "outdated." IE's box model is just flat wrong in older versions and in new versions without a proper doctype.

http://www.quirksmode.com/
Copy linkTweet thisAlerts:
@Major_PayneJun 08.2007 — Just some additional info.

Internet Explorer box model bug

One of many sites covering the "hack" for IE's box model problem:

Solutions to the Internet Explorer 5 (IE5) Box Model - Hack and others

Ron
×

Success!

Help @bindia 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.18,
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,
)...