iris lines designs

the code for gradients is not correct!

When I observed that my gradients were going right to left instead of top to bottom, I went in and changed rotation  -90deg to 180deg and things looked fine in Firefox --- but I wasn't REALLY understanding the problem --  Doing that made the gradients misbehave in Safari, which my client was using -- He thought I'd gone batty putting a gradient band on the right side of  some home page widgets.

This morning I found this article:

A certain page on a website was causing IE8 to switch into "compatibility" mode -- and to display as if it weren't paying attention to any media queries, which it otherwise could handle.

I found a meta tag to add to force it to stay out of compatibility mode -- and then it would just display NOTHING!  View source,  the content was all there,  but just a big white screen!

Other pages with similar elements were displaying OK.   A few pesky validation errors could not be eliminated, but they weren't breaking other pages.

As if absolute positioning isn't complicated enough....  I think I always assumed that an object would move to position 0,0  as soon as position:absolute was declared.

But in fact,  all my tests of browsers today seemed to leave the element where it was and only adjust the position - relative to it's positioned containing block -- if the offset is specifically declared.   (This is not very clear in the w3c specs.)

Thus, in two different students' work, I observed absolutely positioned elements remain where they normally would have been in one dimension while being positioned in the other dimension with the declared offset.     Declaring the other offset as zero  (top:0;  or left:0;)  caused the element to adjust to the viewport as no other positioned elements had been defined.

I'm preparing notes for the html / css class I teach at the Marlboro College Graduate School and at the same time helping a colleague troubleshoot a ready-made Joomla! template.  

Needing to override a styling rule, there are many possible ways to make a rule more specific without using !important!

Firebug (Firefox extension) and CSSEdit (part of Espresso package from MacRabbit) are two tools that will help you identify the style rules currently  in play.   Of course, you could just edit the stylesheet and make changes to the rule directly,  but sometimes you want to keep all of your custom styles separate, in which case you may need to increase the specificity of the selector.

The following rule was in the stylesheet for a Joomla component I use: 

    div.thumbs_div a:hover, a:active, a:focus{
    background-color: transparent !important;
    }

Do you spot the syntax error which caused me no end of grief?

I finally did!

This topic came up at Joomla! Day New England -- how to get template styles to show up in jce styles dropdown and to affect the content in the editor window.

For some time now I have been installing the JCE editor for my clients to use on their Joomla sites.   And each time I have to make a decision about how to configure the editor, because this can be done in different ways and "It Depends..."  is always the right answer.

Here are a few possible issues:

Using conditional statements you can control whether your template creates a div and module position for a left or right sidebar depending on whether a module exists for any given page.   But this does not cause the content to stretch to fill that available space when no sidebar modules are present.

It IS possible to use conditional statements in the opening php block of your template to set values of variables which are then used in the template to create divs with different classes depending on the modules present.

For this example I'm using a liquid design with a left column width of 20%, and a right column width of 30%.   Left and center columns are floated left, right column is floated right. Two background images are used to create the faux columns. The content area will be either 50%, 70%, 80% or 100% depending on the presence of modules for the left or right columns.

I add these 4 lines to the opening php block:
if($this->countModules('left + right') > 0) $layout="50";
if($this->countModules('right') <= 0) $layout="80";
if($this->countModules('left') <= 0) $layout="70";
if($this->countModules('left + right') <= 0) $layout="100";

and in my html I reference that variable wherever needed like this: