Applying CSS to an iframe

There are two different things here: the style of the iframe block and the style of the page embedded in the iframe. You can set the style of the iframe block the usual way:

<iframe name='iframe1' id="iframe1" src="empty.htm" frameborder="0" border="0" cellspacing="0" style="border-style: none;width: 100%; height: 120px;"></iframe>

The style of the page embedded in the iframe must be either set by including it in the child page:

<link type="text/css" rel="Stylesheet" href="Style/simple.css" />

Or it can be loaded from the parent page with Javascript:

var cssLink = document.createElement("link") 
cssLink.href = "style.css"; 
cssLink .rel = "stylesheet"; 
cssLink .type = "text/css"; 
frames['frame1'].document.body.appendChild(cssLink);

Read More

CSS: How to align horizontally one div inside another div

How do I horizontally center a div in a div with CSS (if it's possible at all)? The outer div has 100%:

<div id="outer" style="width:100%">  
    <div id="inner">Foo foo</div>
</div>

In this example the outter div have 100% width, to align horizontally the inner div we can apply this code in the inner div:

#inner {
    width: 50%;
    margin: 0 auto;
}

Of course, you don't have to set the width to 50%. Any width less than the containing div will work. The margin: 0 auto is what does the actual centering.

If you are targeting IE8+, it might be better to have this instead:

#inner {
    display: table;
    margin: 0 auto;
}

It will make the inner element center horizontally and it works without setting a specific width.

Read More

HTML5: Change placeholder input color with CSS

Implementation to change placeholder color

There are three different implementations: pseudo-elements, pseudo-classes, and nothing.

• WebKit and Blink (Safari, Google Chrome, Opera 15+) are using a pseudo-element: ::-webkit-input-placeholder.
• Mozilla Firefox 4 to 18 is using a pseudo-class : :-moz-placeholder (one colon).
• Mozilla Firefox 19+ is using a pseudo-element: ::-moz-placeholder, but the old selector will still work for a while.
• Internet Explorer 10 is using a pseudo-class : :-ms-input-placeholder.

IE up to version 9 and Opera up to version 12 do not support any CSS selector for placeholders.

The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the pseudo-element.

CSS selectors

User agents are required to ignore a rule with an unknown selector. See Selectors Level 3:

a group of selectors containing an invalid selector is invalid.

So we need separate rules for each browser. Otherwise the whole group would be ignored by all browsers.

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
    opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
    opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}

Usage notes

• Be careful to avoid bad contrasts. Firefox's placeholder appears to be defaulting with a reduced opacity, so needs to use opacity: 1 here.
• Note that placeholder text is just cut off if it doesn’t fit – size your input elements in em and test them with big minimum font size settings. Don’t forget translations: some languages need more room for the same word.
• Browsers with HTML support for placeholder but without CSS support for that (like Opera) should be tested too.
• Some browsers use additional default CSS for some input types (email, search). These might affect the rendering in unexpected ways. Use the properties -webkit-appearance and -moz-appearance to change that. Example:

    [type="search"] {

        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

Read More

Convert a HTML and CSS document to PDF with PHP

To convert an HTML document with CSS stylesheets you have to take a look at PrinceXML.

It's definitely the best HTML/CSS to PDF converter out there, although it's not free (But hey, your programming is not free either, so if it saves you 10 hours of work, you're home free.)

Oh yeah, did I mention that this is the first (and probably only) HTML2PDF solution that does full ACID2!?

PrinceXML Samples

Read More