Wordpress/CSS Guru's Needed

citizen1080 · #1 05-05-2015, 02:10 PM

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.

[You must be logged in to view images. Log in or Register.]
Screenshot made with Grabilla

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.

[You must be logged in to view images. Log in or Register.]
Screenshot made with Grabilla

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 · #2 05-05-2015, 03:24 PM

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

citizen1080 · #3 05-05-2015, 03:33 PM

Quote:

Originally Posted by SamwiseRed [You must be logged in to view images. Log in or Register.]

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 · #4 05-05-2015, 03:36 PM

i did, they are still tiny lol

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

[You must be logged in to view images. Log in or Register.]

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

loramin · #5 05-05-2015, 03:42 PM

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:

Code:

#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- · #6 05-05-2015, 03:47 PM

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 · #7 05-05-2015, 03:53 PM

Quote:

Originally Posted by loramin [You must be logged in to view images. Log in or Register.]

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:

Code:

#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 · #8 05-05-2015, 04:02 PM

Quote:

Originally Posted by citizen1080 [You must be logged in to view images. Log in or Register.]

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 · #9 05-05-2015, 04:06 PM

Quote:

Originally Posted by -TK- [You must be logged in to view images. Log in or Register.]

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- · #10 05-05-2015, 04:13 PM

Quote:

Originally Posted by citizen1080 [You must be logged in to view images. Log in or Register.]

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.