Search

Subscribe

Enter your email address to subscribe to this blog.

Recent Comments

Grails Spring Security Plugin - Logout postOnly setting
Adam said: I believe remoteLink should work [More]

Grails Spring Security Plugin - Logout postOnly setting
Jan said: Hello your solution seems to work. - But why is a POST logout needed? I was actually thinking about ... [More]

jQuery Select Example
mysql services said: nice commands to work and apply in projects really helpful [More]

ColdFusion cfinvokeargument bug
Paul Rowe said: I understand the frustration with this. Unfortunately, I think this is one of the "affordances&... [More]

ColdFusion cfinvokeargument bug
Adam Cameron said: @Henry is correct. This is standard behaviour in all CFML tags as far as I am aware. It's counter-in... [More]

Maximum and Minumum Height in IE

While re coding my site I have come across many IE bugs that I been forced to learn about. The max and min bug is just another example of IE6 not playing well with others. Fortunately they fixed this in 7 and should only affect 6 and below. The min and max height (and width for that matter) allow you to set minimum and maximums for an element. I actually use this for my code view. In BlogCFC everything you put in between code tags gets parsed out in a .code block. When you have very little code there is no problem but what happens if you have 300 lines of code in your example? You don't want it taking up your whole page do you? The answer is no, so you can set a max-height property for the code div. This is the css code for my code block.
view plain print about
1.code {
2    font-family:courier new;
3    font-size:12px;
4    color: black;
5    border: solid thin #bc5e1f;
6    background-color: #f3f3f3;
7    overflow: auto;
8    max-height: 200px;
9    padding: 4px;
10    line-height: 15px;
11    margin:5px 0;    
12}
This works great in Firefox and IE 7 but IE6 does not recognize min and max height values so it shows all of the code. This is where expressions come into play.CSS expressions were introduced in Internet Explorer 5.0 and it allows you to to assign a JavaScript expression to a CSS property. This is a great way to correct this problem because no other browser will see our expression. We still can not use a max-height property but we can set the height of this div. All this expression does is evaluate the height of the element, if it is greater than 200 pixels it sets the height to 200.
view plain print about
1height: expression(this.scrollHeight > 200 ? "200px" : "auto"); /* IE */
Firefox and IE7 will rely on the max height while IE6 will see height property. The only downfall to expressions is that they will fail if JavaScript is turned off. All in all I think it is an easy fix for our problem.
 
 

CSS hover selector fix for IE6

The hover selector is wonderful css technique that can add style to an element as well as improve usability. Most people use it to style links so that users are aware of the link they are hovering over. One common technique is to underline all of the links on a page and then remove the underline when a user hovers over the link. Again this improves both the look of the page as well as usability. Another technique I enjoy is changing the background color of a row when a user hovers the row. This can be achieved by simply using the :hover pseudo-class. Here is a screen shot of my example.

The problem with this technique is it works in all browsers except IE6, of course. IE6 only supports the :hover pseudo-class on anchor () tags. So how can we fix this so that all users see our row highlight? There are at least 2 solutions that I know of. The first involves a little JavaScript and I found a great example of how to do this on www.sidesofmarch.com. The example basically uses prototype to grab all of the rows and apply a class to them. You could easily do this in jquery, ext or spry as well.

The second solution is to use the csshover behavior that was developed by Peter Nederlof. IE supports so called behaviors; .htc or .hta files that can be attached to specific elements using css making it possible to let these elements behave in a special way. You can visit Peter's site to learn more about it. Once you download the csshover.htc file you simply add the following to your stylesheet. < This will look parse your stylesheet and search for all :hover rules and replace the rule with a scripted event. I really like this solution because it enables you to use standard code for IE7 and FireFox while using this to apply a "fix" to IE6. Here is the final code for my example, enjoy!

index.cfm stylesheet.css

 
 

Block Element Lists Border Tip

A reader emailed me a quick question regarding css lists and borders based on an example I wrote earlier.
How do you create a top and bottom border for each list element like your examples show. I create a top and bottom border and it is double for each. If I just create a bottom border the 1st one is missing a border. Is there an easy solution?
There is actually a quick way to work around this. Taking the approach you did I will create a bottom border for each list item. Then I will set my margins and padding to 0 on my unordered list. Now we can just set a top margin for the unordered list to match our list items. Here is a code and a quick snapshot of the output. index.html
view plain print about
1<html>
2<head>
3    <title>Bordering List Elements</title>
4    <link href="stylesheet.css" type="text/css" rel="stylesheet">
5</head>
6
7<body>
8
9    <div id="navigation">
10        <h2>Site Navigation</h2>
11        <ul>
12            <li><a href="##">Link 1</a></li>
13            <li><a href="##">Link 2</a></li>
14            <li><a href="##">Link 3</a></li>
15            <li><a href="##">Link 4</a></li>
16            <li><a href="##">Link 5</a></li>
17            <li><a href="##">Link 6</a></li>
18            <li><a href="##">Link 7</a></li>
19            <li><a href="##">Link 8</a></li>
20            <li><a href="##">Link 9</a></li>
21            <li><a href="##">Link 10</a></li>
22            <li><a href="##">Link 11</a></li>
23        </ul>
24    </div>
25
26</body>
27</html>
stylesheet.css
view plain print about
1* html ul li a {
2 height:1em;
3}
4#navigation {
5    width:200px;
6}
7h3 {
8    margin:0px;
9    padding:0px;
10}
11ul {
12    margin:0px;
13    padding:0px;
14    list-style-type:none;
15    border-top:1px dotted #272727;
16}
17
18li a {
19    color: #759398;
20    text-decoration: none;
21    padding:6px;
22    display: block;
23    border-bottom:1px dotted #272727;
24}
25li a:hover {
26    text-decoration: none;
27    background-color: #132022;
28    color: #ffffff;
29}
 
 

