irislines web design
irislines web design

absolute positioning when you don’t declare both offsets….

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 found this:  (http://www.charlescooke.me.uk/web/lab_notes/pos_abs/index.html)

It is only the offsets which are measured with respect to the viewport and that only sometimes. If no offset is specified i.e. if it is unmentioned rather than set to zero the positioned element will remain where it would have been in normal flow. In other words positioning the element need not necessarily change its position from where it was it may just change its status to ‘positioned’. A method frequently employed is to set the declaration
position: relative;
either on the body or on a div without including an offset. It then becomes possible to position other elements with respect to the body or div without further ado.

Which makes the distinction between unmentioned  and set to zero offsets.

I was grumbling about browsers being too kind and not referring back to the containing block or viewport in this case, but in fact, this is the common interpretation.

The interesting thing you can do with this is to have something act like a fixed position element, but not fixed to the viewport — by not mentioning any horizontal offset, the absolutely positioned sidebar remains offset from the top of the viewport and horizontally where it would have been otherwise.


Could you be more specific, please?

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.

If the rule in question targets only a class,   i.e.    .alert,   you could increase specificity by simply adding the element selector,  i.e.  h1.alert.

Often, though,  template stylesheets already are using quite complex selectors. 

I made a note to play “Could you be more specific, please?”  as a classroom activity for my students — presenting them with some real-life selectors and analyzing  their suggestions for getting more specific.

What’s the most elegant solution to the problem?

htaccess 301 redirects

It happens sometimes that you just need one or two old addresses , or shortened addresses to be mapped to a current url.

Adding a few lines of code to the .htaccess file just might be the fix you need.  These might be actual file names for a static website, or a Joomla  generated url or WordPress permalink.

Here’s the syntax:

Redirect 301 /old-path/old-url-name.html  http://full-domain-name.org/new-path/new-page-url.html

Removing content from Google

I’m working on a project where Google currently has over 9000 indexed entries,  most of which are comments on a K2 article accidentally left open to comments by the previous developer.

According to the instructions at Google Webmaster Tools, the “remove url” tool is not to be used except in urgent situations where private data has been shared and that using the “remove url” tool otherwise may hurt the site.

How then to get Google to crawl the indexed pages (which were removed months ago!)  and discover that they return 404 errors?

In an article by an SEO expert, http://www.zdnet.com/blog/seo/seo-pro-tip-how-to-remove-indexed-and-cached-content-urls-and-pages-from-google/1529  there is the suggestion to tweet the old url out to your followers and ask that they re-tweet it.    I guess that’s intended to make Google stand up and notice.

So here’s the page that got 9000 comments:  http://bit.ly/rIh9CB  (You’ll just get a 404, but thanks for visiting!)

Thanks for your help.   I’ll let you know what happens.

jbPure template problem fixed…

On a site using the Joomla Bamboo template Pure, I was having trouble with footer not clearing the sidebar.  I discovered that a custom html module with just a non-breaking space in the bottom position would fix the problem.  I didn’t mind the dark banner that stretched across the screen and I was willing to live with this work around  (having tried all kinds of clears, etc. on the footer module.)

Then I discovered that that “fix”  didn’t fix it in PC browsers:  Firefox and IE8.   Consulting the joomla bamboo forum I found a similar issue with a suggestion to be sure images had explicit heights.   I added heights to my flickr and facebook modules and the problem was solved.   The PC browsers were apparently not reading the heights declared for the iframes used by these modules.    And the template seemed to need to calculate a total height for the sidebar.

Menu item ordering bug in Joomla 1.7.x

I have a site that started its life in 1.7.0.  After upgrading to 1.7.3 I lost control of the order of menu items.   Numbering and saving didn’t work.  Tweaking with the blue arrows only worked in some places, and then didn’t seem to stick.  I “solved” the problem by using the MOVE function at the bottom of the menu items manager page, selecting an item and moving it to the same menu — this would add it at the bottom of the list.   I repeated until all were in the order they had been in before the upgrade to 1.7.3.

Searching the joomla forum I found a few related posts in this thread:

http://forum.joomla.org/viewtopic.php?f=579&t=636152&p=2615670#p2615670

>>Infograf and I seem to have found the problem! It is a problem with JUpgrade – the column “ordering” in table “_menu” is filled with different numbers – it should be just zero’s as the ordering of the menu items is drawn from the columns “lgt” and “rgt”.

They then give the sql command to set all to zero.   I can’t paste the code here just now.

Many in the forum were pointing at jUpgrade as the source of this problem and someone uploaded a mini component to do the above sql task.

Category — Categories — which menu item to choose?

I’m preparing a talk for JoomlaDay NYC on Alternative Layouts and Custom Menu Item Types.  There had been so many posts on the joomla.org forum about these new capabilites of Joomla 1.6 and 1.7,  and so many were complaining that the “feature” simply didn’t work, I was getting a bit worried about the presentation.   I had proved them working back in the spring for a presenation at Joomla Day New England, but had things changed in the subsequent versions?

Finally last week I had a chance to put them all through their paces and the good news is that Alternative Layouts and Custom Menu Item Types DO indeed work —  for all kinds of Joomla items:   articles, contacts, weblinks, and category displays like blogs and lists.

The ONE Joomla entity where my template overrides (which worked) could not be turned into Alternative Layouts OR  Custom Menu Item Types  was the com_content layout for Categories.

I was trying to demonstrate using the sample data and the Parks Photo Gallery which is a demonstration of using regular articles to create a photo album of sorts.   I didn’t like that the Categories layout said  “Article count”  for each sub-category and wanted to change that to “Image count”. 

In the sample data, the menu item for the Parks Photo Gallery was set as a Categories  list.   When that didn’t work, I changed it to a Category list menu type and then applied my changes there.   Since there was a menu item to the top level category I had to take the further step and create the custom menu item type and then use that for the menu.   All well and good.   A parameter allowed me to skip the verbage  “There are no articles for this category”  and proceed directly to listing the sub-categories with their Image counts.

It’s had me thinking about when you would ever need the Categories layout, since I was able to get the same results with the Category layout.   Any ideas anyone?   Please email me!

 

What’s wrong with this?

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!

 

Continue Reading

Szaki Table (Joomla Extension)

Szaki Table is a Joomla Extension that allows sorting a table by any column header.

I used it on a client’s site to make a list of educational opportunities sortable by date, location, type.   All was well until we added a column for cost and entered cost in US Dollars using the $ sign.

The entire table was replicated in the cell with the $!  

Fortunately one only needs to “escape” the $  by including   before the guilty character.

In researching the extension’s website to see if this had been covered already, I discovered that the extension has many more possibilities — but the English version of the developer’s site is hard to decipher.  I’ll consider this for future projects if a client needs to have interactive data tables.   I think you’re supposed to be able to get the table code from pasting in a csv (with semi-colons rather than commas)!  That’s worth investigating!

IrisLines LLC
101 Washington Street
Brattleboro, VT 05301

802 257 7391

info@irislines.com