Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>IE7 does indeed support URLs for backgrounds. You are correct in saying that it does not support Data URLs, but this is not a Data URL. A Data URL is CSS looks similar to: </p> <pre><code>url(data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7) . </code></pre> <p>Note the use of the keyword "data:". The key here is that the data IS the String... not a file.</p> <p>There are some little catches, however. First, the URL must be in quotes, as in:</p> <pre><code>body { background: #333 url("images/bg.jpg") repeat-x top; } </code></pre> <p>IE does, however, interpret the <code>background</code> short syntax differently, so I have found that expanding the syntax helps immensely with IE pre 8 bugs.</p> <pre><code>body { background-color: #333; background-image:url("images/bg.jpg"); background:repeat-x; background-position:top; } </code></pre> <p>Finally, your container div must be explicitly defined with a background color:</p> <pre><code>.cntdiv { width:100%; display:block; margin:0 auto; margin-top:15px; overflow:hidden; /* This is the line that will do it */ background:transparent; /* OR EVEN */ background-color:transparent; } </code></pre> <p>This code is tested and runs correctly in IE7 and has the same behavior in the others as well. Judicious use of "transparent" is awesome. </p> <p>It also must be understood that the issue you are facing is not a bug, but a user agent CSS style. This is according to the W3C standards unlike the other <code>div</code> bugs that IE has (such as poor <code>:hover</code> support). Because you didn't define a background for your <code>div</code>, the User Agent (IE7) is allowed to do whatever it likes. This is true of <strong>all</strong> HTML Elements and <strong>all</strong> browsers. It is why buttons look a certain way unless you change it with the CSS. Explicit definition of every aspect is the best way to overcome little snafus such as these.</p> <p>Hope this helps, FuzzicalLogic</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload