Recent Notes

Displaying keyword search results 1 - 6
Created by James on July 19, 2009 20:51:23    Last update: January 11, 2011 20:14:18
If CSS3 border-image is properly supported, making a rounded corner box is very easy. You just need a round corner image like this: The following markup: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ... would render like this (try it in Firefox 3.5 and Google Chrome): However, IE as of version 8.0 does not support border-image . So until border-image is reliably supported in all major browsers, we still have to rely on tried and true tricks to make it work. In general, I found three general categories of tricks to make rounded corners: Good old tables. This trick creates a table of 9 cells and uses the 8 cells on the perimeter to render the borders and rounded corners. The central cell is used for...
Created by James on May 07, 2010 04:13:14    Last update: May 07, 2010 04:35:03
It seems that the key to aligning a checkbox with its label lies in the line-height property of the label. This simple HTML snippet aligns well: <!DOCTYPE HTML> <html> <head> <style typ... which is rendered like this: Change the font size of the label to 12px throws off the alignment: label.checkbox { font-size: 12px; di... In case 1, the height of the checkbox is 13px with 3px top and bottom margin, for a total of 19px , which is exactly the height of the label div. As can be seen from Firebug : Checkbox layout Label layout In case 2, the height of the label div shrinks to 15px , while the height of the checkbox remains the same: Checkbox layout Label layout And...
Created by James on October 11, 2009 21:15:53    Last update: October 11, 2009 21:19:39
Many techniques for making rounded corners do not work well when the element being rounded is displayed on a background with a different color (or multiple colors). Example 1: Nifty Cube with JavaScript <html> <head> <base href="http://www.html.i... Example 2: modx Simple Rounded Corner Box <html> <head> <title>Round Corner</title> ... Example 3: CSS3 (does not work in IE) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ... Example 4: This is one that actually works ! The nifty corner technique can be tweaked to be background friendly, although the JavaScript version didn't work for some reason. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ...
Created by Dr. Xi on March 10, 2009 23:42:59    Last update: March 10, 2009 23:44:56
It seems that dt , dd doesn't exactly line them up either. With this HTML page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric... I got this for IE:
Created by James on March 10, 2009 21:11:18    Last update: March 10, 2009 23:01:24
iretuotiowur, The reason I used block to render the labels is to avoid long labels from flowing underneath the checkbox. I'm not sure I understand your proposed solution. As far as I know, text-indent only applies to the first line of a paragraph. And I just found that Firefox does not honor it for label s (IE indents the first line as usual). For example, this page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric... renders like this in Firefox:
Created by James on February 22, 2009 00:12:50    Last update: February 23, 2009 02:55:31
This note records my struggle to get a checkbox aligned with its label in Firefox and IE. Starting HTML code. Use default attributes. Both checkbox and label float to the left. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric... IE looked OK. Firefox is messed up. Long label shifted to the next line. IE 7: Firefox 3.0.6: Set width of label to that of the containing DIV: <style type="text/css"> label { display:... Both IE and Firefox shift the label to the next line. That's reasonable because the DIV isn't wide enough to contain the label and the browser tried its best to render the label properly. IE 7 and Firefox 3.0.6: Set width of label to be less than the containing DIV: <style type="text/css"> label { display:......