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.

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)

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

CSS properties direction (padding, margins, etc)

You’ll have no doubt seen:

padding: 5px 10px 5px 10px;

in a CSS file. Do you ever wonder which of the properties are which?

Just start at the top and move clockwise until you reach the left side.

Top Right Bottom Left

It saves doing this:-

padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;

Just a simple one that I’m sure 99.9% of people knew.