Blog of Shaun McCran - Architecting robust, elegant technical and business solutions - CSS

Position:relative and overflow CSS issues in Internet Explorer

Tue, 06 Sep 2011 08:23:00 -0000

I was working on a project this week and in the final testing phases I noticed that there was some unusual behaviour in Internet explorer. A div with an overflow of auto had elements within it that had a position: relative class. The problem here was that the elements remained fixed in place, and the scrollbar was no longer scrolling their content. [More]

IE9 .Woff font browser support test

Wed, 03 Aug 2011 02:50:00 -0000

I started using Font Squirrel a while ago to embed custom font faces into websites. After upgrading to Windows 7 I encountered a heavily documented issue about IE 9 and @font faces. [More]

CSS 3 rounded corners - Background tip

Thu, 06 Jan 2011 14:51:00 -0000

Recently I noticed a CSS issue with CSS 3 rounded corners. There are a few instances where the order of your CSS is critical to the display layer. This article deals with rounded corners and background colours.

[More]

Why develop cross browser designs - why not code to specific browser strengths?

Mon, 08 Nov 2010 13:42:00 -0000

I've been working for a marketing Agency for the best part of a year now, and one of the things that always rear's its head in a digital project is the compatibility of designs in multiple browsers. We have all encountered differences in design compatibility and functionality due to the browser vendor and version number, but the usual course of action is try and code solutions that address the differences in browsers in an effort to make them look and work in the same way. This article examines why that is the case, and I put forward the argument that by doing this you are spending valuable project time trying to ensure the same user experience on different browsers, when it may be a much better idea to use that same development time coding to the strengths of each of those browsers, to create a more rich user experience instead of a more generic one. [More]

Jquery Rounded Corners Plugin Example - cross browser CSS replacement

Wed, 08 Sep 2010 15:50:00 -0000

A while ago I wrote an article on how to implement CSS3 and Cross browser rounded corner CSS. That article (http://www.mccran.co.uk/index.cfm/2010/7/8/CSS-3-Rounded-Corners-Example) mentions that the CSS3 code has not been adopted as a standard by some browsers (IE - I'm looking at you) but that there are some work around's to it, most of which involve re writing DOM elements using JavaScript.

This article deals with a JQuery plugin that can emulate a totally cross browser CSS3 rounded corners solution.

There is an example of the finished code here: JQuery Rounded Corners example

[More]

CSS 3 Rounded Corners Example

Thu, 08 Jul 2010 12:46:00 -0000

My curiosity into CSS 3 was piqued at Scotch on the Rocks 2010 this year. There was a very good presentation from Chris Mills from Opera http://twitter.com/chrisdavidmills where he touched on some of the new CSS 3 and HTML 5 functionality that some of the modern browsers are taking advantage of. I particularly liked some of the really simple, but visual CSS 3 changes, in this case rounded corners. This article is a quick example of how to add rounded corner styling to your designs. Here is a demo of CSS 3 rounded corners in action. [More]

Using the JQuery Cookie plugin to emulate server side forms

Mon, 05 Jul 2010 12:27:00 -0000

A project request recently came up where we needed to track some users responses to a series of questions, then build an account 'home' page based on those responses. Pretty straight forward you'll agree. The problem here arose from the clients using a bespoke online solution that blocked any kind of server side interaction. I've played with JavaScript cookies in the past to remember display states in JQuery functions, so I thought they would be a great solution to this. This article deals with how to use JavaScript cookies to emulate a normal form submission. There is a demo of using the JQuery Cookie plugin to emulate forms here. [More]

Using cfcontent to serve up Coldfusion generated CSS documents

Tue, 11 May 2010 16:48:00 -0000

The article deals with using cfcontent to serve up dynamic data driven CSS. I'll use Coldfusion to embed variables in a cfm file, then use cfcontent to have the browser serve the content as a CSS file. [More]

Using JQuery to alter CSS properties of page elements using a checkbox form field

Tue, 20 Apr 2010 15:01:00 -0000

I was recently writing a form where I needed to control the visibility of a div element based on a user selection. If a user checked the checkbox, then a div was to appear with related options in it. This article deals with using JQuery to alter CSS properties on the fly. [More]

Creating a pop up floating div with JQuery

Tue, 23 Feb 2010 09:52:00 -0000

This entry will deal with how to create a displayed / collapsible floating div, using JQuery. When I build a web platform I often like to include small sections of text alongside the functionality, just to provide the users with a little guidance on what is going on. Rather than having these inline, where they can often interfere with the content and display, I like to add them to a 'help' div that I float inside the framework. First we include the JQuery library from Google, and our link. It doesn't go anywhere, but we will attach a JQuery event to it.





Pop me up
stuff

Next we create our JQuery function, attached to the 'help' div. This adds a div to the document with whatever content you have set in it. There is also a 'close' link in the floating div that calls the close function. $(function() { $("#help").live('click', function(event) { $(this).addClass("selected").parent().append('ContentCancel'); $(".pop").slideFadeToggle() return false; }); $(".close").live('click', function() { $(".pop").slideFadeToggle(); $("#contact").removeClass("selected"); return false; }); }); $.fn.slideFadeToggle = function(easing, callback) { return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback); }; Lastly we add some styling and positioning to tie the whole lot together. This gives the pop up div its shape and style. I've positioned the floating div on top of the calling function text. You can see an example functionality here.

