|
Scrolling Div areas, using overflow:auto |
||||||||
2 #ScrollDiv {width:275px;height:130px;overflow: auto; background-color: #E3E1DD;
3 border-color: #CCCCCC #666666 #666666 #CCCCCC;
4 border: 1px solid;}
5</style>
Suspendisse neque. Nunc urna nisl, varius eget, placerat vitae, mollis in, nisl. Praesent interdum. Duis tempus ligula ut ipsum. Sed dictum massa sit amet tortor. Nulla hendrerit mi a felis. Morbi auctor mauris id lorem. Cras ac magna. Aliquam erat volutpat. Phasellus sed felis. Nunc auctor, est vel adipiscing eleifend, purus tortor pellentesque lacus, sit amet mattis nisi lorem eget quam. Donec dignissim eros dignissim urna. In dolor. Nulla lacus enim, interdum at, interdum vel, faucibus vel, dui. Proin fringilla nisi quis tellus. Integer magna. Aenean iaculis. Ut lacus massa, fermentum dictum, ornare ut, malesuada sed, mauris. Nullam viverra sapien aliquam ligula. Fusce arcu quam, vehicula vel, iaculis at, sagittis eu, enim.
Duis aliquet ornare magna. Nullam pede risus, porttitor at, imperdiet a, gravida at, pede. Maecenas purus magna, cursus eget, sagittis non, elementum vitae, dolor. Integer congue, massa quis pulvinar posuere, nisi neque rutrum justo, ut tincidunt ante felis ut orci. Phasellus venenatis lobortis tellus. Donec mollis felis tristique dolor. Duis molestie porttitor ipsum. Maecenas magna diam, malesuada ut, aliquam quis, mattis at, massa. Nullam quis ante vel enim mollis dictum. Aenean sollicitudin quam non neque. Nam turpis. Vivamus sed lectus. Sed ligula. Etiam at nibh. Aliquam nec lectus eget pede auctor consectetur.
Text thanks to http://www.lipsum.com/
|
Non selectable drop down options in forms |
||||||||
I was recently developing an application that had several select fields in a form. The first dynamically populated the second, but with differing sets of data, that needed to be within the same select box, but seperated in some way.
It was only then that I found there is a 'optgroup' html tag for select boxes! This tag is used to group together related options in a select list. It automatically bolds the text, and is unselectable.
2<cfset variables.mySecondlist = "5,6,7,8">
3
4<cfoutput>
5<select name="number">
6<cfloop list="#variables.mylist#" index="I">
7 <option value="#I#">#I#</option>
8</cfloop>
9
10<optgroup label="Second List"></optgroup>
11
12<cfloop list="#variables.mySecondlist#" index="I">
13 <option value="#I#">#I#</option>
14</cfloop>
15
16</select>
17
18</cfoutput>
Just insert it where you want your category break to be, and assign it some text.
Handy for breaking up large sections of options.
|
Internet Explorer 7 and -ms-interpolation-mode css |
||||||||
Whilst working on a recent project I was looking at how IE 7 renders images that have been incorrectly sized in code. There is a css style "-ms-interpolation-mode" that handles stretched images in IE 7.
The msInterpolationMode property works with stretched images only. As an example if the dimensions of an image are 200x200 but the developer has specified height and width of 400x400, then the image will be stretched to the new dimensions using the nearest-neighbor algorithm, unless you override it with this property.
Notice the difference in the overstretched images above?
This can be achieved by adding this code to your style sheets:
2img.high { -ms-interpolation-mode:bicubic }
3img.nearest { -ms-interpolation-mode:nearest-neighbor }
4</style>
Note that Firefox handles this automatically.
|
Internet Explorer (IE) CSS hack using underscore |
||||||||
Often when developing an application I might have to stray onto the front end of an application (say the designer is on holiday or something). It goes without saying that your application should work AND look the same whatever the browser, and we all know that there are cross browser compatibility issues....
Normally I would either create a script to detect the browser type and version, and then load a browser specific version of the stylesheet.
Today tho I wandered into the '_' fix for IE. I say that its a fix for IE, as the content works as expected in FF.
It turns out that IE will read CSS values that have been prefixed with an underscore. So you can override specific settings with IE only version, like below:
2 margin-top: 100px;
3 width: 200px;
4 height: 100px;
5 background-color: green;
6 _background-color: red;
7}
8
9<div class="box">
10 This rectangle should be green on most of the browsers, except IE where it is red.
11</div>
The red background color will be ignored by everyone other than IE browsers.
