Dev Harbor: css

Showing posts with label css. Show all posts

26 January 2016

Stationary corner triangle DIV using CSS

Ever wanted a triangle DIV that hovers over the page and has a drop shadow? Here's one I built using nothing but CSS 3 and HTML5:
To modify the triangle, edit the border-width and border-color on the div#corner-triangle. Read more details on my Stack Overflow answer. You can also use the nifty CSS Triangle Generator.

11 July 2012

Hide CSS rule from IE7

This is clearly a hack, but a quick and dirty solution that works nicely in hiding a CSS rule from IE7, but show it to modern browser:

html>/**/body .my-css-rule-name {
   /* some CSS */
}

Thanks to David Hammond's CSS Hacks page.

19 October 2011

How to hide/show table rows in IE7

If you need to hide a table row (TR), you'd usually use the following:

.hide-tr { display:none; }

The problem develops when you later wish to show the row; simply setting the display to block is insufficient, as the individual cells in the row lose their positions and often get bunched next to each other. Using display:table-row works on most modern browsers, but IE7 ignores that and prefers display:inline-block. So the solution? There are a few ways to fix the problem, as indicated on Stack Exchange. The problem with using visibility:hidden is that the row still takes up space on the page and shrinking its height is a non-trivial task. Another solution involves a method less recommended, using browser and version detection via jQuery. However, it does fix the issue:

if ($.browser.msie && jQuery.browser.version == '7.0'){
  $('.hide-tr').css('display','inline-block');
}
else {
  $('.hide-tr').css('display','table-row');
}

Not a clean solution but it gets the job done :)

Update: An even easier solution: Simply call the jQuery show() method on the object and it's smart enough to apply the appropriate CSS to the object.

16 August 2011

SharePoint: Icon doesn't show for Publishing Hyperlink

Ran into this today. Very strange problem. For whatever reason, the "Display icon" functionality of the Publishing Hyperlink field doesn't work on SharePoint 2010 Server for a site with Publishing enabled. Added URLs to a column of that type for PDF files, but no PDF icons appeared. In fact, the value for the "Display icon" field wasn't "sticky" -- it kept getting unchecked. This article saved the day, with a very easy, non-coding solution using only CSS attribute selectors.

I'm using a custom page layout in my publishing pages with an attached CSS file; in that file, I added the following items to correspond to the location of my icon files (inside SiteAssets); I also added .docx for Word 2007+ document types and .xlsx for Excel 2007+ docs:

a[href$='.pdf'] {

    display:inline-block;

    padding-left:20px;

    line-height:18px;

    background:transparent url(/SiteAssets/icons/icon_pdf_16x16.gif) center left no-repeat;

}

a[href$='.doc'], a[href$='.rtf'], a[href$='.txt'], a[href$='.docx'] {

    display:inline-block;

    padding-left:20px;

    line-height:18px;

    background:transparent url(/SiteAssets/icons/icon_doc_16x16.gif) center left no-repeat;

}

a[href$='.zip'], a[href$='.gzip'], a[href$='.rar'] {

    display:inline-block;

    padding-left:20px;

    line-height:18px;

    background:transparent url(/SiteAssets/icons/icon_zip_16x16.gif) center left no-repeat;

}

a[href$='.xls'], a[href$='.csv'], a[href$='.xlt'], a[href$='.xlw'], a[href$='.xlxs'] {

    display:inline-block;

    padding-left:20px;

    line-height:18px;

    background:transparent url(/SiteAssets/icons/icon_xls_16x16.gif) center left no-repeat;

}

The CSS works by finding all anchor tags with an href attribute that ends (using the dollar symbol $) with the specified string; so for PDFs, it uses a[href$='.pdf'] and applies the style rules. And we're only interested in those 4 file types, so those are the ones that have icons in our CSS file.

Reloaded the page and viola! The icon appears to the left of the item as if by magic :)

Also, the article from psyked has links to some nice (and free) icon libraries. All in all, a very good solution. However, we still don't know what's causing the built-in "Display icon" functionality to not work.

Hope this helps others. Thanks.