Topic: Extra space in IE Pages that link to <a href="https://ozoneasylum.com/backlink?for=28422" title="Pages that link to Topic: Extra space in IE" rel="nofollow" >Topic: Extra space in IE\

 
Author Thread
krets
Paranoid (IV) Mad Scientist

From: Right-dead center
Insane since: Nov 2002

IP logged posted posted 09-12-2006 04:18 Edit Quote

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:

code:
#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)

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 09-12-2006 08:34 Edit Quote

[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]

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 09-12-2006 08:55 Edit Quote

#navbox { display: inline; }

Known some places as the IE double-margin bug.

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

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 09-12-2006 08:57 Edit Quote

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)

krets
Paranoid (IV) Mad Scientist

From: Right-dead center
Insane since: Nov 2002

IP logged posted posted 09-12-2006 13:36 Edit Quote

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)

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 09-12-2006 14:07 Edit Quote

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.

krets
Paranoid (IV) Mad Scientist

From: Right-dead center
Insane since: Nov 2002

IP logged posted posted 09-12-2006 17:15 Edit Quote

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:::

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 09-12-2006 18:55 Edit Quote

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)



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu