Question

My layout is working correctly, but not in Firefox. I am using a negative margin to indent the top and the bottom of the green box behind the YouTube video.

Here is how it should look:

Here’s how it looks in Firefox:

Here’s a live version to look at: live site

Here’s a js fiddle of the relevant code: jsfiddle

I originally forgot to mention that the height is variable, because there will be different types of videos and photos within the .frame class. Is there any way to solve this Firefox problem without defining the height?

I’m also open to re-organizing this if there’s a better way to write it and get the same effect.

Answer 1

Take:

Watch more videos on our YouTube Channel  

out of the and put it just below

That fixes it for me, you’ll then just need to shift the h4 to the left a bit which should be easy enough.

Hope that helps, below is the copied code

Martyn

Edit:
Leave the HTML alone, and change the css for: h4.caption to

h4.caption{
display:table;
padding-right:5px;
text-align:right;
width:100%;
}