NoScript alternatives for Javascript content using CSS visibilty

Thu, 04 Feb 2010 17:25:00 -0000
I recently stumbled upon an interesting dilemma whilst using an image map that was dynamically generated from a Coldfusion Query. If you turn JavaScript off, then the image maps primary graphic still stays visible (and occupies the same space on a page), but none of the map links function anymore. The problem was to replace the map content with a list of hyperlinks that provide the same functionality. Initially I set the maps div CSS to be hidden. In this way the map is not shown by default. // css .interactiveMap {visibility: hidden;} Next we can use a JavaScript call to change the CSS visibility to 'visible'. In this way if JavaScript is disabled the graphic remains hidden, if JavaScript is enabled it turns in on. // show the map document.getElementById('interactiveMap').style.visibility = "visible"; Lastly we can create the content that we want to see instead of the map. Don't forget to wrap it all in the no script html tag. By altering the css properties like this we can have the map and the no script content occupy the same real estate on the screen. If you simply populate the no script with the alternative, then the space the map occupies stays occupied, just by a hidden map, giving you a large blank space.

Creating a CSS only cross browser drop down menu

Fri, 08 Jan 2010 16:47:00 -0000
I'll say this up front, I'm not a CSS guru. I like CSS, but it can be incredibly frustrating. One of the clients I am currently producing work for requires a high level of Accessibility. High enough that we need to avoid using JavaScript unless any script has a "Non" JavaScript equivalent. The site navigation is through a top level horizontal menu, but what if we also want a drop down menu? Can we do it in CSS only, and it still be Firefox, Internet Explorer 6,7 and 8 compatible? Yes, we can, but it's a lot of code, and it's not pretty. The basic concept behind most CSS menus is to use a list, and transform each list item to suit your styling. So we will create a div, with a class of menu. Then create a list inside it. Top menu option Link 1 Link 2 Link 3 Link 4 Link 5 Link 6 Notice that there are some specific if statements relating to different versions of Internet Explorer. these basically make the functionality the same for each version, they are compensating for the differences in code handling between IE versions. Next create a set of CSS styles to alter the appearance of the list. I am not going to go into the CSS line by line, as it is commented, but I'll explain the methodology behind it. The top level menu item is always displayed, but the list is hidden using "visibility:hidden". When the user mouse's over the menu div the CSS applies a:hover ul{visibility:visible;. This makes the list visible. .menu {width:149px; height:32px; position:relative; z-index:100;border-right:1px solid #000; font-family:arial, sans-serif;} /* hack to correct IE5.5 faulty box model */ * html .menu {width:149px; w\idth:149px;} /* remove all the bullets, borders and padding from the default list styling */ .menu ul {padding:0;margin:0;list-style-type:none;} .menu ul ul {width:149px;} /* float the list to make it horizontal and a relative position so that you can control the dropdown menu positon */ .menu li {float:left;width:149px;position:relative;} /* style the links for the top level */ .menu a, .menu a:visited {display:block;font-size:12px;text-decoration:none; color:#fff; width:138px; height:30px; border:1px solid #000; border-width:1px 0 1px 1px; background:#c0c0c0; padding-left:10px; line-height:29px; font-weight:bold;} /* a hack so that IE5.5 faulty box model is corrected */ * html .menu a, * html .menu a:visited {width:149px; w\idth:138px;} /* style the second level background */ .menu ul ul a.drop, .menu ul ul a.drop:visited {background:#c0c0cc url(arrow.gif) no-repeat 130px center;} /* style the second level hover */ .menu ul ul a.drop:hover{background:#c0c0cc url(arrow.gif) no-repeat 130px center;} .menu ul ul :hover > a.drop {background:#c0c0cc url(arrow.gif) no-repeat 130px center;} /* hide the sub levels and give them a positon absolute so that they take up no room */ .menu ul ul {visibility:hidden;position:absolute;height:0;top:31px;left:0; width:149px;border-top:1px solid #000;} /* another hack for IE5.5 */ * html .menu ul ul {top:30px;t\op:31px;} /* style the table so that it takes no part in the layout - required for IE to work */ .menu table {position:absolute; top:0; left:0; border-collapse:collapse;} /* style the second level links */ .menu ul ul a, .menu ul ul a:visited {background: ghostwhite; color:#000; height:auto; line-height:1em; padding:5px 10px; width:128px;border-width:0 1px 1px 1px;} /* yet another hack for IE5.5 */ * html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;} /* style the top level hover */ .menu a:hover, .menu ul ul a:hover{color:#000; background:#c0c0cc;} .menu :hover > a, .menu ul ul :hover > a {color:#000; background:#c0c0cc;} /* make the second level visible when hover on first level list OR link */ .menu ul li:hover ul, .menu ul a:hover ul{visibility:visible;} There are also a lot of other browser specific hacks present, as the aim was to get the menu working in every Internet Explorer version, and be Accessible. There is a demo of this here: CSS menu demo

My handy IE CSS tweaks list

Fri, 18 Dec 2009 12:05:00 -0000
I'm not really a design kind of person, I like designing things, and I'm learning more and more CSS all the time, but it's the server side coding that I love like Apple Pie and custard. Recently I've had to do a bit more design work, so I've been tripping all over myself to get CSS working in IE6,IE7,IE8 and firefox. I've learnt a few interesting things in the last few days, and I know I'm going to need to use them again. Some are considered 'hacks', some are just clever CSS techniques. They all feel a bit like secret rules of a club I'm not really a member of yet though. So I'm making a handy list, so I don't loose them. I hope to refine and add to this on an ongoing basis, so if you know a better / easier way please let me know. After all coding standards are for life, not just Christmas, and I don't like the idea of anything being a hack, even if it is CSS.
Adding a 1px high line to IE
I am trying to add a 1px line, like a HR line to the page, it displays fat in IE? It seems that some versions of IE will display a div without content as the same height as your font size. Add html comments to it to drop it down to the right height:
IE is adding padding and margins to everything by default
I think there is a lot more information about this out there, but for now I've found that adding the code below will kill most of IE's random padding/margin issues. * {margin:0; padding:0; border: 0px;}
I've built a JQuery accordion and the content doesn't move correctly
When expanding a JQuery accordion element the content underneath it is not moving down, and the accordion is expanding over it. This was a simple fix, but a bit of a pain to find. Just do not specify a height attribute on the div that hold the accordion, IE will stick to the height, but firefox will let it grow to be longer.
Styling form element borders
If you have a CSS rule like the one above that removes all the margins, padding and borders then all your form elements will have no border. IE your text fields and textareas etc will not have a clearly defined edge to them. By adding the line of CSS under this (select,input, etc) you can set the style width and colour of your form elements so that you control them, rather than the browser defaults. In Internet explorer this will also add borders to the checkbox and radio form elements. There does not seem to be any way of writing a CSS style to remove this inherently, so create a style of borderless and set all your radio and checkbox fields to "class=borderless". * {margin:0; padding:0; border: 0px;} select,input,textarea{border-width: 1px; border-style: solid; border-color: grey;} /* IE stops the radio borders */ .borderless{border: 0px;}
Strange IE positioning fix
Sometimes in IE (mainly 6) using position: absolute just does not render the div on screen. I am not sure why. Adding a "clear: both;" or a "clear: left;" or a "clear: right;" appears to fix this.
Easy centering of elements
I used to struggle with centering elements on a page all the time, but now you can do something like this: P.blockoftext { margin-left: auto; margin-right: auto; width: 6em } Text This will center a block of text and give it a width of 6. For images you can do this: img.displayed { display: block; margin-left: auto; margin-right: auto } That will auto center the image inside its containing div.

Altering bullet point styling using css

Fri, 13 Nov 2009 08:53:00 -0000
I've been writing an error handler that uses JQuery to output a list of errors on a validation event. The error display uses a html list display, and the default display style is a bullet list. This is a simple css script to change the bullet style to something else. In this case nothing! First list item Second list item Third list item Output:

First list item

Second list item

Third list item

I think it looks a bit cleaner than bullet points.

Dynamically colouring swfs using Flashvars to match generic templates

Fri, 02 Oct 2009 12:38:00 -0000
One of the application frameworks that I regularly work in is an entirely generic, white box solution. It builds itself based on some instantiation variables. This includes the CSS for that instance of the application. More recently I was integrating a swf object that would be used on hundreds of instances of this application, but it was generically coloured, which just wouldn't work. I needed to somehow have the flash object fit the CSS style of that instance of the App. Solution The flash object accepts a series of Flashvars that are passed into it on load. Like this: var flashvars = {}; flashvars.path = "value"; flashvars.upload_url = "value"; flashvars.color = "value"; flashvars._border_color = "value"; So all I had to do was find a common element in the framework, pick its colour CSS property out, and inject it into the Flashvars object. Using the prototype method of 'getStyle' we can pass in the id of an element, and retrieve its CSS property, IE the background-color. var swfBg = $('element id').getStyle('background-color'); swfBg = swfBg.parseColor().replace('#',''); alert(swfBg); This returns an RGB value, so we run it through the 'parseColor' method, and strip the hash. This gives us a valid Hex colour value, which we use in the Flashvars instead of a hard coded colour code. var flashvars = {}; flashvars.path = "value"; flashvars.upload_url = "value"; flashvars.color = swfBg; flashvars._border_color = "value";