IE6 Whitespace Bug

The better I get at css (and I am getting better) I really start to understand designers hatred for IE. I guess I always knew it on some level but when you are really trying to write clean code it starts to upset you that you have to hunt down IE6 specific bugs. My advise to everyone working with css is to get your layout/design working in a standards compliant browser and then double back to find out what bugs you need to fix. The bug I came across today (I have before but this is a great fix) is the IE Whitespace bug.

I was trying to create a block level list elements for a navigation like flow. When you use the code below and check the output in FireFox everything is exactly how you want it. In IE though there is extra space between elements. Here is the code and what it looks like in both browsers. The one on the left is FF and the right is IE6.

view plain print about
1<html>
2<head>
3    <title>Lists Example</title>
4    <style>
5    #navigation {
6        width:200px;
7    }
8    h3 {
9        margin:0px;
10        padding:0px;
11        border-bottom:1px dotted #272727;
12    }
13    ul {
14        margin:0px;
15        padding:0px;
16        list-style-type:none;
17    }
18    li a {
19        color: #759398;
20        text-decoration: none;
21        padding-top: 4px;
22        padding-right: 0px;
23        padding-bottom: 4px;
24        padding-left: 2px;
25        display: block;    
26        border-bottom:1px dotted #272727;
27    }
28    li a:hover {
29        text-decoration: none;
30        background-color: #132022;
31        color: #ffffff;
32    }
33    </style>
34</head>
35<body>
36    
37    <div id="navigation">
38    <h3>Navigation</h3>
39    <ul>
40        <li><a href="##">Menu Item 1</a></li>
41        <li><a href="##">Menu Item 2</a></li>
42        <li><a href="##">Menu Item 3</a></li>
43        <li><a href="##">Menu Item 4</a></li>
44        <li><a href="##">Menu Item 5</a></li>
45        <li><a href="##">Menu Item 6</a></li>
46        <li><a href="##">Menu Item 7</a></li>
47        <li><a href="##">Menu Item 8</a></li>
48        <li><a href="##">Menu Item 9</a></li>
49        <li><a href="##">Menu Item 10</a></li>
50    </ul>
51    </div>
52
53</body>
54</html>

One solution to the problem I found that I really like was hicksdesign.co.uk. After reading through the comments though some users pointed out that the css may not validate so I ended up going with a solution from the comments. Placing the following code in your css will fix the problem and the css will validate. The final outlook looks good in all the browsers that I tested.

view plain print about
1<style>
2* html ul li a {
3    height:1em;
4}
5</style>

 
 

CSS Fun: Highlighting different types of links

 I am in the middle of reading the book CSS Mastery by Andy Budd. First off what a great book for everyone. I am by no means a designer but this book has helped out big time. Using CSS day to day is one thing but once you really start to understand why things happen (i always blame IE) then you are much better off. You may periodically see a CSS tip from me, most of which you can see on my site.

The first tip I am going to share with you is using how to highlight different types of links. This makes it easier for users to understand what they are clicking on. We will use this for external links and email links. The easiest way to do this is to add a class to any external links and then apply that class to all external links. The problem with that method is you have to go around to each link and add a class.  An easier way of doing that is using attribute selectors.

Attribute selectors allow you to target an element based on the existence or value of an attribute. This technique works by first targeting any links that start with the text http: using the [att^=val] selector. This will highlight all external but it will also pickup any internal links using absolute paths. To fix this we can reset any links that match our domain name. In the code below we are setting the background image for all external links, resetting links that are absolute internal and finally giving some style to mail links. Below the code is examples of each.

   1:  /* show users that links are external */
   2:  a[href^="http:"] {
   3:      background: url(../images/externalLink.gif) no-repeat right top;
   4:      padding-right:10px;
   5:  }
   6:  a[href^="http://www.danvega.org"] {
   7:      background-image:none;
   8:      padding-right:0px;
   9:  }
  10:  /* show users that this is an email link */
  11:  a[href^="mailto:"] {
  12:      background: url(../images/email.png) no-repeat right center;
  13:      padding-right:15px;
  14:  }


This is an external Link To Google
This is an absolute link to my about page
This is a link to email me

 
 

Previous Entries / More Entries