Positioning/Aligning Banner with Background Image

[kyuusei]

Hey guys I need some help with my website: http://www.fox1photography.co.cc/test2.html

Now depending on what browser you use, the banner may or may not line up with the background image like in the screenshot below:

I've tried to use various iterations of CSS tweaks but this still happens. My last resort is to use an integrated background image with banner and use a fixed height, but I'd rather not. Any ideas?

 

[xav0989]

what browser are our using? I see no problem under firefox 3.5.2

Anyways, try adding the following to your header css.

position: relative;
left: -1px;

BTW, instead of having the header outside the main div, enclose everything inside a div that you position in the center.

 

[kyuusei]

Everything looks fine in Firefox, but the problem shows up when using IE to render the page. I haven't gotten anyone to test it with Google Chrome or Opera.

 

[descalzo]

Add to style:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #888888;
background-color: #E1E1E1;
background-repeat:repeat-y;
background-position:50% 0%;
background-image:url('http://www.fox1photography.co.cc/graphics/bodybg1.png');
margin: 0px;
border: 0px;

}

 

[kyuusei]

what browser are our using? I see no problem under firefox 3.5.2

Anyways, try adding the following to your header css.

position: relative;
left: -1px;

BTW, instead of having the header outside the main div, enclose everything inside a div that you position in the center.

What you posted didn't exactly work because it just shifts it over to the left, which fixes it in IE8, but breaks it in Firefox 3.5

But switching the banner over to position: relative; and moving it up a few pix did it at least as far as I can tell.

Does it look right on your end? Sing out what browser you're using if you can please. So far it looks right in FF 3.5 and IE8. Thanks for the help guys!

EDIT:
Its still broken on Firefox 3.0
Arrrgh is there anything wrong with my coding or can this be just chalked up to browser bugs?

 

[xav0989]

My solution would have made it work seamlessly if the image would have been inside the centered div. However, it does not work as good when the image is outside.

 

[kyuusei]

My solution would have made it work seamlessly if the image would have been inside the centered div. However, it does not work as good when the image is outside.

No, I tried it with it inside the div. It moves it left a pixel alright, and that fixes it when a browser renders it off to the right. But when opened in a browser that renders it properly, its now off to the left.

So in Firefox 3.5 and IE8 it goes like this:

|Banner|
| BG |
| BG |

In Firefox 3.0 it renders it incorrectly like this:

|Banner|
| BG |
| BG |

With your earlier fix it just makes it go like this in Firefox 3.5 and IE8:

|Banner|
| BG |
| BG |

and like this in Firefox 3.0

|Banner|
| BG |
| BG |

 

[descalzo]

Did you try my fix? It seemed to work on IE7.