Tag: css

Posted on

Materilize CSS: Change Tab text and indicator colour using only HTML and colour classes

When using the excellent Materialize CSS framework, it isn’t immediately obvious how to to change both text and indicator/underline colour of Tabs using only HTML and the Materialize colour classes (i.e. no changes to CSS).

To change the text color, just add the text-colour classes to the <a> tags, e.g.:

<a class="indigo-text text-darken-4" href="#test1">Test 1</a>

To change the indicator/underline colour, you can insert this before the </ul>:

<div class="indicator indigo darken-4" style="z-index: 1;"></div>

To wrap this up as a complete, 2-tab, example:

<div class="row">
  <div class="col s12">
    <ul class="tabs">
      <li class="tab col s6">
        <a class="active indigo-text text-darken-4" href="#test1">Test 1</a>
      </li>
      <li class="tab col s6">
        <a class="indigo-text text-darken-4" href="#test2">Test 2</a>   
      </li>
      <div class="indicator indigo darken-4" style="z-index: 1;">
      </div>
    </ul>
  </div>
  <div id="test1" class="col s12">Test 1</div>
  <div id="test2" class="col s12">Test 2</div>
</div>
Posted on

AddThis _atssh div causing issues

I’m using AddThis in the new CSlide site, and it seems to add a div (id=”_atssh”), immediately after the link to the AddThis JavaScript file. This happens even if you have the JS file in the <head> section of the page, resulting in a div in the head, which clearly isn’t right. A quick search on the AddThis site suggests I am not the first to come across this issue, but it would appear the promised fix has not happened yet.

This can be fixed by putting the link to the JS file in the body (ideally at the end, for the sake of performance/progressive rendering*). However, having this div inserted at the end results in the size of the page height being increased by 1 pixel. Since, in my site anyway, it comes after a container with height set to 100%, it results in the page having a scrollbar when it shouldn’t need it.

Again, this can be fixed relatively easily, by adding the CSS below to your stylesheet. The offending div is invisible, so making it absolutely positioned (it used to already have position: absolute, but this seems to have changed (as at 6/01/2015)) and setting “top” to 0 just sticks it at the top of the page where it can’t interfere any more.

#_atssh {
    position: absolute;
    top: 0;
}

*I should mention that my JS was already at the end, and I only found out about the “div in the head” issue when looking into the page height issue.

Posted on

CSS hacks (underscore and star) for old IE versions

Ideally it shouldn’t be necessary to provide different CSS for different browsers, but sometimes needs must, particularly when it comes to dealing with the quirks of older versions of Internet Explorer (i.e. IE6 and IE7).

Thankfully there’s a couple of simple hacks that can be used to target CSS at old versions of IE only – the underscore (_) hack for IE6 (and below) and the star (*) hack for IE7 (and below). Just put _ or * in front of a CSS property as required, e.g.:

color: red;   /* all browsers */
*color: blue;   /* IE7 and below */
_color: green;   /* IE6 and below */

Using these rules, this sentence should appear green in IE6 and below, blue in IE7 and red in all other browsers.

There are other hacks that can be used. Check out these blog posts for more:

CSS Tip: Targeting IE 5.x, 6 and 7 Separately

IE7 only CSS hacks: Explained

Posted on

CSS – Start values in ordered list

When trying to specify the start value for an ordered list, i.e. to make it start from 4 rather 0, I found that the “start” attribute, e.g. <ol start=4>, had been deprecated in HTML 4 and that it should be done using CSS. However, the CSS is more complicated than it seems it should be for what is a relatively straightforward task. It also seems strange that it should be part of CSS, as the start value is not really a style consideration.

Thankfully, in the HTML5 specification – http://www.w3.org/TR/2008/WD-html5-20080122/#the-ol – the start attribute is no longer deprecated. The same is true of the value attribute for li elements, allowing you to specify the value for a specific list item. So to start a list at 4 and miss out 6 & 7, you would use:

<ol start="4">
   <li>Item 4</li>
   <li>Item 5</li>
   <li value="8">Item 8</li>
   <li>Item 9</li>
</ol>

This gives:

  1. Item 4
  2. Item 5
  3. Item 8
  4. Item 9
Posted on

CSS – display: inline-block in IE7

I was having some problems with getting the layout of the buttons for the JQuery Tools Scrollable Navigator plugin to work in IE7 for CSlide, e.g. https://learntech.imsu.ox.ac.uk/cslide/collections/index/87.

After a bit of searching I found this: http://fourwhitefeet.com/2009/02/css-display-inline-block-in-ie7/, so thanks to Cathy at http://fourwhitefeet.com.

It turns out that, in IE7, display: inline-block only works on inline elements, and I was trying to use it on divs. The trick is to wrap the content of these elements in an element that is natively displayed inline, e.g. span. For my purpose, I could just replace my divs with spans (they probably shouldn”t have been divs in the first place, but I’d mutilated the examples for Scrollable to gte where I was). It should also work by just adding spans around the content that you want to be ‘inline-block’, but inside the ‘block’ element, e.g.

<div><span style="display: inline-block">My Content</span></div>