Archive for the ‘CSS’ Category

Aug 08

Width100A design may call for the header or footer to span 100% width of a page, but the body of a design spread to a set width. Easily implement this by extracting the 100% width item from your main container div.

HTML:
  1. <div id=”header”>
  2.    My header spans 100% of the window.
  3. </div>
  4. <div id=”container”>
  5.    This container has a set width: 60% of the window.
  6. </div>
  7. <div id=”footer”>
  8.    My footer spans 100% of the window.
  9. </div>

CSS:
  1. body{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. #header, #footer{
  6.     background-color: #ccc;
  7.     color: #000;
  8.     padding: 1em 0 1em 0;
  9.     text-align: center;
  10.     width: 100%;
  11. }
  12. #container{
  13.     margin: 0 auto; /* this centers the div on the window */
  14.     width: 60%;
  15. }

Easy as sliced cake!

Jul 31

Otherwise titled, "Multiple background images + the bane that is IE6". This explanation is in reference to my July 2007 CSS Off code.

This is how it’s supposed to beIn coding the design for the Early Bird h1 overlay, I implemented two overlapping background images: the pretty bird, and a horizontal grey bar.

CSS:
  1. /* Code for the horizontal grey bar */
  2. #login{
  3.     background: #F7F7F7 url(../images/bg-header.gif) repeat-x 0 bottom;
  4.     color: inherit;
  5.     margin: 0;
  6.     padding:  10px;
  7.     text-align: right;
  8. }
  9. #login span{
  10.     display: block;
  11.     margin0 auto;
  12.     width:  900px;
  13. }
  14.  
  15.  
  16. /* Code for pretty, pretty birdie */
  17. #header h1{
  18.     background: url(../images/logo.gif) no-repeat left top;
  19.     height: 189px;
  20.     margin:  -26px 0 0 0;
  21.     padding: 0;
  22. }

IE6 Hates MeWhether I ought to have made it a CSS background-image or an HTML img is irrelevant at this point, as I found an annoying IE6 bug regarding multiple seemingly unrelated CSS background-images.

The bird background-image was hidden by the horizontal top bar. To resolve this, I used IE6 filters to hide the HTML img and display CSS background-image for modern browsers, but to display the HTML img in the case of IE6.

HTML:
  1. <p id="login">
  2.     <a class="s508" href="#primary-content">Skip to Primary Content</a>
  3.     <span><a href="http://www.apple.com">Log in</a> or <a href="#">Register</a></span>
  4. </p>
  5.  
  6. <div id="header">
  7.     <h1>
  8.         <img src="assets/images/logo.gif" alt="Early Bird WormSearch">
  9.     </h1>
  10.         <form action="index.html" method="get" class="search">
  11.             <input name="search1" alt="Search" type="text">
  12.             <button class="search">Search <img src="assets/images/white-right-arrow.gif" alt=""></button>
  13.         </form>
  14. </div>

CSS:
  1. #header h1 img{
  2.     display: none;
  3. }
  4. * html #header h1{
  5.     background: none;
  6.     position: relative;
  7.     margin: 0px 0 0 0;
  8. }
  9. * html #header h1 img{
  10.     display: block;
  11.     position: absolute;
  12.     margin: -26px 0 0 0;
  13. }

Why does IE6 present the background-image overlap issue? The Early Bird h1 required position:relative. Why? Because IE6 hates me with the fire of a thousand suns. If you discover a better reason, kindly let me know, as I find this animosity between IE6 and myself most unsettling.

Really, semantically, we should not be using a background-image if there was meaning associated with the image. I was torn in this case, as it really is subjective whether the item necessitates semantic meaning or not. The method I implemented in my example really displays how both methods can work: HTML img with the IE6 code, and background-image with modern browsers.

In conclusion: if your background-images are improperly overlapping in IE6, try adding a position declaration on the hidden element.

Jul 23

Often I'll see a design with the list copy font the same color, typeface, and size as the normal body font. The design will highlight the items of this list by colorizing the bullet of each list-item. Using some creative HTML and CSS, this is possible with only a few lines of CSS.

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
HTML:
  1.    <li><span>List Item 1</span></li>
  2.    <li><span>List Item 2</span></li>
  3.    <li><span>List Item 3</span></li>
  4.    <li><span>List Item 4</span></li>
  5. </ul>

CSS:
  1. li{
  2.    color: red;
  3. }
  4. li span{
  5.    color: black;
  6. }

The bullet follows the color of the list item (li), but unfortunately so does the text contained by the li. We get around this by wrapping the text in spans and setting the font color on the span. We get our desired effect without using a list-style-image and with minimal HTML markup additions.

