4 replies to this topic

[bbqroast]

I am in shock I guess, here is why:
I have been working on a website for a while now anyway, I've finally done the CSS layout (well pretty much) yet when I opened t in IE (I have been testing in Firefox) I discovered that the body and side bar boxes have both been squished. Here is the code:

#centerBody	{

	background-image:url('/includes/bg-image/CenterBody.png');

	background-repeat: no-repeat;

	float: left;

	height: 300px;

	width: 466px;

	padding: 9px;

}

#sideBox	{

	width: 180px;

	background-image:url('/includes/bg-image/sideBarPNG.png');

	background-repeat: no-repeat;

	padding: 9px;

	padding-right: 30px;

	height: 300px;

	float: left;

} 

In Firefox I have to boxes with neat curved borders, however in IE they have been trimmed so you can't see the bottom and right borders! I can fix this but then Firefox pushes the body (which is on the right) onto the next line. BTW they are in a 704 pixel wide container. The boxes are 466 pixels wide and the side box is 180 pix wide, the image is actually 210~ pixels wide (with 30 pixels of padding on one side, both boxes have 9 pixels of padding- bear in mind they are separated by a small gap) I believe the problem is due to the padding.

Maybe if their is a IE version of padding?
Oh yeah, is it Firefox or IE that's misbehaving??? (My experience says its IE)

[Alexander]

You seem to be floating both of them to the left, unsure if I had seen that before and that would work without causing the described problems.

On another note, firefox and IE both have varying default paddings, applying a CSS reset script could help keep an accurate representation between browsers.

[bbqroast]

Hmmmm... I think I'll just redo it using some more IE friendly methods...

[wim DC]

Know you can press f12 in IE to open a window in which you can change and add css rules on the fly. Propably faster to test things out than doing it in an editor, saving and deploying/refresing.

[bbqroast]

... I like saving deploying and refreshing...
You make it sound like its hard really its:
edit, CTRL-S then I just refresh...
Yeah, looks like IE is actually right (in my view) on this one:
Firefox sees padding as the "gap" around the box, while IE sees it as the gap between the content and the box's edge and will always keep the box the same size...
I guess I'll just play with margins and stuff...
Here is a diagram  IEFIrfoxPadandMargin.jpg   19.46K   24 downloads as you can see IE sees the margin as the area around the box and padding as the area in between the border and content while Firefox sees margin as IE's padding and padding as IE's margin...