CSS tips for the Kwik-n-free CSS template - Wednesday, March 10, 2010

Warning: include(../template/related-pages.inc) [function.include]: failed to open stream: No such file or directory in /home/knf/public_html/web-design/tips/css-tips.php on line 51

Warning: include() [function.include]: Failed opening '../template/related-pages.inc' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/knf/public_html/web-design/tips/css-tips.php on line 51

Here are some tips I digested while making a "mostly table-free" CSS template

CSS rules sometimes need to be repeated.

Apparently, for example, all <h> text is normally a "display:block" element, with "font-size" and "font-weight" determined differently by different browsers. Therefore, if you specify "display:inline" for an <h> text, then you may need to specify both the "font-size" and "font-weight" for wherever the <h> text may be used.

For example, in my CSS you may find something like this:

h4 {display:inline; font-weight:bold; margin: 0em .5em}
.text2, .text2 h4 {font-size:small;}
.text 3, .text3 h4 {font-size:medium;}
.notice, .notice h4, .text3 .notice h4
{font-size:x-small;}

(And a similar rigamorole seems needed for various situations. I am not sure why this happens. Hopefully it is only necessary to recognize the problem.)

Extra commas in the CSS can upset the Mozilla browser.

When listing several categories for the same CSS rule in a style sheet, they are separated by commas. Be sure not to leave an extra comma after the last category. This may not affect Explorer, but Mozilla may refuse to read the rule.

I am using the "Tan Hack" to correct IE box margin errors in the side menus.

I would say that the "Tan Hack" is the second best method of solving the IE box model problem. I use it because it is clear, simple, and plenty good enough for me. If you want to build more complex web pages, then the very best method is the "MS Proprietary Code Hack". Click here for more details on Box Model Hacks.

"List-style-position: inside" needed for "ul."

You can find this CSS rule on my style sheet. This helps the item marker for "unordered lists" to display in a similar position in most browsers. The margins for the "li" text then can be adjusted as desired. Further refinement can be achieved using the "Tan Hack" or MS proprietary codes.

After finishing your design, it is best to check the view in the second-latest IE browser series as well as the latest.

For example, if IE-6 is the latest IE series, then after your design is finished, check the view with an IE-5. The design need not look perfect in an older browser. However, you may find that some slight adjustments can help considerably. Also of course, always check the view in the latest Mozilla browser.

Unwanted backgrounds "might" appear between certain <div> areas.

This is because, to unify the background motif in the side margins and the top of the page, I might have set that motif as the default for the entire page. To avoid this background from appearing where it is not wanted, it is necessary to have zero or negative margin values for certain <div> areas. (Sometimes, a quick solution is to add an extra break <br /> tag in place of a top or bottom margin.)

A "double <div>" can help to place images in the upper right corner.

Notice that I have two small icon links for "W3.org Validation" on the upper right of the Kwik-n-free CSS template index page. It was tricky to get these to stay in place in the Explorer browser. The solution was two <div> wrappers, both styled as "float:right". I suggest that you study the source code if you ever have a similar need. (Another method, if such an image location is desired for every page of a site, is to create a separate <td> section in the "sideleft.htm" include file. If so, the "colspan=2" for the first <td> must of course be removed.)

Don't forget W3.org CSS & HTML markup validation.

Use these official CSS & "HTML markup" validators each time you make changes. Sometimes several errors can be caused by one error, or the error is not pinpointed correctly. For example, an open tag can be assumed closed by a later tag, etc. Usually however the notices are clear and helpful. Do not be overly concerned about "warnings" for the CSS. If it passes, it passes.

Warning: include(../template/related-pages.inc) [function.include]: failed to open stream: No such file or directory in /home/knf/public_html/web-design/tips/css-tips.php on line 107

Warning: include() [function.include]: Failed opening '../template/related-pages.inc' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/knf/public_html/web-design/tips/css-tips.php on line 107

