Positioning/Aligning Banner with Background Image

kyuusei

Member
Messages
50
Reaction score
0
Points
6
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:

68282021.gif


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

Community Public Relation
Community Support
Messages
4,467
Reaction score
95
Points
0
what browser are our using? I see no problem under firefox 3.5.2

Anyways, try adding the following to your header css.
Code:
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.
 
Last edited:

kyuusei

Member
Messages
50
Reaction score
0
Points
6
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

Grim Squeaker
Community Support
Messages
9,373
Reaction score
326
Points
83
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

Member
Messages
50
Reaction score
0
Points
6
what browser are our using? I see no problem under firefox 3.5.2

Anyways, try adding the following to your header css.
Code:
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?
 
Last edited:

xav0989

Community Public Relation
Community Support
Messages
4,467
Reaction score
95
Points
0
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

Member
Messages
50
Reaction score
0
Points
6
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

Grim Squeaker
Community Support
Messages
9,373
Reaction score
326
Points
83
Did you try my fix? It seemed to work on IE7.
 
Top