DB2 学习笔记

I use <pre> to wrap the programming code in my pages. What I want is:

• the code within <pre> would not have any unexpected line wrap.
• display horizontal or/and vertical scrollbar only as need to have.
• I don't want the fixed width. it should be flexible with the window width change, and would not exceed to the menu part. the horizontal scrollbar would have if needs.
• I want to have the flexible height that depends content, but maximum 450px. the vertical scrollbar would have if exceeds.

That's all I want, but it won't work out with both Firefox and IE without hacks. I had this style first.

pre {overflow: auto;border: 1px solid #ccc;width: 90%;max-height: 450px;padding: 8px;}

overflow: auto tells to have scrollbar as need. maxheight tells the limitation of the height. I soon found that maxheight is not supported in IE. IE would extend the height as far as the content need. And that's not all, IE push it much. With overflow: auto, you will get the unexpected vertical scrollbar that follows horizontal scrollbar. The reason is that IE will see the horizontal scrollbar as a part of content, then it will give the stupid vertical scrollbar like this. (you'll see an unexpected vertical scrollbar below if you use IE)

Here's a simple for test IE vertical scroll bar problem. When this line is long enough to exceed container that makes IE have a horizontal scrollbar, then the vertical scrollbar comes. If this line is not long enough for your screen yet, please decrease your screen size.The style this object using:<pre style="border: 1px solid #cccccc; padding: 8px; overflow: auto; width: 90%">

There's solution found here and here(none English, none Chinsese, only see the code) , they use IE hacks to resolve the vertical scrollbar problem. It do works, but I still prefer to have the limited height. I got this IE hack for having maxheight in IE. Below's the style.

pre {overflow: auto;border: 1px solid #ccc;width: 90%;max-height: 450px;padding: 8px;}* html pre { /* IE hacks */height: expression(this.scrollHeight > 450 ? "450px" : "auto");}

For the damn vertical scrollbar in IE I got an idea from the code in this post. The idea is to encrease the height after IE calculated the object height. Here's a show, the damn vertical scrollbar in the example above will be removed.About IE scrollHeight logic there's more detail, here's an artible for it.

Here's a simple for test IE vertical scroll bar problem. When this line is long enough to exceed container that makes IE have a horizontal scrollbar, then the vertical scrollbar comes. If this line is not long enough for your screen yet, please decrease your screen size.This style remove the unexpected verticle scrollbar.<pre style="border: 1px solid #cccccc; padding: 8px; overflow: auto; height: expression(this.scrollHeight+15); width: 90%">

It works but new problem came. This style width: 90% is not going to act as expect if I use above code. IE will confuse the base line between window width and container(div) width for the objects having scrollHeight > 450. I have to have below code with it together in IE hack to resolve. IE brings too much issue! 

 

height: expression(this.scrollHeight > 450 ? "450px" : this.scrollHeight+15);width: expression(this.scrollHeight > 450 ? "62%" : "90%");

 

62% is an experience value that works for me. For you it depends your page structure and your favor. Finally, I had my things done. Below is the finally code in my style sheet. The image code.gif is a cool idea to personalize your code area.  CSS Selector ":before" and ":after" could do the similar thing but it's only supported by CSS 3. Currently CSS 2 is widely supported. Another article(Chinese) about CSS Selector.

pre {margin: 16px;overflow: auto;padding: 40px 0 20px 60px;max-height: 450px;background: transparent url(/images/code.gif) left top no-repeat;}* html pre { /* IE hacks */height: expression(this.scrollHeight > 450 ? "450px" : this.scrollHeight-40);width: expression(this.scrollHeight > 450 ? "62%" : "90%");}