CSS

Annoying IE Compatability Mode

I recently had to create a site for an education facility, and they turn on Compatibility mode for all their networked PCs, for legacy support.

This was messing around with some of my JS/CSS functionality, so I needed a work around.

3 options really:

  1. Get the IT manager to remove the global compatibility layer and only apply to the legacy apps. Not going to happen!
  2. Rewrite the code to use IE friendly techniques. Possible but a ball ache.
  3. Force the browser to not use compatibility mode. Sounds best, right?

So, its really very simple, in the head section of the page:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

That worked an absolute treat.

Google Fonts – nasty bold

Say you are using Google Web fonts for some CSS. Well, if you don’t include the correct bits you may encounter this problem.

Say, you use the Ubuntu font, for instance, and you have this in your <head>  block:

<link href="http://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet" type="text/css" />

Then, you use this font everywhere, and this includes a <th> section. You may find that the font displays like this:

Odd bold variant on Google Webfonts

Why has this happened? Well, its because you’ve not included the bold variant of the font in the header link.

For this particular font, it should be:

<link href="http://fonts.googleapis.com/css?family=Ubuntu:400,700" rel="stylesheet" type="text/css" />

700 is the bold variant. Once you’ve changed this, you should find that the bold is rendered correctly:

Fixed version of Google Webfont bold

CSS not loading, Firebug states ‘Aborted’

Had some CSS that worked in Chrome, but not Firefox or Opera. Firebug reported this:

Aborted CSS

 

 

 

 
Turns out, that my media atributes were incorrect,

media="screen print"

will not work in FF and Opera, but

media="screen, print"

does work

However, if this does not fix your problem, or you are not using media selectors, then it will probably be due to an extension to your Firefox browser. I have heard the Foxyproxy and FireQuery cause this sometimes. Best bet is to remove any extensions you’re not using. If you’re still getting it, then it’ll be down to you to decide if you want to use the extension or get rid of the errors.

Chrome Conditional CSS

Before you say it, I know there are better ways of streamlining your CSS based on the browser, but this is good to ‘know’

@media screen and (-webkit-min-device-pixel-ratio:0) {
.element_class {
font-weight: bold;
}
}

Its just good to know that the above CSS will only be applied to the Chrome or Safari (3) browser (at the time of writing)

Ajax Loading GIF

So you want a little funky AJAX loader?

Add this to your JS main core file…:

$(document).ready(function() {
    //initiate an ajax start message
    $(document).ajaxStart(function() {
       //show the message
       $('#ajax_loading_indicator').show();
    });
    //when ajax is completed
    $(document).ajaxStop(function() {
       //hide the message
       $('#ajax_loading_indicator').hide();
    });
});

And create a nice little div somewhere:

<div id="ajax_loading_indicator">
    <img src="/public/images/ajax_loading.gif" alt="Loading" />
    PLEASE WAIT
</div>

I use the following CSS to style mine, so its unobtrusive but visible:

#ajax_loading_indicator {
    position: fixed;
    right: 2px;
    top: 2px;
    background-color: #efec9f;
    border: 1pt orange solid;
    padding: 5px 30px 5px 30px;
    display: none;
}

TIP: If you can’t be bothered to find an AJAX loading GIF, then there is a great little website that will create you one for free. Its, www.ajaxload.info

Easy!

You do need to have jQuery (version 1.0+) for this, in case you didn’t work that out… www.jquery.com

 

 

Preventing an element getting split over several pages

If you are trying to add a ‘total’ or a report footer and its getting split over the penultimate and final page, then just add this css to the element class:

page-break-inside: avoid;

Works a treat for me – I think its only for the @print containers but it successfully keeps my DIV in one piece on the last page, or if it won’t fit, on another page.

Display CSS in its full style

I wanted to add a style to a div, but I was sure that our extensive CSS would have a class I could use, thus saving myself from increasing the size of the CSS file. However, how would I be able to view all the different styles and classes in the style they were assigned to? This would enable me to be able to quickly find the style I wanted and apply the class.

Couldn’t really find anything, so I quickly knocked one up.

http://css.tatedavies.com

Absolute positioning within another container

Say you want to position something within its container, then the element you are trying to position needs to have:

position: absolute;

But the parent container can simply have:

position: relative;

So in full:

<div class="container">
    <div class="abs-position">
        Hello world!
    </div>
</div>

And then simple CSS:

.container {
    position: relative;
}

.abs-position {
    position: absolute;
    left: 100px;
    height: 200px;
}

Easy solution to an age old problem.