Home/ Questions/Q 7811263
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T04:05:46+00:00

I am developing the follow website: http://di20studios.com/2012/royalpack/ All works fine in Mozilla Firefox and

  • 0

I am developing the follow website:
http://di20studios.com/2012/royalpack/

All works fine in Mozilla Firefox and IE 8, but Safari, Opera and Google Chrome don’t like my display:table-*CSS…

The display:table-* is at header and bottom.

enter image description here

What I want? Continuous background:

enter image description here

Can you enter the website and see this issue in action? How I can solve this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Check this out, I believe you will find your problem is similar.

    This is an unconfirmed webkit bug. My only suggestion would be to make sure you are using an HTML5 doctype:

    <!DOCTYPE html>

    From John Resig:

    What’s nice about this new DOCTYPE, especially, is that all current browsers (IE, FF, Opera, Safari) will look at it and switch the content into standards mode – even though they don’t implement HTML5. This means that you could start writing your web pages using HTML5 today and have them last for a very, very, long time.

    Also, I might suggest you NOT use this method (display:table-*) unless it is the ONLY solution (which is never :P). There are many known issues with this method, one being that it is not supported in IE7.

    A plausible solution would be to use floating to achieve this. You will need to change the transparency over the images for the repeat-x to overlay properly. I edited the images so you can see a working example. As long as you MAKE sure to clear after the header-container, you shouldn’t run into any issues using float. PS, this works in IE7+ :]

    • 0