If you find a better way, do share for the betterment of code.

Jul 15

July's CSS Off! design presented quite a few more challenges than June's entry.

View my Early Bird WormSearch entry. (Yes, I know one of the headings is black. I would blame it on color-blindness, but it's a lie. It was just an oversight - I genuinely did not see it until posting today. Arg, I thought I had a fighting chance this time.)

For now, I am going to explain the semantics importance of utilizing HTML images versus CSS background-image.

Example 1:
Related Certain related worms feature a marker tag labeled "related" to the left of each related worm, as pictured here. Non-related worms lack such a marker tag. I initially coded this marker tag addition as a background image of a div.
View my initial markup of a normal bug versus related bug:

HTML:
  1. <!-- Normal Bug -->
  2.     <div class="bug">
  3.         <img src="assets/images/thumbs_03.jpg" alt="Earthworm" />
  4.         <h4><a href="#">Earthworm</a></h4>
  5.         <p class="tease">Earthworms Copy... [<a href="#">more</a>]</p>
  6.         <p class="meta">
  7.         <span class="timestamp">By 5:15 am</span> <span class="tags">Find Similar Worms by <a href="#">Region</a>, <a href="#">Season</a>, <a href="#">Flavor</a>, <a href="#">Size</a></span>
  8.         </p>
  9.     </div>
  10.  
  11. <!-- Related Bug -->
  12.     <div class="related bug">
  13.         <img src="assets/images/thumbs_07.jpg" alt="Earthworms High in Nutrition" />
  14.         <h4><a href="#">Earthworms High in Nutrition</a></h4>
  15.     <p class="tease">Earthworms Copy... [<a href="#">more</a>]</p>
  16.         <p class="meta">
  17.         <span class="timestamp">By 5:15 am</span> <span class="tags">Find Similar Worms by <a href="#">Region</a>, <a href="#">Season</a>, <a href="#">Flavor</a>, <a href="#">Size</a></span>
  18.         </p>
  19.     </div>

Note that the only thing really differentiating the two is the additional class "related" on the div. Initially, I applied a background image of the related marker on the .related.bug div. Now, suppose a user has CSS disabled: what meaning will they receive? For CSS disabled browsers, related bugs will be indistinguishable from normal bugs. This is terrible for accessibility - no bugs are related and an entire section of your site (and your effort coding) will now be overlooked.

I thus altered my copy to include an HTML image of the related marker, as follows:

HTML:
  1. <!-- Related Bug -->
  2.     <div class="related bug">
  3.         <img class="marker" src="assets/images/related.gif" alt="Related Bug" />
  4.         <img src="assets/images/thumbs_07.jpg" alt="Earthworms High in Nutrition" />
  5.         <h4><a href="#">Earthworms High in Nutrition</a></h4>
  6.     <p class="tease">Earthworms Copy... [<a href="#">more</a>]</p>
  7.         <p class="meta">
  8.         <span class="timestamp">By 5:15 am</span> <span class="tags">Find Similar Worms by <a href="#">Region</a>, <a href="#">Season</a>, <a href="#">Flavor</a>, <a href="#">Size</a></span>
  9.         </p>
  10.     </div>

This way, a browser with CSS disabled can still view the semantic meaning of the related bug. The markup for the image can be dished out on the server side when the page is requested.

Be friendly to people with different browsers - they may account for a greater percentage of your client base than you may realize!

Related articles to follow:

Jul 15

I have discovered an ideal CSS Editor, and it is available only for Mac OS X: CSSEdit 2.

I'm currently enthralled with the simplest of features: code highlighting, the "intelligent CodeSense" (intellisense) of my dreams, and a little IDE sidebar so I can select that property that I rarely use, or order my background properties properly without googling. In addition, it will combine multiple properties into one (for example, combine background-color and background-image to the background shorthand equivalent). This cuts down on the size of your CSS file, and saves your fingers from typing excessively.

I just completed my July CSS Off! competition entry (article to follow) and I kid you not, I easily wrote three times faster thanks to CSSEdit. I started tonight with the shareware 2500 character limited edition, but once my file grew over 2500 characters, I could not stand to lose the productivity in switching to Smultron (my other free editor of choice, sadly lacking codesense). I thus shelled out the $30 to support this fabulous application.

CSSEdit offers a milestones feature which allows you to "bookmark" a section of your stylesheet. I think we've all been in that place where, in trying to solve one problem, we have mangled our stylesheet beyond recognition. Nevermore! Milestones are your solution. CSSEdit also offers selector organization, preview, and validation.

Most importantly, CSSEdit adds a layer of WebKit/Safari debugging that I have long sought after in the "X-ray" feature. X-ray equates to a DOM inspector/"View Style Information" from the Firefox dev bar. This is fantastic as Safari lacks any decent debugging tool as of this writing.

I rarely purchase shareware unless it proves itself indispensable. CSSEdit has proven itself an invaluable asset in my web dev arsenal.

Jul 12

Behold! The time is nearly upon us! On Saturday the 14th, beginning at 12midnight CST (the midnight between Friday and Saturday), the second CSS Off! competition begins!

Let this be a reminder of the competition, so participate like me and we will learn new and exciting things about CSS and design. Last time was fun, and this time will be better.

Update: View my article on my July entry.

Jun 16

Congratulations to Dawid Lizak for winning the CSS Off competition of June. View his winning entry.

Gripes

Note: A lot of these gripes are directed to my own misunderstanding of the rules of this fairly new competition. If you disagree with any of my gripes, please, leave a comment.

Non-Semantic HTML

There are divs named "top", "topleft", etc. About half of the classes/ids are named semantically, and the others are describing style. The naming convention implemented is far from CSS best practices.

Copy Alterations

In the "Upcoming Events" section, Dawid has changed "August", "June", et cetera, to their three character abbreviation. The copy that we received in the Jabroni packet (included with the PSDs were text files of the copy) distinctly bore the month name fully spelled. Changing the month in the HTML is a cop-out. If the system feeds the page "August", and the design calls for "AUG", some sort of server-side or client-side processing must be taken. This ought to be clarified in future contests. If I can assume that "January" has been handled on the server-side, I would love to hard-code "JAN" into my page rather than write JavaScript to handle the text transform.

In like manner, there are various places where the HTML has uppercase lettering hard-coded rather than handled with CSS. The text document bore sentence capitalization. It's not fair to change this in the HTML unless we have specified that certain server-side text manipulation may be assumed. Conversely, it's simple to perform an uppercase text-transform with CSS, and I'm upset to see the lack of such a simple CSS implementation on the winning entry.

Missing Headings

Some of the heading tags are in improper order. An h5 tag is used underneath an h2 tag - tsk, tsk. This is a bear on the document outline and generally poor HTML practice. Some can be chalked up to semantics, but you should never jump multiple heading levels like that. You can find errors in your document outline by using the Web Developer's toolbar in Firefox: Miscellaneous > View Document Outline. If you are missing heading elements (as Lizak's entry is), this tool will reveal them to you.

