The style of pre tag I like
I use <pre> tag a lot in the html. I believe the guys that usually past codes into the pages will like it too.
I use the pre tag to list programming code such as C/C++, php, Linux shell output and some other content that is suitable for Monospace font.
The effect is what it is here. It has a scroll bar and it has a solid frame which will make it clear.
The style of pre tag I like most is this one:
pre {
border: 1px dashed #888;
padding: 5px 10px;
margin: 0 0 1em 0;
overflow: auto;
}
/* no vertical scrollbars for standards-compliant browsers */
/* no vertical scrollbars for IE 7 */
*:first-child+html pre:hover {
padding-bottom: 20px;
overflow-y: hidden;
overflow: visible;
overflow-x: auto;
}
/* no vertical scrollbars for IE 6 */
* html pre:hover {
padding-bottom: 20px;
overflow: visible;
overflow-x: auto;
}
Update history:
Updated on May 26, 2010. Scroll bar appear only when hover
Read more:
(No Ratings Yet)
Loading ...
The dashed version:
pre { border:1px dashed #333; padding:5px 10px; margin:0 0 1em 0; overflow:auto; }