Lower right background missing in checkout

PeggiF · #1 05-14-2010, 05:09 AM

I'm using neon lights skin but have modified it considerably. It looks fine until checkout and then lower right background is missing. I did increase the height of the the header but it seemed to be a problem beforehand. Does anyone know how to fix this?
http://www.sailorbags.com
Thanks,
Peggi

gb2world · #2 05-14-2010, 09:57 PM

On all your other pages, your header and footer divs are contained within the page-container-2 div - which is providing your blue background on the right.
On your checkout page - page-container-2 is above the footer, so you don't have anything setting that background at the bottom of your page.
I suspect this is not deliberate? If you do a W3C validation of that page - it says you are missing a <body> tag and has errors for misplaced divs.

You might be able to get away with just adding the bg_right.gif background to your page-container or flc-container div, but it might be a good idea to clear up those W3C errors - they can come back and bite you on different browsers and browser versions.

PeggiF · #3 05-15-2010, 04:50 AM

Thanks for your response gb2world. What tpl file would I go to to change that?

gb2world · #4 05-15-2010, 11:35 AM

You can probably take care of the white box by adjusting css in main.cc or altskin.css by adding this:
background url("images/neon_lights/bg_right.gif") repeat-y scroll right top transparent;
to #page-container or.flc-container

But - if you want to fix the W3C errors, you need to use webmaster mode to find the templates. Adding a <body> tag is important - that should be in skin1/customer/home.tpl

PeggiF · #5 05-17-2010, 08:18 AM

Thanks gb2world. But I haven't been able to get rid of the white box in the lower right when I get to checkout. I tried adding the background css you suggested but it didn't go away. I've looked at the composite html of the page and see a closing body tag. The Fast lane checkout module is enabled and is kicking in at this stage. I think it has something to do with the problem since the page looks fine i=until you get to the checkout stage. Any other thoughts?
http://www.sailorbags.com/cart.php?mode=checkout
Thanks,
Peggi

gb2world · #6 05-17-2010, 10:12 PM

Hi Peggie -

Your W3C errors are not unique to the FLC pages. So - I am not sure you can hack the css to get rid of that white box. (But I would not advise not fixing them - but that is your call)
W3C is not reporting the error in the closing body tag, it is the opening <body> tag that is reported missing.

Quote:

document type does not allow element "div" here; assuming missing "body" start-tag
<div id="page-container">

You might want to check skin1/customer/home.tpl and skin1/modules/Fast_Lane_checkout/home.tpl and make sure the <body> was not inadvertently removed. (But that is not your only problem)

I don't see any changes made in main.css or altskin.css (or in skin1/modules/Fast_Lane_Checkout/main.css) - so I not sure where you made your changes?

In Firebug - this is all I have to do in main.css to add the background and it covers the entire page in FF:

#page-container {
background:url(images/neon_lights/bg_right.gif) repeat-y scroll right top transparent;
min-height:100%;
position:relative;
}

In IE7 - it looks even worse, and I don't think this hack will help there. I believe this issue warrants some time to try and understand your flc layout and clean it up.

PeggiF · #7 05-18-2010, 06:23 AM

Thanks gb2world! That did work to remove the white box!
I added in the body tag to home.tpl. I'm confused by the errors mentioned in w3c validator as far as the "end tag omitted" (it's there), "Opening and ending tag mismatch: link line 5" and head ( I have both), "Opening and ending tag mismatch: head line 4 and html" ( I have both), "Premature end of data in tag html line 3" (it's the last thing on the page).

gb2world · #8 05-18-2010, 02:51 PM

Hi Peggie -
For the end tag omitted error - those are elements that are missing a />. Similar to how you open and close something like <p></p> - you have to add a /> to "self close" an element:
<link rel="xx" type="xx" href="xx" />
You have to fix them starting at the top. Sometimes fixing one clears up several others. When you have opening and ending mismatch of divs - that could lead to the kind of problem you were observing. But in the end - it might not. You just have to decide how much of your time it is worth to clean these up.

PeggiF · #9 05-19-2010, 09:48 AM

Thanks again gb2world. I did fix a lot of things. One main thing was the lack of /> in my favicon line in the head.
For some reason, I've got extra space at the bottom of all my pages. Probably due to my trying to get rid of the white box. Do you see anything that might be causing this?
Thanks.

gb2world · #10 05-19-2010, 08:18 PM

Sorry Peggie - I am not sure what you are talking about. You can use webmaster mode and Firefox/Firebug to trace almost anything. You have a 200px padding on the bottom of your div #right-bar (in altskin.css). Could that be what you are seeing?

Good job with cleaning up the errors. Your checkout pages don't look bad any more in IE7 - there used to be a big white bar along the right that appears to be fixed now. And all the mismatched divs are fixed in W3C.

I noticed you have a link that attributes your design to 4D Advertising. Plus, they feature you on their own website. Aren't they willing to assist you with some of these design problems? If you paid them, and they are using your site in their profile, maybe they will be willing to help you with some of these design flaws.