This indicates mandatory fields that must be filled-in.
H="3col.css"
html, body {height: 100%; width: 100%; margin: 0; padding: 0; border: 0;}
.thetable {
position: relative;
display: table;
width: 100%;
margin: 0;
padding: 0;
border: 0;
clear: both;
border-spacing: 0; /* required by Opera 6 */
}
/* hide this from opera6 */
head:first-child+body div.thetable {height: 100%;}
.tablerow {display: table-row;}
.tablecell {
display: table-cell;
border: 0;
padding: 0;
margin: 0;
padding-top: 100px;
padding-bottom: 50px;
vertical-align: top;
min-height: 100%; /* opera6 needs min-height but moz/IE needs height */
}
/* hide this from opera6 */
head:first-child+body div.tablecell {height: 100%;}
/* added for mozilla which worked for others too, but op6 still needed min-height so hide this rule */
.one {
width: 180px;
background: violet;
position: relative;
border-right: 1px dotted #000;
z-index: 5;
}
.two {
width: auto;
background: yellow;
position: relative;
}
.three {
width: 200px;
background: lime;
position: relative;
border-left: 1px dotted #000;
}
#header {
position: absolute;
top: 0; left: 0;
height: 100px;
background: #000080;
color: #fff;
width: 100%;
z-index: 10;
border-bottom: 2px dotted lime;
}
#footer {
clear: both;
position: relative;
height: 40px;
background: #000080;
color: white;
margin-top: -40px;
margin-bottom: 40px; /* required for Opera 6 to show background color but others don't like it so hide the value of 0 from it */
z-index: 15;
}
/* hide this from opera6 */
head:first-child+body div#footer {margin-bottom: 0;}
/* some general formatting styles */
body {font-size: 0.8em; font-family: verdana, tahoma, arial, sans-serif;}
a:link, a:visited {
color: #fff;
background: transparent;
text-decoration: underline;
}
a:hover {
color: lime;
background: transparent;
}
.thetable a:link, .thetable a:visited {
color: #009;
background: transparent;
text-decoration: underline;
}
.thetable a:hover {
color: #f00;
background: transparent;
}
p {padding: 0.5em 1em 0 1em; margin: 0;}
ul {padding-right: 0.5em;}
/* removing margins from headings corrects an Opera 6 display error */
h1, h2, h3 {font-family: georgia; padding: 0.5em 2em; margin: 0;}
h1 {font-size: 1.2em;}
h2 {font-size: 1.1em;}
h3 {font-size: 1em;}
H="3colnew.css"
/* */
H="3column css.htm"
3-col layout via CSS
3-col layout via CSS
No tables, no absolute positioning (no positioning at all), no hacks(!), same height of all columns.
The left and right columns have fixed width (150px), the middle one is elastic. Any (zero or non-zero) margin of the body may be used.
It works (AFAIK) in any modern browser - I tested it in IE5/Win95, IE6/WinXP, Opera7/WinXP, IE5/Mac, Mozilla, Safari, and Camino.
It won't work in old browsers poorly supporting CSS (like NN4, IE4 etc).
H="another fixed article"
position:fixed fixed for IE/win
[toc]
Abstract
This is a hack to emulate the CSS 2 positioning scheme position:fixed for Internet Explorer on windows without active scripting (including dynamic properties, behaviors and whatnot).
Contents
* Traceroute
* Version 6 only
* >= version 5
* Rationale
* Related
* Acknowledgements
Traceroute
On 2002-02-05 someone dumped a query regarding fixed document content in the dutch news group nl.internet.www.ontwerp. The offered client side scripting solution by the local wizard was naturally bulletproof as usual but looked quite hairy to me as a replacement for one unsupported CSS property. In return, I came up with a simple overnight CSS-only mock-up for IE6/win (Note: the referenced URI became a victim of link rot, but — for the better or worse — Google kindly returns a mirror by Rijk van Geijtenbeek).
A short time later, this became quite popular in the course of an mxvision feature. Since the interest flux didn’t drop, I added some improvements in terms of stability, and finally support for IE5+/win — but not before having witnessed that the enemy doesn’ sleep either (you may take that literally, as this helpful answer on a request for clues reveals, and it should sufficiently explain what a hack attack really is).
Faking position:fixed for Windows Internet Explorer 6
Generic
Simply moving the scroll mechanism from the root element to the document body
html
{
overflow: hidden;
}
body
{
height: 100%;
overflow: auto;
}
will cause absolutely positioned ascendants of the body element to be fixed in respect to the viewport. There are a couple of disadvantages envolved:
* in order to work, it requires IE6 to be in standards-compliant mode (know your oxymorons); authors haven’t got the last word on that because client side ad blockers, security manglers and the likes can incidentally trigger quirks mode by local modification of the document source
* it makes it impossible to use position:absolute in its intended way
* in a complex setup the scrollbars could get partly hidden or completely inaccessible; this technique should only be applied for simple fixed boxes, preferably using overflow-y instead of overflow
On the upside,
* it doesn’t require redundant markup in the related document instance (you could, for example, not even have write permissions, or simply care about ‘clean’ markup).
* it leaves the initial document focus for mouse wheel or keyboard scrolling in tact.
Complete cruft-free demo:
1. fixed box for IE6/win
Faking position:fixed for Windows Internet Explorer >= 5
Generic
The reason that the former approach doesn’t work in versions prior to 6 is lacking CSS support for the root element. There is, however, a trivial workaround: create a dummy element that serves as the document body and move the relevant properties one node down.
body
{
overflow: hidden;
}
div.content
{
height: 100%;
overflow: auto;
}
Absolutely positioned elements outside of div.content will be fixed in respect to the viewport, absolutely positioned elements inside of div.content will behave normally. This works in version 5.0 and higher of IE on windows and is the most stable solution available.
Complete cruft-free demos:
1. fixed vertical bar for IE >= 5
2. fixed horizontal bar for IE >= 5
Rationale
No user agent but Windows Internet Explorer must be exposed to any of the CSS rules relevant to the hack; I strongly recommend using conditional comments instead of exploiting parsing bugs to accomplish that.
Some older user agents that support position:fixed can’t handle it very well (e.g., IE5/Mac). For maximum bugwards compatibility you should consider to @import the offending rule sets and wrap them in an @media screen block — the latter also serves an important semantic function, and the media type screen should be explicitly specified for the IE/win style sheet as well:
.
Using @import in a style element to basically link a style sheet is somewhat ugly but compact; blindly spawning http connections with multiple linked, imported and conditional style sheets is not a good idea, especially since user agents commonly request all files associated with a document, regardless of whether or not they actually support the corresponding MIME or media types.
Related
* WD’s topbox [0], 1 and 2
* Richard Hulse: unfixing fixed elements
* Fabrice Pascal’s Position:fixed
* Michael Jendryschik: Die richtige Anwendung von ‘position:fixed’
Acknowledgements
Thanks for contributions, head-ups and inspiration to ‘Warden Dave’, Tim Rivera, Richard Hulse, Marcin Sokolowski, Barbara de Zoete and especially everybody I forgot to mention.
* last modified 2004-04-05
* last updated 2004-04-04
This tagsoup recipe 2002–2004 Eric Bednarz
H="another fixed horizontal"
Demo: fixed horizontal bar for IE>=5
The quick brown fox would like to jump over some lazy dogs but is stuck in this box.
H="buttons.css"
The Style Sheets are easy to code, within Dreamweaver, TopStyle, or manually. Here are the rules contained in buttons.css:
buttons.css
.button { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #666666; background-color: #F4DB9F; border: #666666; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; width: 80px}
.buttonover { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; background-color: #99CC99; width: 80px; border: #666666; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px }
Note: MSIE4.5 and 5.0 have minor rendering bugs... possibly because of Operating System issues. If you need to support these browsers fully, simply remove the Width settings (width: 120px) from both classes in the buttons.css file.
H="buttons2.css"
.formbox1
{ border: #CC0000 1px solid; font-size: 12px; color: #000000; font-weight: normal; font-family: arial; background-color: #EEEEEE; text-decoration: none;
}
.formbox2
{ border: #CC0000 1px solid; font-size: 12px; color: #000000; font-weight: normal; font-family: arial; background-color: #FFFFFF; text-decoration: none;
}
.button
{ border: font-size: 11px; color: #FFFFFF; font-weight: normal; font-family: arial; background-color: #CC0000; text-decoration: none;
}
Then in your html, you would have
H="buttons-good.htm"
Home The More Zone Here
Noteworthy CSS effects for NS6+/Mozilla 0.92 forms
Netscape 6 may not be catching on yet, but when it comes to support for CSS, it's sure has caught up with IE. Tuxracer (a Dynamic Drive surfer) demonstrates this by showing several interesting CSS effects for forms, applicable in NS6+ and Mozilla 0.92+ only. Eat your hearts out IE users (hay, that includes us)!
-Puesdo class form:focus
-Puesdo class form:hover
-Attribute: -moz-border-radius
Case 1: Use the CSS2 puedo class :focus to dynamically color the form element currently in focus:
Source:
Demo: Click on the various form elements:
Case 2: Use the CSS2 puedo class :hover on form buttons to dynamically color them onMouseover:
Source:
Demo: Move your mouse over the form buttons
Case 3: Give form buttons round edges!
Source:
Demo:
Recommend Us!
H="buttonshover.html"
---------------------------------------
thi is a ButtonButton
I put the active pseudoclass after the hover pseudoclass to prevent the hover pseodoclass from overriding it.
H="buttonshover2.html"
---------------------------------------
this is a ButtonButton
I put the active pseudoclass after the hover pseudoclass to prevent the hover pseodoclass from overriding it.
H="buttontry.htm"
H="BuyIt.htm"
Buy BizShop CD Access
Buy BizShop CD Access
For faster access to the publications on this CD, or to get the print products more quickly, we recommend you pay online at our website. You can also call in your order at 1-800-949-8029. If you leave a message, please let us know when a good time to call is so we can get you access as quickly as possible.
