1st May 2009

Ionic – CSS multi column framework

By: PhillCMS/Frameworks, Dynamics, SEO1 Comment

Introducing Ionic, a CSS framework put together to specifically handle layouts with more than 2 columns in CSS.

The framework, originally written by Jason under the name ‘fluid1′, has been used on our client’s website, IEMA.net, since 2005. The aim of the project was to make it accessible to all the common browsers, whilst keeping the HTML markup as semantic as possible.

Currently the script only supports a maximum of 3 columns, but there is no reason why the algorithm can’t be extended to support any number of columns.

Ionic has its own microsite under development where you’ll be able to grab the latest releases and find out more about the framework. The link is:
www.consil.co.uk/ionic.

Tags: , ,

29th December 2008

Clearing floats

By: PhillDynamicsNo Comments

clearing-floats-29dec08To anyone out there reading up on clearing, this is the best method:

http://www.positioniseverything.net/easyclearing.html

It’s totally cross-browser compatible, doesn’t leave any messy markup and leaves the code fully accessible. It does however have 1 flaw…

Scroll down to the part about the IE/Mac problem and you’ll see the fix involves adding a display: inline-block to the container block, which is then re-instated to a display: block in the IE stylesheet.

The problem is that inline-block also affects all the other non-IE browsers. This gives us a wrapper that’s not 100% wide. So what can we do?

Initial Setup

The following example will work on every modern browsing environment except Internet Explorer on Macs. You may just want to leave it like this and not bother accommodating the ancient browser.

MyPage.html

<html>
<head>
   <link rel="stylesheet" type="text/css" href="main.css" media="screen" />
   <!--[if IE]>
      <link rel="stylesheet" type="text/css" href="ie.css" media="screen" />
   <![endif]-->
</head>
<body>
   <div class="clear">
      <div style="float: left;"></div>
      <div style="float: right;"></div>
   </div>
</body>
</html>

main.css

.clear:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}

ie.css

.clear { zoom:1; }

Getting it working in IE/Mac

As described in the P.I.E article, an inline-block trigger on the wrapper will trigger Internet Explorer’s  built in auto-clearing. There are 2 ways to do this:

Overwriting display

Apply 100% width to the inline-block in your main stylesheet This works 99% of the time, just be aware of issues with the IE box model bug.

Add this code to main.css after the clear:after rule:

.clear { display:inline-block; width:100%; }

You now need to revert the display property back to block for IE/Win to get the auto-clearing effect to work. Replace the code in ie.css with:

.clear { zoom:1; display:block; }

Browser sniffers

Have different stylesheets for IE/Win and IE/Mac and include them using a server-side or JavaScript browser sniffer. This is arguably the cleanest fix.

First off remove the conditional include from MyPage.html (<!–[if IE]> …). This file will be included later on using a different method.

Create a new file called iemac.css:

.clear { display:inline-block; width:100%; }

PHP users can them add this code in the html <head> element:

<?php
$browser = strtolower($_SERVER['HTTP_USER_AGENT']);
if (strpos($browser, 'msie')) {
   if (strpos($browser, 'mac')) {
      echo "<link rel='stylesheet' type='text/css' href='iemac.css' />";
   }
   echo "<link rel='stylesheet' type='text/css' href='ie.css' />";
}
?>

Alternatively, you can apply a fix using JavaScript. Again this goes in the <head>:

<script language="javascript" type="text/javascript">
<!--
if (navigator.appName.indexOf("Microsoft Internet Explorer") >= 0) {
   if (navigator.platform.indexOf("Mac") >= 0) {
      document.write("<link rel='stylesheet' type='text/css' href='iemac.css' />");
   }
   document.write("<link rel='stylesheet' type='text/css' href='ie.css' />");
}
// -->
</script>

Tags: , ,