PDA

View Full Version : New CSS margin discrepancy with Firefox 4.0


johnMoss
04-24-2011, 03:27 PM
I know I'll get slapped for this but I fail to see the coding error in the respective CSS or in the flow.

http://www.shop17printers.com/

Having updated to FF 4.0, down near the bottom of the page, you will see a youtube/cartoon face video box. It rendered fine in all browsers during initial creation, but now in FF 4.0 it is being pushed down roughly 25px. Still works fine in all other browsers....

Thoughts?:confused:

DWcourse
04-24-2011, 05:17 PM
I may be wrong but I think the problem is that you've designed your page in a way that relies upon each browser rendering the text exactly the same so that the video cartoon ends up in exactly the right position over the background of your .subMainContent div. But different browsers render text slightly differently.

For instance you can reduce the problem by adding line-height: 1.2; to the body style rule. But you introduce additional problems if the user zooms the text only.

I'd recommend:

1. Align your background image in .subMainContent to the bottom left (also rather than setting a height just add enough bottom-padding to the .subMainContent to always allow for the background image)

2. Set position:relatve for .subMainContent so that you can

3. Place the video cartoon in a div positioned absolutely in relationship to the bottom right of the .subMainContent div

That way, no matter what happens above, the video cartoon and the background image will always align.