CSS Cascading Style Sheets
Formatting Tips, Workarounds, Reference Record & Examples
"A CONTINUING WORK IN PROGRESS"
Last update 8-25-14
Last update 8-25-14
Table of Contents:
Resources
Reset Browser Default Page Settings
Nav Menus
The new CSS3 elements
Also more CSS articles in separate post pages:
Inline Block
Line Height
Browser Reset
RESOURCES:
-Color Chart (name & HEX): w3schools.com
-WebSafe Font Examples: www.webdesigndev.com
-CSS Library (Menu's, buttons, layouts etc: www.dynamicdrive.com.
-WYSIWYG Online Editor for code snippet tweaking: w3schools try it editor.
PIXELS:
px does not cascade. Pretty close across browsers.
FONTS:
VERTICAL ALIGN:
Also see Inline-Block page.
vertical-align (only if "float" is "none")
DOCTYPE:
adding in a DOCTYPE helps remedy IE issues.
In IE there must be declared a <!DOCTYPE> for the :hover selector to work on other elements than the <a> element." http://www.w3schools.com/cssref/sel_hover.asp
Display VS Visibility - Hiding an Element:
* 1) display: none 2) visibility: hidden...each produce different results.
* visibility:hidden (css2)(IE4+) hides an element, but the placeholder remains in layout.
* display:none (css1)(IE8+) pretends to remove the element completely, like it was never there in layout, but still exits in the code.
Overflow:
* overflow:hidden (css2)(IE4+) determins what happens if content overflows an element's box.
* visible:not clipped. hidden:clipped. scroll or auto:adds scroll bar.
Max Height:
* max-height (css2)(IE7+) overrides height.
* Prevents the value of height from becoming larger than max-height.
* default:none. not inherited. cross browser IE7+.
onHover vs onClick:
* Choose hover or target for onclick function
*onClick Example:
ul.subMenu {max-height: 0; overflow: hidden;}
+ ul.mainMenu li:target ul.subMenu {max-height: 200px;}
*onHover Example:
ul.subMenu {display:none;}
+ ul.mainMenu li:hover ul.subMenu {display:block;}
BROWSER PAGE LOADING:
-IE first loads the content and then has to calculate the correct width for the contents, which may slow down page loading. Set fixed widths vs fluid.
TABLES:
Internet Explorer is known to be slow with rendering large HTML tables. Helpful Remedy Tips:
-Set the table-layout CSS attribute to fixed on the table.
-Explicitly define col objects for each column.
-Set the WIDTH attribute on each col.
Try to make the content within the tables less complex, i.e. set fixed width and don't have too much dynamic rendering action going on.
IE first loads the content and then has to calculate the correct width for the contents == slow.
NAVIGATION MENU'S
Pure CSS Menu's:
-Simple Horizontal Down Down at code-tricks.com
-Vertical Beveled Edge Menu at dynamicdrive.com
Menu's with JavaScript:
XXX
ISSUES ENCOUNTERED WITH INLINE BLOCK NAV:
*Issue: Submenu not showing up on mainMenu hover.
CAUSE and SOLUTION: Remove overflow: hidden in global
*Issue: Submenu disappearing or unstable, making it difficult to click.
CAUSE: Gap between menu and submenu, where mouse pointer falls thus looses focus and sub become hidden. This is an inline-block mainmenu with a block dropdown that requires absolute positioning...causing the gap due to browser differences.
NOTE: Original submenu code uses 'submenu container top margin' (mine 38px) to manually move submenu down below parent mainmenu (adjust if mainmenu padding changes). Since this is not a float layout, the exact absolute position via top margin has to be defined, which spacing differs between browsers. 32px perfect in Chrome, underneath mainmenu in IE. 38 too much gap for both. 35 perfect for IE but still too much gap for chrome. 32 works, but 30 assures cross browser allowance.
MY SOLUTION: Remove the gap by just aligning top of submenu with top of mainmenu. Now the submenu container will be ontop of mainmenu thus no chance of gap in any browser. But this looses mainmenu hover color so must add top margin to submenu container. Set submenu container top margin half of the height of mainmenu container. Add a small 5px submenu container top margin to slightly expose the top of the mainmenu to prevent possible hover issues. Must make the submenu container transparent and use top padding to bring the links below the mainmenu.
NEW NOTE: Resetting the browser via body seemed to have removed the varying gap differences between mainMenu and subMenu in IE and Chrome
Horizontal Nav Bar:
Horz float example: w3schools.com
Two methods to create a horizontal navigation bar list items. Both methods work fine, but use float if you want the links to be the same size.
1) inline: links have different widths...... (li display: inline)
-li elements are default block elements,
-Remove line breaks before/after each li to display on one line
2) float : links are the same size..............(li float: left)
-Float to get block elements to slide next to each other
-And specify a width for the (a) elements: ........(a display: block/ width: 60px)
-Display links as block elements makes the whole link area clickable not just the text), and it allows us to specify the width
-Width Required: block elements have 100% default width, so cannot naturally float beside each other.
Vertical Nav Bar:
Vert Example: w3schools.com
Only need to style the (a) elements with default of inline horizontal display
1) change to block for vertical display
2) and specify a width (display: block; width: 60px;)
onClick Pure CSS Menu vs hover menu
not reliable...don't use...http://koen.kivits.com/articles/pure-css-menu/
THE HOVER SELECTOR:
http://www.w3schools.com/cssref/sel_hover.asp
Hover MUST come after :link and :visited (if they are present) in the CSS definition, in order to be effective!
a:link { color: green;} /* unvisited link */
a:visited {color: green;} /* visited link */
a:hover {color: red;} /* mouse over link */
a:active {color: yellow;} /* selected link */
BASIC LINK EFFECTS ON HOVER - The hover pseudo-class
http://www.cssplay.co.uk/menus/hovercraft.html
a.link_one {color:#fff; background:#00d; text-decoration:none;}
white text on a blue background (:link)
a.link_one:visited {color:#fff; background:#080;}
click off the text (IE) or release the mouse button (FF, Opera, Safari etc)
and it changes to white text on a green background (:visited).
a.link_one:hover {color:#fff; background:#c00;}
white text on a red background (:hover)
a.link_one:active {color:#000; background:#cc0;}
click it and it turns to black text on a yellow background (:active)
Combine links to look exactly the same in all states
a.link_two, a.link_two:visited, a.link_two:active {...}
BASIC HOVER ON VERTICAL MENU
<!DOCTYPE html>
<html>
<style>
ul.list_two {
list-style-type:none; /* remove the bullets */
margin:0; /* remove the automatic margin that some
browsers use for the text-indent. */
padding:0; /* remove the automatic padding that other
browsers use for the text-indent. */
width:150px; /* fix the width of the list items which
would default to 100% */
}
ul.list_two a, ul.list_two a:visited, ul.list_two a:active {
text-decoration:none; /* remove the default underline from
the links */
display:block; /* make each link into a block so that
hovering over any area of the link
will cause a change of background color */
width:150px; /*set the width to be the same as the ul width */
text-indent:5px; /* move the link text 5px to the right */
background:#c00; /* make the background color red */
color:#fff; /* make the text color white */
border-bottom:1px solid #fff; /* separate the links with a 1px
wide white line */
}
ul.list_two a:hover {
background:#00c; /* change the background to blue on :hover */
}
</style>
<body>
<ul class="list_two">
<li><a href="#nogo1">List Item 1</a></li>
<li><a href="#nogo2">List Item 2</a></li>
<li><a href="#nogo3">List Item 3</a></li>
<li><a href="#nogo4">List Item 4</a></li>
<li><a href="#nogo5">List Item 5</a></li>
</ul>
</body>
</html>
In IE there must be declared a <!DOCTYPE> for the :hover selector to work on other elements than the <a> element." http://www.w3schools.com/cssref/sel_hover.asp. But it appears that it only works for IE7+. Anything IE6 and below doesn't recognize the CSS :hover pseudo-attribute, when it appears on anything other than a link element. I've read you can put an achor link over a whole element like a div, a list element or span to get rid of some problems regarding hovers. If that's not possible, then its JavaScript or the a links.
Solution 1: Apply the :hover only to <a> links.
Solution2: IE Hover Fix - Span
It is a known IE issue and can be solved the same way, add a default rule for the :hover state of the link, then the :hover span should work. e.g. #testLink:hover {text-indent: 0;}
#testLink { color:#f00; }
#testLink span { display:none;}
#testLink:hover span
{ display:block; position:relative; top:0px; left:0px; background-color:#0f0; width:100%; text-indent: 0; }
Solution 3: IE Hover Fix - Javascript
You will have to use JavaScript for this. See this site for Peter Nederlof's script and detailed instructions as well as a good explanation to IE hover issue:
IE Hover Fix - transparent background
To put it simply, elements with a transparent background are also "transparent" to mouse events in IE. If you use the pseudo class of :hover on an element that has a transparent background color, the hover is only triggered when the mouse is over a solid/nontransparent spot. If you hover over #content, only when the mouse is over 'wtf' or 'hrm' will the overflow content be visible. if you hover BETWEEN the words 'wtf' and 'hrm', youd expect that the hover styles would be applied too because that is part of #content but youd be wrong.
Solution: To fix this you can either apply a background color or image to #content. A forum member said he used rgba(0,0,0,0.0001), it worked just fine and is as close to invisible as you can get if you are forced to apply a color. It's possible though, it has IE version limitations as well?
THE NEW CSS3 ELEMENTS
CSS3 INFORMATION
http://www.w3schools.com/css/css3_intro.asp
-CSS3 is the latest standard for CSS.
-CSS3 is completely backwards-compatible with earlier versions of CSS.
-The CSS3 specification is still under development by W3C. However, many of the new CSS3 properties have been implemented in modern browsers.
-CSS3 has been split into "modules". It contains the "old CSS specification" (which has been split into smaller pieces).
-In addition, new modules are added. Some of the most important CSS3 modules are:
Selectors
Box Model
Backgrounds and Borders
Image Values and Replaced Content
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface
---------------------------
CSS3 Border Properties
border-image A shorthand property for setting all the border-image-* properties
border-radius A shorthand property for setting all the four border-*-radius properties
box-shadow Attaches one or more drop-shadows to the box
CSS3 The border-radius Property - Rounded Corners
Adding rounded corners in CSS2 was tricky. We had to use different images for each corner. In CSS3, creating rounded corners is easy. The border-radius property is used to create rounded corners:
div {
border: 2px solid;
border-radius: 25px;
}
CSS3 The box-shadow Property
In CSS3, the box-shadow property is used to add shadow to boxes:
div {
box-shadow: 10px 10px 5px #888888;
}
CSS3 The border-image Property
With the CSS3 border-image property you can use an image to create a border:
The border-image property allows you to specify an image as a border!
div {
-webkit-border-image: url(border.png) 30 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 30 round;
}
---------------------------
No comments:
Post a Comment