Header width 1280

[abzd]

I've banner in my header set to the width of 1280px. It sits perfect in Firefox but it doesnt sit flush in IE. I think this because of the scrolling bar down the side which I will need.

Is there anyway to work around this or do I just need to cut my banners a bit shorter and apply a background style to my banner for firefox.

any help would be great, here is a sample of the site

http://www.dan-cepromotions.co.uk/testing/demo/opstrainmain.htm

[boogyman]

1280 wide monitors are far from being standard, so I would suggest you use that as a background image so the user doesn't receive the horizontal scroll bar if he/she doesn't have their resolution set to that

[abzd]

I have it running through some javascript at the moment so its a new picture on refresh.
Are you saying it would be better set up as a style in the css as a background-image?

[boogyman]

Are you saying it would be better set up as a style in the css as a background-image?
yes



div#banner {
background: #hexadecimal_color_code url('/path/to/banner/image') no-repeat top left;
}

the color code is a backup incase for some reason the image doesnt load, your page will not look entirely off.

[abzd]

So I'll have to set up a different style for each banner picture I have?

[boogyman]

if you are showcasing them in a gallery then I would leave them the same, however it appears like you are just using javascript to load a new image every time... You could modify the javascript to apply the background image to the element rather then parse it into the top.

[abzd]

not 100% sure how to change the js

would that be adding in something like:


.style.backgroundImage = "url('filename.jpg')";

[boogyman]

element.style="background: #hex url('url/file.ext') no-repeat top left";

however I am not sure if that is supported in all javascript versions you may have to do similar to how you declared it



element.style.background-color="#hex_color_code";
element.style.background-image="url('url/file.ext')";
element.style.background-repeat="no-repeat";
element.style.background-position="top left";

[abzd]

brillant, i'll try that out tomorrow!

[abzd]

I can't seem to get this to work, I think trimming down the graphics might be the easiest way to work around this.