Help with aligning images in IE/Mozilla

[ozmart2004]

I have a page where I have a banner div where I have inserted a banner image and then I used a sliver to fill up the extra space.

In Mozilla it lines up fine but in IE it looks a pixel out. (see jpg attachment)

Also See http://www.nitramedia.com.au

I've tried a few things but can't seem to discover what IE wants.

Here's the css code I used for the Divs:

#container {
			width: 760px;
			\width: 780px;
			w\idth: 760px;
			border: 1px solid gray;
			margin: 10px;
			margin-left: auto;
			margin-right: auto;
			padding: 10px;
		}
#banner {
			padding: 0;
			margin-bottom: 0px;
			background-color: #CCC;
			border: 1px solid #999999;
			background-image:url(../images/sliver.jpg);
		}

and here's the HTML

<div id="banner"><img src="images/header.jpg" alt="DDT" width="700" height="210"/></div>

Appreciate any help.

Thks
Martin
Albury, Australia

[2kool2]

Martin,

Would it not be best to oversize the banner img and place it in the div as a background?

Or add a border to give the same effect as the sliver?

[ozmart2004]

Ok, when I do that the banner div shrinks down to the minimum size and only the top bit of the image can be seen.

What do I have to do to make the div size to the background image?

[2kool2]

Martin.

Try it like this.

Create a banner, let's say 760px by 210px. Oversize it if you wish it should make no difference. Then size the div width & height to display it.

CSS:

#banner {width:760px; min-width:760px; height:210px; background:url(../images/banner.gif) no-repeat center top; padding:0; margin:0; border:0}

HTML:

<div id="#banner"></div>

That should be enough to do it.

Better still would be to add text to the div, in leiu of alt tags or CSS off, in a span and shift it off screen.

HTML:

<div id="banner"><span>DDT: Distributed Development Team</span></div>

CSS:

#banner {as previous example}
#banner span {width:1760px; display:block; margin-left:-1000px}


hope it helps