===== Basic details ===== * Author - [[http://www.pbase.com/arjunrc/profile|Arjun]] * License - [[http://creativecommons.org/licenses/by-sa/1.0/|Creative Commons]] * Background image - Yes * [[http://www.pbase.com/arjunrc/|Demo]] * Browser specific tricks - Yes * Small 'wraps' tricks specific to browsers (though it covers most popular browsers) * Internet explorer specific gradient filter that behaves gracefully in other browsers * Firefox/Mozilla specific rounder corners ===== Browser Test ===== * Firefox * 1.5 RC3 on Ubuntu Linux 5.04 * 1.5 RC3 on Windows XP SP2 * Opera * 8.02 on Ubuntu Linux 5.04 * IE * 6.0.2 on Windows XP SP2 ===== Code ===== /* ==================================================== Stylesheet Name: arjun_root Last Edited: Wed, April 27,2005 Got bored of black styles. Inspired by Ian Chappell's simple white style. Used webdevs thumbnail positioning to avoid cross browser issues. License Terms : Attribution-ShareAlike 1.0 http://creativecommons.org/licenses/by-sa/1.0/ NOTE 1: I have removed several CSS elements that are specific to my needs and may not be needed by general users. If you want to see all the CSS classes, including those that are relevant only to me, check out www.pbase.com/arjunrc directly NOTE 2: The news scroller box in my page is not part of CSS, it's done by adding javascript to the User Description area of the root page. If you want to copy that too, then you need to get the full CSS from my page as well as the code from my user description area - if you don't know what you are doing, please don't attempt it, I'd hate to see you land up in a mess NOTE 3: This stylesheet does NOT validate with W3C - I preferred the approach of adding browser specific attributes and gracefully recovering if they are not supported -Arjun Roychowdhury ==================================================== */ /* ----------------------------------- */ /* To take care of border-box compatibility issue b/w IE and FF */ * { -moz-box-sizing: border-box; } /* -------------------------------------------- General Styles -------------------------------------------- */ /* This is what I call the 'mothership' style changer. It effectively nullifies any styles default pbase may use. Subsequent styles then refine each parameter */ div,th,tr,table,li,ul,form, blockquote,p,b,i,h4,h5,center,title { border: 0px; color: rgb(140,140,140); font: 11px verdana, arial, sans-serif; } font { display: block; font: 11px Verdana, Tahoma, Helvetica, sans-serif; letter-spacing: 0px; } a, a:link,a:visited,a:active { color: rgb(26, 26, 26); text-decoration: none; } a:hover { color: rgb(215, 215, 215); text-decoration: none; } .location { font: 11px Verdana, Tahoma, Helvetica, sans-serif; color:rgb(128,128,128); font-weight:bold; } .theme { font: 11px Verdana, Tahoma, Helvetica, sans-serif; color:rgb(0,64,128); font-weight:bold; } .artist { font: 9px Verdana, Tahoma, Helvetica, sans-serif; color:rgb(150,150,150); } /* -------------------------------------------- Thumbnail Styles -------------------------------------------- */ /* This is to ensure that long texts in thumbnails are wrapped around. Different browsers do it differently */ td.thumbnail font { white-space: -moz-pre-wrap; /* Mozilla*/ white-space: -pre-wrap; /* Opera 4 - 6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: pre-wrap; /* CSS3 */ word-wrap: break-word; /* IE 5.5+ */ } td.thumbnail { padding: 2px; height: 207px; /* dont forget to add width here else text wrapping in mozilla will not work - since this is the parent class */ width: 172px; } a.thumbnail, a.thumbnail:link, a.thumbnail:visited, a.thumbnail:active { border: rgb(255,255,255) 1px solid; margin-bottom: -40px; padding-top: 5px; width: 172px; display: block; height: 197px; -moz-border-radius-bottomright: 10px; -moz-border-radius-topleft: 10px; } a.thumbnail:hover { border: rgb(255,255,255) 1px solid; } table.thumbnail { width: 10%; } /* -------------------------------------------- Image Styles -------------------------------------------- */ img { border: rgb(235, 235, 235) 1px none; } img.thumbnail { vertical-align: middle; display:block; } /* -------------------------------------------- The main 'Body' -------------------------------------------- */ body { padding-bottom: 10px; margin-bottom: 20px; margin-top: 20px; background: rgb(255, 255, 255) url(http://imageurl.com/image.jpg) bottom right no-repeat fixed; } /* -------------------------------------------- Comments -------------------------------------------- */ #commentlist .message_body { font-family: verdana, arial, sans-serif; color: rgb(85, 85, 85); font-size: 11px; background: rgb(220,220,220); padding-top:10px; padding-bottom:10px; padding-left:5px; padding-right:5px; text-align: justify; } /* -------------------------------------------- Heading Styles -------------------------------------------- */ h1, h2 { border: rgb(95, 121, 216) 1px; border-left: 1px none; border-right: 1px none; border-top: 1px none; margin-bottom: 1em; margin-left: -10px; margin-right: 0px; padding: 5px; width: 100%; display: block; /* for non IE browsers, lets select a good background since the gradient filter will not work there */ background: rgb(202,202, 202); color: rgb(85, 85, 85); font-size: 18px; font-weight: bold; letter-spacing: 4px; text-align: right; height: 21px; position: relative; /* IE specific */ filter: progid:DXImageTransform.Microsoft.gradient (gradientType=1,enabled='true',startColorstr ='#AFAFAF',endColorstr='#FFFFFF'); } h3 { color: black; font-size: 12px; font-weight: normal; letter-spacing: 0px; text-align: center; } h4 { color: rgb(37,37,37); font-size: 14px; font-weight: bold; letter-spacing: 0px; text-align: center; } h5 { padding-left: 2px; width: 150px; display: block; color: rgb(180, 180, 180); font-size: 12px; font-weight: normal; } /* -------------------------------------------- Other Misc. Styles -------------------------------------------- */ .display /* border around image in image page */ { border: rgb(255,255,255) 1px solid; margin-top: 1em; background: rgb(0, 0, 0); } .lid /* full exif table */ { background: rgb(200, 200, 200); color: rgb(102, 102, 102); font: 10px Verdana, Tahoma, Helvetica, sans-serif; text-decoration: none; } .sb { background: rgb(91, 91, 101); color: rgb(180, 180, 180); font: 12px Verdana, Tahoma, Helvetica, sans-serif; text-decoration: none; }