Usage of b, small tags

I know they are technically valid, but really, are we ignoring best practices? And the "small" tag? Could we be any less semantic? Why don't we just write < font size="-1"> while we're at it?

Diversion from Original Design

I understand that some diversion is good if it improves upon the original design. This gripe is just a personal "Arg" because I was going to force my header to span the width of the browser window, like Dawid, but I looked again at the design and said, "No, that is not in the design," and refrained. Now I am wiser for future competitions.

Self-Critique

My entry did not validate. Why? Because I forgot to close my img tags a couple of times, and I forgot an alt attribute on one or two images. Arg! My CSS was valid, but not my HTML. I remember thinking immediately after I submitted the entry, "Doh! I forgot to validate my HTML!"; it must have been an oversight/tiredness from the short amount of time (only a few hours) that I had to build this.

I had not noticed my massive file size: 111kb. I wholly attribute this to my lack of proper image editing software.

Had my code validated, I am confident that I would have been one of the 6 semi-finalists. I should have abstracted my JavaScript. I'm relatively new to proper implementations of JavaScript and I see now the flaws in my JavaScript for cross-browser compatibility - namely, using getAttribute("class") rather than the .className property for IE compatibility. I also wonder if my lack of attention to fonts played a part in the disqualification. That's part of the frustration: when I'm coding a design in the workplace, I can ask the designer what typeface, what font size, what exact hex color.

So it goes.

Fortunately, I was one of 15 finalists (out of the 48 timely entries). View the finalists (I'm #10 in the list of chronologically ordered entries). Regardless of my place, I learned quite a few lessons in speed-coding.

Final Thoughts

I shouldn't gripe so much, as I neglected to close a few "img" tags, and had a minor cross-browser JavaScript quirk to learn about. I have also learned to spend more time in optimizing images for the web.

Sadly, I didn't really learn much from the winning entry except the interesting method of employing a two-toned header spanning the width of the browser window. It utilizes non-semantic divs, but we live in the real world, not an ideal one, which makes sparing use of non-semantic divs "acceptable".

It is a fabulous competition. With my learned lessons (from my stupid mistakes), perhaps I have a better chance of winning the next competition. Thanks to Tony and JD for their long hours judging despite loads of entrants' griping.