[SOLVED] margin and padding in different browsers

danny322 · #1 Jan 30th, 2008, 08:27

Is it just me...or does firefox and ie have different interpretations of margin and padding? If so, how is this problem solved?

Thanks, Danny322

JustinStudios · #2 Jan 30th, 2008, 10:08

Yes they do.

I just use margin for positioning then use padding for adjustments. The way I was taught was to use Floats and Margins. I've NEVER come across a design that I had to hack to make work, nor have I ever had many problems with this method.

Another thing is in FF Margin is from the top element I believe, where IE its from the previous element. So if you had a container div IE moves it down below the container an additional margin amount, while FF moves both container and inner div the same. To fix that, set the outer div to the margin and the inner div to the padding I believe...

welshstew · #3 Jan 30th, 2008, 10:12

One of the main issues is that the differing browsers have a differing default style sheets for certain elements, paragraphs, headings etc.

The most common way to get around this is to use the global whitespace reset:

Code: Select all

* {margin:0; padding:0;}

or you can go the whole hog and use the universal reset:

Code: Select all

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

danny322 · #4 Jan 30th, 2008, 10:27

Hi guys, thanks for the info.

Welshstew, just as an example im working on this site at the moment.........

http://www.design365.co.uk/templates/temp1.htm

In ie and firefox you'll notice a difference in the spacing between the 'our products' box and 'welcome to medical supplies', is it possible you could show me how to make the space the same?

P.S ignore the left hand menu difference im still having trouble with that!

Cheers, Danny322

welshstew · #5 Jan 30th, 2008, 10:44

In IE7 I get a scroll bar on the right hand side, i'm pretty sure that is what is pushing your divs together.

Sort that out and it should be fine.

try adding clear:both; to your clearing div to see if that helps

danny322 · #6 Jan 30th, 2008, 11:03

hi again welshstew

ive took the clearing divs out now, as u will see the middle boxes are all touching.......

http://www.design365.co.uk/templates/temp1.htm

I put clear: both; in but it seemed to mess it up. Im not sure wether i know how to properly set a clearing div, i want 10 pixels of space between the boxes, whats the best way to do this?

Also, ive set the width of the banner and footer as 100% so it covers the whole page. Is this the correct way of doing it or is that why im getting a horizontal scroll bar?

Thanks again, Danny322

welshstew · #7 Jan 30th, 2008, 11:24

add margin-bottom:10px; to the long_slice div (I havn't checked IE yet - lets get FF back to normal first!

)

welshstew · #8 Jan 30th, 2008, 11:29

There are a number of ways to set up a clearing div.

the most simple one is:

Code: Select all

/*clear the decks*/

.clear	{clear:both; display:none;}

However, most of the time I use:

Code: Select all

/*clear the decks*/

.clear	{clear:both; width:0px; height:0px; overflow:hidden; font-size: 1px; line-height: 0px; display:none;}

As this ensures IE6 doesn't add any space to the div

danny322 · #9 Jan 30th, 2008, 11:52

ahhh welshstew the margin-bottom: 10px; worked a treat! Am i still getting a horizontal scroll bar? I havnt got IE7 on this comp thats all

welshstew · #10 Jan 30th, 2008, 12:31

nope, no scroll bar, however, the bottom box (today's selected products) is aligned right on the bottom of footer, so you may want to have a look at that.

you can install ie7 and then get ie6 through multiple ie.

danny322 · #11 Jan 30th, 2008, 12:40

hmmm yea thats strange i thought the margin-bottom i put on the long_slice div would have put a space between that and the footer

welshstew · #12 Jan 30th, 2008, 13:00

I would have thought so too.

If you change margin: 0px 10px 0px 0px; on long_container to margin: 0px 10px 10px 0px; then it adds the appropriate space. But FF is slightly bigger as a result.

hhmmm, try adding a clearing div underneath that last long_slice

danny322 · #13 Jan 30th, 2008, 13:12

Thanks welshstew, the clearing div didnt work so i used the margin: 0px 10px 10px 0px;, i can live with the difference in space between browsers lol

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] Padding and Margin	mcdanielnc89	Web Page Design	5	Dec 24th, 2007 23:58
Padding and margin for template does not work anymore	LGS	Web Page Design	10	Nov 30th, 2007 19:37
Strange Padding/Margin	MaxCurrent	Web Page Design	2	Jul 24th, 2007 10:36
margin?	nasumaru	Web Page Design	14	Jan 30th, 2007 21:52
Align prob (padding? margin?)	m1k3	Web Page Design	5	Jun 13th, 2006 16:02

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] margin and padding in different browsers