CSS tips for the Kwik-n-free CSS template A few CSS tips used in making the Kwik-n-free CSS template. Wednesday, March 10. Last edited: 2008.01.12
Kwik-n-free tips & information ~Home~ wik-n-free web site design & construction help - Main Page - wik-n-free interactive web page template wik-n-free HTML, PHP & CSS tutorials wik-n-free web design software reviews wik-n-free advanced tips for web page construction web design links directory contact me: Warning: include(../template/related-pages.inc) [function.include]: failed to open stream: No such file or directory in /home/knf/public_html/web-design/tips/css-tips.php on line 51 Warning: include() [function.include]: Failed opening '../template/related-pages.inc' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/knf/public_html/web-design/tips/css-tips.php on line 51 Here are some tips I digested while making a "mostly table-free" CSS template CSS rules sometimes need to be repeated. Apparently, for example, all <h> text is normally a "display:block" element, with "font-size" and "font-weight" determined differently by different browsers. Therefore, if you specify "display:inline" for an <h> text, then you may need to specify both the "font-size" and "font-weight" for wherever the <h> text may be used. For example, in my CSS you may find something like this: h4 {display:inline; font-weight:bold; margin: 0em .5em} .text2, .text2 h4 {font-size:small;} .text 3, .text3 h4 {font-size:medium;} .notice, .notice h4, .text3 .notice h4 {font-size:x-small;} (And a similar rigamorole seems needed for various situations. I am not sure why this happens. Hopefully it is only necessary to recognize the problem.) Extra commas in the CSS can upset the Mozilla browser. When listing several categories for the same CSS rule in a style sheet, they are separated by commas. Be sure not to leave an extra comma after the last category. This may not affect Explorer, but Mozilla may refuse to read the rule. I am using the "Tan Hack" to correct IE box margin errors in the side menus. I would say that the "Tan Hack" is the second best method of solving the IE box model problem. I use it because it is clear, simple, and plenty good enough for me. If you want to build more complex web pages, then the very best method is the "MS Proprietary Code Hack". Click here for more details on Box Model Hacks. "List-style-position: inside" needed for "ul." You can find this CSS rule on my style sheet. This helps the item marker for "unordered lists" to display in a similar position in most browsers. The margins for the "li" text then can be adjusted as desired. Further refinement can be achieved using the "Tan Hack" or MS proprietary codes. After finishing your design, it is best to check the view in the second-latest IE browser series as well as the latest. For example, if IE-6 is the latest IE series, then after your design is finished, check the view with an IE-5. The design need not look perfect in an older browser. However, you may find that some slight adjustments can help considerably. Also of course, always check the view in the latest Mozilla browser. Unwanted backgrounds "might" appear between certain <div> areas. This is because, to unify the background motif in the side margins and the top of the page, I might have set that motif as the default for the entire page. To avoid this background from appearing where it is not wanted, it is necessary to have zero or negative margin values for certain <div> areas. (Sometimes, a quick solution is to add an extra break <br /> tag in place of a top or bottom margin.) A "double <div>" can help to place images in the upper right corner. Notice that I have two small icon links for "W3.org Validation" on the upper right of the Kwik-n-free CSS template index page. It was tricky to get these to stay in place in the Explorer browser. The solution was two <div> wrappers, both styled as "float:right". I suggest that you study the source code if you ever have a similar need. (Another method, if such an image location is desired for every page of a site, is to create a separate <td> section in the "sideleft.htm" include file. If so, the "colspan=2" for the first <td> must of course be removed.) Don't forget W3.org CSS & HTML markup validation. Use these official CSS & "HTML markup" validators each time you make changes. Sometimes several errors can be caused by one error, or the error is not pinpointed correctly. For example, an open tag can be assumed closed by a later tag, etc. Usually however the notices are clear and helpful. Do not be overly concerned about "warnings" for the CSS. If it passes, it passes. W3.org HTML validation W3.org CSS validation Warning: include(../template/related-pages.inc) [function.include]: failed to open stream: No such file or directory in /home/knf/public_html/web-design/tips/css-tips.php on line 107 Warning: include() [function.include]: Failed opening '../template/related-pages.inc' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/knf/public_html/web-design/tips/css-tips.php on line 107	New windows for offsite links Apache.org web server Aprelium.com web server PHP.net Kwik-n-Free Web Design W3.org CSS Reference