/    Sign up×
Community /Pin to ProfileBookmark

Margin displays wider in Firefox than IE?

Copy linkTweet thisAlerts:
Jun 04.2010

Hi guys,

I’ve no idea why this is happening, but some divs display with wider or taller margins in firefox than they do in IE.

[URL=”http://www.cnsdemo4.co.uk/mpt/”]Example here[/URL] with the far right ‘video’ box.

In IE the video box is perfectly in line with the text to the left. But in Firefox it looks about 10 or more pixels lower.

I’ve set the top margin in <div id=”video”> to 55px, which looks ok in Dreamweaver and IE.

I’ve also tried setting all other margins and padding to ‘0’ but this doesnt cure the problem.

Any ideas guys?

Thanks.

Rodd

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@rodd1000authorJun 04.2010 — Any ideas guys? this is really driving me nuts.

Any help much appreciated!
Copy linkTweet thisAlerts:
@rodd1000authorJun 04.2010 — Resolved this. A margin i'd added to H1 was effecting the the rightbox div.

Changing the H1 top margin over to padding, then '0' the h1 margin, sets the record straight.

Rodd
Copy linkTweet thisAlerts:
@iahneJun 11.2010 — wow..this may help..i have the same problem as well with my project..
Copy linkTweet thisAlerts:
@eenglishJun 11.2010 — Just remember, that you will always have disparate margins between firefox and ie.
Copy linkTweet thisAlerts:
@criterion9Jun 12.2010 — A good solution to fix disparities between browsers is to use a "reset css" or at the least reset margins and padding to 0 for all elements. I use that for all projects and though sometimes you have to code a little extra (such as for the margin/padding for <li> tags) it reduces the amount of "why doesn't it look the same here" troubleshooting.
Copy linkTweet thisAlerts:
@tirnaJun 12.2010 — Resolved this. A margin i'd added to H1 was effecting the the rightbox div.

[COLOR=red]Changing the H1 top margin over to padding[/COLOR], then '0' the h1 margin, sets the record straight.

Rodd[/quote]

The w3schools tutorial on the CSS Box Model might help explain the difference between padding and margin and their effects on content layout.
×

Success!

Help @rodd1000 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.23,
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,
)...