Topic: Extra space in IE

I'm helping code a website and I'm running into an issue with IE.

http://www.11oh1.net/scanam

In FF and Safari the page renders fine with the left content div being 10px from the left edge and the nav div being 10px from the right edge.

In IE there is an extra 10px of space between the nav div and the right edge causing the two boxes to get mashed together in the middle and I can't figure out what's up with that?

Here's the relevant CSS:

#content {
	background: #fff url('images/forkback.jpg') no-repeat;
	margin: auto;
	width: 760px;
	height: 500px;
	}

#mainbox {
	position: relative;
	border: 1px solid #000;
	top: 17px;
	left: 10px;
	width: 496px;
	height: 191px;
	} 

#mainbox p	{
	padding: 18px;
	font: 10pt times new roman;
	}

 #navbox {
	margin-top: 17px;
	margin-right: 10px;
	float: right;
	width: 230px;
	height: 191px;
	border: 1px solid #000;
	}

I know that IE has trouble with the box model but I'm unsure of where that issue is affecting me and how I could go about correcting it.

Disclaimer: Design and non-liquidity are not my idea so I have no control over the static nature of the page.

:::11oh1:::

(Edited by krets on 09-12-2006 04:20)

[super_quick_reply]

Have you tried to remove the white-space and CRLF between the tags in your markup ? I seem to remember a bug in IE where empty ( of printable characters ) text nodes altered the layout.

[/super_quick_reply]

#navbox { display: inline; }

Known some places as the IE double-margin bug.

(Edited by reisio on 09-12-2006 08:56)

one more detail, for the heading I'd rather do something like :

<img src='images/topscanam.jpg' style='padding-bottom:96px;background:url(images/toppicrow.jpg) bottom repeat-x red' alt='SAC' />

/!\ this code snippet comes straight from a test I made using javascript: ... thus the inline style. But disable CSS and/or images and you'll see the point of that.



(Edited by poi on 09-12-2006 09:52)

poi: I did the toppicrow.jpg as an image because the company wants those images to randomize. I just stuck that one in there for now as a placeholder. Eventually it's going to be a series of images that randomly pull from a larger directory.

reisio: Worked like a charm.

Thanks for the help guys.

:::11oh1:::

(Edited by krets on 09-12-2006 13:38)

Then, maybe:

<img src='images/topscanam.jpg' style='padding-bottom:96px;background:url(images/random/random.jpg) bottom repeat-x red' alt='SAC' />

Where random.jpg is in fact a server side script serving a random image from the current folder with the correct Content-type.

It's not going to be one random image, it's going to be a series of five to six random images. There will be a pool of 20-25 images and it will randomly pull five to six out for that header deal.

:::11oh1:::

Oh! didn't got that every single small image should be picked at random.
Anyway that's no problem to do using GD.



(Edited by poi on 09-12-2006 18:58)