Archive for the ‘HTML and CSS’ Category

Breaking URLs and Long Text

Wednesday, April 27th, 2016

When porting a website so that it displays well on phones, I ran across a problem wrapping long text without breaks. This text doesn’t wrap so the whole page gets a horizontal scroll.

<p class='break-word'>On my Windows 7 and 8 computer, with a login name of llsc the location that shows up in the top bar is:
Users\llsc\AppData\Roaming\LocuTourMultimedia\Client Manager\Data

I added a break-word class to my CSS and it works fine.

.break-word {
    overflow-wrap: break-word;
    word-break: break-word;

Responsive iTunes App Ad

Tuesday, April 26th, 2016

When redesigning a site, I was having trouble getting one section to fit on an iPhone 5 without horizontal scrolling. It turns out that there were two issues, one with the Facebook widget and—rather ironically—one with the iTunes App ad.

The ad is in an iFrame and the dimensions are hard coded. e.g.

echo "<iframe src=';aId=&amp;id={$app_ID}&amp;c=us&amp;l=en-US&amp;bt=catalog&amp;t=catalog_white&amp;w=300&amp;h=250' style='overflow-x:hidden;overflow-y:hidden;width:300px;height:250px;'></iframe>";

Changing the dimensions either results in a cropped ad or nothing at all. I did however, stumble upon a solution. I reset the iFrame to 80% of the view window.

iframe {
  max-width: 80vw;
  max-height: 80vw;

CSS quirk

Monday, April 25th, 2016

CSS stands for ‘Cascading Style Sheets’ and once you grasp the concept, it makes a lot of sense. So if you define a style for your paragraph text, say

.normal-paragraph {
    font-family: Helvetica;
    color: #333;

and later want to have a paragraph in the body be a different font, you can define and apply a new style.

.different-font {
    font-family: Times;

and apply it to the paragraph.

I was trying to do this with padding and it wasn’t working. Specifically I was adding a style to the heading to remove padding.

<h3 class='linkSection pad-no-bottom'>

What I thought should happen was that the browser would get the padding information from the linkSection CSS and then adjust it based on the padding information in the pad-no-bottom class. However, what it does is read the style information in the order in which it appears in the CSS file—not the order in which you call the classes. So I pulled all of my padding classes out of the main CSS file and put them into a separate file that is called last. I did the same thing for all of the other override classes as well. e.g. .indent, .italic, .centered, etc.

Pure.css Miscellaneous Stuff

Wednesday, April 6th, 2016

I’m exploring Pure.css for responsive design and I am running across things that I’ve never seen before. So I don’t have to look them up again, this post is a collection of them and some general observations about the css.

For some reason the GitHub repository for Pure.css doesn’t contain the actual base CSS. However, you can find it at the Yahoo CDN by removing the -min portion of the minified CSS link.

The first 521 lines are from Normalize.css and some additions from the YUI team that basically clean up browser differences so that the Pure code will work the same on all browsers—even very old ones and obscure ones.

IE Hacks
If you browse through the code, you might notice lots of lines starting with asterisks. e.g.

    display: inline-block;
    *display: inline;

    width: 4.1667%;
    *width: 4.1357%;

Once again, StackOverflow provides an explanation.

It is a syntax error. So in CSS, it makes the property name invalid and stops it being parsed. Thanks to bugs in browsers, it is sometimes ignored.

[Therefore] the second declaration will be applied by IE7 and older (thus overriding the first declaration), while other browsers will ignore it and continue applying the first declaration instead.

While I was looking this up, I also found another IE hack.

\9 is a “CSS hack” specific to Internet Explorer 7, 8, & 9.

This simply means that the one specific line of CSS ending with a \9; in place of the ; is only valid in IE 7, 8, & 9.

width: 500px\9; means that a width of 500 pixels (same result as width: 500px;) will only be applied while using IE 7, 8, & 9.

All other browsers will ignore width: 500px\9; entirely, and therefore not apply width: 500px; to the element at all.

It turns out that \0 can be used for IE 10.


Pseudo-class :not
The :not pseudo-class represents an element that is not represented by its argument.

There aren’t many occasions where this is used in the file. The major one is to give padding, display, and border parameters when the a form is not one of the 14 form types listed in the previous block of css. e.g. .pure-form input:not([type]) {

Attribute Wildcard Selector

.pure-g [class *= "pure-u"] {
    font-family: sans-serif;

The *= is an attribute wildcard selector. In the example above, it looks for any child element under .pure-g that has a class that contains pure-u. Since Pure Grids consist of two types of classes: the grid class (pure-g) and within the grid class the unit classes (pure-u or pure-u-*) it basically resets all of the unit classes to use sans-serf as the default.

From the documentation, suppose you want to change the font to a serif font. Use this code:

html, button, input, select, texture, .pure-g [class *= "pure-u"] {
    font-family: Georgia, Times, "Times New Roman", serif;

Media Queries
The responsive part of responsive design relies on media queries. In the past, there were only two that you had to worry about—print and screen. With the advent of smartphones and tablets, you need to be able to adapt the content to the screen size in ways that were not necessary before. Media queries can be used to check the width and height of the viewport, the width and height of the device, the device orientation, and the device resolution, and other properties that you might need for your design. A huge list can be found at W3Schools. Pure.css only uses the screen media type along with the screen width expressed in ems to provide styling for five sizes. You refer to the sizes using suffixes on the pure unit styles. No suffix is for screens less than 35.5 ems (568 pixels), -sm is for the next size up, followed by -md. -lg and -xl are for the largest screens.

As with the css for the grid, you can find it at the Yahoo CDN by removing the -min portion of the minified CSS link.

As they explain on their site. Using ems for media queries is much better for people who set their browser default to a larger size and for users who zoom in to the content.

Font size
Pure uses the default font size for the browser for all of the elements. Combined with the media query above, this means that the font size will scale with the viewport and zoom level so you don’t need to worry about it. If you do want to make the sizes vary from the default, e.g. possibly with captions or super-emphasis, then use percentages to increase the size.

One interesting font definition that I had not seen before is assigning the font size and line height at the some time. This code makes italic 85% of the normal size for the element but keeps the line height at 1 em so that it doesn’t interrupt the flow.

font: italic 85%/1 arial, sans-serif;

Browser Cookies with PHP and JavaScript

Friday, March 18th, 2016

I have a game that I am in the process of updating. Originally it passed scores in with the URL, but I decided to update it so that the scores are not visible. My first thought was to use session variables, but since I want to change the scores in response to calculations that are done in JavaScript, that isn’t feasible. A better way is to use cookies. When I first enter a page, I set or get the cookies with PHP. I want the game levels to persist from visit to visit but the scores are only kept for the session.

// Initialize the cookies with PHP. Keep the group and level around but make the scoring session cookies
// If the cookie is set by the code, it is not available until the next page load
$cookie_name = "VPA_group";
$cookie_value = "MW1";
if( !isset($_COOKIE[$cookie_name]) ) {
$group  = isset($_COOKIE["VPA_group"])  ? $_COOKIE["VPA_group"]   : $cookie_value;

$cookie_name = "VPA_WFF";
$cookie_value = "Wide";
if( !isset($_COOKIE[$cookie_name]) ) {
$WFF    = isset($_COOKIE["VPA_WFF"])    ? $_COOKIE["VPA_WFF"]     : $cookie_value;

$cookie_name = "VPA_cor";
$cookie_value = 0;
if( !isset($_COOKIE[$cookie_name]) ) {
$cor    = isset($_COOKIE["VPA_cor"])    ? $_COOKIE["VPA_cor"]     : $cookie_value;

$cookie_name = "VPA_inc";
$cookie_value = 0;
if( !isset($_COOKIE[$cookie_name]) ) {
$inc    = isset($_COOKIE["VPA_inc"])    ? $_COOKIE["VPA_inc"]     : $cookie_value;

$cookie_name = "VPA_screen";
$cookie_value = 0;
if( !isset($_COOKIE[$cookie_name]) ) {
$screen = isset($_COOKIE["VPA_screen"]) ? $_COOKIE["VPA_screen"]  : $cookie_value;

Once I have the values, I need to let JavaScript know what they are.

        echo "var cor = $cor;\n";
        echo "var inc = $inc;\n";
        echo "var screen = $screen;\n";

        echo "var group = \"$group\";\n";
        echo "var WFF = \"$WFF\";\n";
        echo "var cookie_days = \"$cookie_days\";\n";

Then I can use JavaScript to change them, as I described in the previous post.

function goNext() {

function changeLevel(cookieName, cookieValue) {
    cor = 0;
    inc = 0;
    screen = 0;
    setCookie(cookieName, cookieValue, 'Y');

function setCookie(cname, cvalue, set_time) {
    var expires = '';
    if ( set_time == 'Y' ) {
        var d = new Date();
        d.setTime(d.getTime() + (cookie_days*24*60*60*1000));
        expires = "expires="+d.toUTCString();
    //alert('cname ' + cname + 'group ' + cvalue + 'time ' + expires);
    document.cookie = cname + "=" + cvalue + "; " + expires;

Well Golly

Atheism Plus

Buy from Amazon