Post by JohnnyO » Tue Dec 04, 2007 3:50 am

I have been trying to figure this one out for a couple of days now with no luck fixing it.

Here is my CSS

Code: Select all

#container {
	width: 779px;
	position: relative;
	left: 50%;
	margin-left: -389px;
	background: #ffffff url('../image/cbak.png') repeat-y;
}
This works correctly in IE but does not show up in Firefox (Opera, Safari)

Edit:

Maybe it would help if I were more specific about what I was trying to accomplish.  I have a background which is 779 x 5px which I am trying to use as the background of the main body of the store.  This works perfectly in IE, because it tends to look the other way when there is an error in the code.  Is it possible that the source of this problem lies in a different location other than the one cited above?

Any help is appreciated
Last edited by JohnnyO on Tue Dec 04, 2007 11:30 pm, edited 1 time in total.

If you make it idiot proof, they will just build a better idiot.


User avatar
New member

Posts

Joined
Wed Nov 14, 2007 7:31 am
Location - Denver, CO - USA

Post by JNeuhoff » Thu Dec 06, 2007 5:25 pm

Why are you using a negative margin-left?

If your background image is to be used for your whole site you should apply it to the BODY-element or the outer-most wrapper DIV. Also bear in mind that, when using a fixed pixel width, Firefox may not do a good job when the user increases the font-size. It is better to use a relative width, e.g. width:65em, to accomodate for this.

Override Engine * Integrated VQMod * Unused Images Manager * Instant Option Price Calculator * Number Option * Google Rich Snippets * Google Tag Manager * Export/Import Tool * SpamBot Buster * Survey Plus


User avatar
Expert Member
Online

Posts

Joined
Wed Dec 05, 2007 3:38 am


Post by JohnnyO » Fri Dec 07, 2007 12:27 am

Thank you for your response!

The margin-left: -389px; is to center my store inside of the browser window.  total width 779px / 2 = 389?? not sure why this is, but it's not apparent in the CSS.

Also the background image is not for the entire site body, only for the container. You can see what im talking about at www.corrgraphics.net/beta and view it using FF and IE.

Note: Not a finished product (need to compress graphics for dial uppers, fix/create buttons, shipping / tax problems)

Other than those things, I'm open to suggestions :)

Thanks, -JO

If you make it idiot proof, they will just build a better idiot.


User avatar
New member

Posts

Joined
Wed Nov 14, 2007 7:31 am
Location - Denver, CO - USA

Post by JohnnyO » Fri Dec 07, 2007 1:14 am

I had the footer module disabled and by re-enabling it, The background will render correctly.

I'm not sure why, I will look into this further to see if I can break it down.

Thanks, -JO

If you make it idiot proof, they will just build a better idiot.


User avatar
New member

Posts

Joined
Wed Nov 14, 2007 7:31 am
Location - Denver, CO - USA

Post by mltsy » Tue Feb 12, 2008 12:21 am

Have you tried replacing:

Code: Select all

left:50%;
margin:-389px;
with:

Code: Select all

margin:auto;
That will also center it - regardless of the pixel width.  I don't know that that would have helped the original problem at all... but who knows.

Newbie

Posts

Joined
Tue Feb 12, 2008 12:08 am
Who is online

Users browsing this forum: No registered users and 4 guests