Shaun Mccran

My digital playground

06
M
A
Y
2009

Suckerfish sticky drop down issues in IE7

Most people are familiar with the suckerfish style drop down menus, but as a quick recap they are lightweight CSS driven dropdown menus.

I won't go into massive depth here, but suffice it to say that there have been many improvements to the way they work, and the most streamlined version I've come across is here:

http://www.htmldog.com/articles/suckerfish/dropdowns/

It's a good article on how to get them working on your site, and how they interact with different browser versions.

What is quite interesting though is that there is an issue with them in IE7. If you use the 'sticky' version of them (where the menu stays visible even after mouse out) then IE7 has a CSS flaw in the handling of it.

As the link under here explains, there is a fix for earlier IE versions that creates a pseudo class to get them to work as they should, but IE7 handily circumvents this to break.

http://css-class.com/articles/explorer/sticky/

This entry details how to fix the IE7 bug and end out with a totally cross browser CSS friendly version.

26
F
E
B
2009

Scrolling Div areas, using overflow:auto

An easy way to create a scrollable contained area within your template is to use the overflow style property. This can be set to true or false, and also auto, which will add a scroll bar, and allow scrolling if the content exceeds the dimensions of the div.
view plain print about
1<style>
2    #ScrollDiv {width:275px;height:130px;overflow: auto; background-color: #E3E1DD;
3    border-color: #CCCCCC #666666 #666666 #CCCCCC;
4    border: 1px solid;}
5</style>
The DIV code which goes inside your template. This div can be placed inside any element of your page including < td > or other < div >'s.

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/

_UNKNOWNTRANSLATION_