Wordpress/CSS Guru's Needed

[citizen1080]

Howdy folks!

Running into an issue on my website that I can't seem to nail down. Two issues actually.

When viewing the home page using firefox the video shifts to the upper right portion of the window. As soon as you scroll down at all it will shift to the center where it should be. Issue does not pop up on IE or Chrome.

http://i.grab.la/100/05505-c53becde-bd91-40b7-a8bd-5d82fc25afbb.jpg (http://grabilla.com/05505-c53becde-bd91-40b7-a8bd-5d82fc25afbb.html?utm_source=embed&utm_medium=forum-embed&utm_campaign=sharing)
Screenshot made with Grabilla (http://grabilla.com/)

http://ballisticboardwear.com/

The other issue is on the payment form. I am using Woo Commerce and in Firefox and IE there is a blank field below the required Email field.

http://i.grab.la/100/05505-e5ffe3f8-fa60-4143-a89e-dd61e13e7239.jpg (http://grabilla.com/05505-e5ffe3f8-fa60-4143-a89e-dd61e13e7239.html?utm_source=embed&utm_medium=forum-embed&utm_campaign=sharing)
Screenshot made with Grabilla (http://grabilla.com/)

My web guy is MIA and I need to try and get these things resolved ASAP...If whoever does figure these two issues out is looking for some side work...I may have a job offer for you. And no I won't pay you in platinum.

Thanks!

[SamwiseRed]

that is the smallest screenshot ive ever seen. did you take this on a nokia mobile?

[citizen1080]

that is the smallest screenshot ive ever seen. did you take this on a nokia mobile?

They call those thumbnails =)

Click on it and wonderful things will happen (you get a virus)

[SamwiseRed]

i did, they are still tiny lol

my ss of your ss (after i click on it)

http://i.imgur.com/XNIVTGx.jpg

everyone else seems to be able to open up, maybe im just retarded :P

[loramin]

I'd love to help you with the first problem, but a browser-specific "some element appears in the wrong place when at a certain scroll position" bug is very likely going to be a PITA bug that I can't just debug quickly.

On the second issue, it looks like the blank field is called "billing_email_validator", so it's probably something that's meant to be used behind the scenes by your payment processor. I have no idea why it's showing up in IE/FF, but you should be able to make it hide with something like:

#billing_email_validator {
display: none;
}

in your CSS (either add it to a .css file or wrap it with "<style>" and "</style>" and throw it in the .htm file).

Double-check that the form still works properly after adding that though, as hiding the field might break some of your e-commerce logic. Hopefully not, but if it does you can also try changing "display: none;" to "visibility: hidden" (thought that will leave a blank space behind).

Good luck!

[-TK-]

I don't have a lot of time to look into it right now but it looks like a float issue in your style sheet that's been documented in FireFox. You might have to edit the page and add <p style="text-align: center; clear: both;"> <Vid Link> </p> to align the iframe to get it to align in FireFox. I might be able to look at it more later.

[citizen1080]

I'd love to help you with the first problem, but a browser-specific "some element appears in the wrong place when at a certain scroll position" bug is very likely going to be a PITA bug that I can't just debug quickly.

On the second issue, it looks like the blank field is called "billing_email_validator", so it's probably something that's meant to be used behind the scenes by your payment processor. I have no idea why it's showing up in IE/FF, but you should be able to make it hide with something like:

#billing_email_validator {
display: none;
}

in your CSS (either add it to a .css file or wrap it with "<style>" and "</style>" and throw it in the .htm file).

Double-check that the form still works properly after adding that though, as hiding the field might break some of your e-commerce logic. Hopefully not, but if it does you can also try changing "display: none;" to "visibility: hidden" (thought that will leave a blank space behind).

Good luck!

Thank you for the feedback sir!

I did some testing and the field is is showing up as required when I try to process with it blank. So I think all I really need to do is add a heading above it so customers know to fill it in. Technically they will know after the first submit fails and it tells them what to do...but id rather avoid that.

[loramin]

the field is is showing up as required when I try to process with it blank. So I think all I really need to do is add a heading above it

Makes sense.

[citizen1080]

I don't have a lot of time to look into it right now but it looks like a float issue in your style sheet that's been documented in FireFox. You might have to edit the page and add <p style="text-align: center; clear: both;"> <Vid Link> </p> to align the iframe to get it to align in FireFox. I might be able to look at it more later.

Thanks sir..this may be a little over my head but I will give it a shot!

[-TK-]

Thanks sir..this may be a little over my head but I will give it a shot!

It takes a bit to sort out but I've had to do similar things when the video is treated as a banner by FireFox. the 'clear: both;' argument stops an object from floating left or right. If you are left-aligning you may have to use 'clear: right;' instead. It's finicky with FireFox and Loramin's correct in that it can be a bitch to debug unless you've got everything right in front of you but I would start there.

[-TK-]

The only other thing I can think if editing the video HTML doesn't work is adjusting the container (the <div>) to include 'text-align: center' since the video is treated as an in-line element instead of a block if I remember correctly. Otherwise, you'd have to assign the video's class in the CSS to 'display: block' and set the margins to auto so it's treated as a block element. Been a while since I had to do it so someone else might have another suggestion as there's more than one way to skin a cat....meow.

Edit: Just refreshed your page and it looks like you got it in FireFox.

[citizen1080]

Hooray! I fixed the image issue...looks like my webguy had the video setup in a slide show plugin..fiddled around with it till it worked...tho with my luck it will be screwed up in the rest of the browsers now =)

Will dig into the checkout issue now.

[-TK-]

Looks good in IE and Firefox.

[citizen1080]

...there's more than one way to skin a cat....meow.

Do I look like a cat to you, boy? Am I jumpin' around all nimbly bimbly from tree to tree?

[-TK-]

Do I look like a cat to you, boy? Am I jumpin' around all nimbly bimbly from tree to tree?

Thought I saw you drinking milk from a saucer ....

[citizen1080]

Looks good in IE and Firefox.

Awesome...i cant test in chrome on this computer...it got nuked somehow a few weeks ago...Ive uninstalled and reinstalled multiple times...just hangs when i open it. I am guessing my profile is corrupted and i need to do some deep cleaning...but I'm too lazy...so i swapped to firefox.

Thanks again for looking into it for me