A real world example might be your website's template. Look at the code below that I stripped down to just the layout elements of a website's template:

For structural elements like all of the elements above, IDs should be used and not classes. Classes are best used for text related elements or really anything that you might use more than once on a webpage. IDs should be used for unique elements that will only appear once in the DOM. Also remember that classes can be combined while IDs cannot:

Using a HTML ID More Than Once

On the flip side NEVER use the ID attribute more than once. The reason for this is the ID attribute has other meanings within HTML such as:

• Referencing the element with JavaScript through the getElementById DOM method
• Making the element an anchor which can be linked to with a fragment identifier
• Associating a label element with a form control via the for attribute
• Specifying which header cell(s) that provide header information for a data cell via the headers attribute

Credit: this list was taken from Roger Johansson's website.

Overuse of Classes and IDs

Another problem I see, is web designers overusing classes and IDs. Consider the following:

Notice that the UL tag contains an ID? Unless it's being used by JavaScript or there is an anchor pointing to it there's really no reason to place the ID attribute on it. The element could be selected via CSS with .navBarTop #navBarTop ul which essentially renders the ID attribute useless. Don't litter your HTML with redundant attributes.

When Is the Best Time to Fix These Problems?

The best time to hunt down redundant attributes and incorrect usage of classes vs IDs is during the initial development of a website. Once the site has been in production for awhile it is harder to hunt down whether that ID tag is needed anymore or to have to update your template file and CSS file so that you are using IDs rather than classes.

View Comments [0]

Microsoft Employees Use Firefox/Safari

After viewing what pages the employees viewed, I then proceeded to see what sort of setup they were providing their employees over there at Redmond. To my surprise 7 visitors were using Firefox and 1 was using Safari. Safari? I asked myself with a puzzled look on my face.

Notice those 7 visits with Firefox, the competitor to Microsoft's Internet Explorer? Apparently they don't mind their employees using Firefox. I might expect them to use Firefox to test their products out in (like they even do that...See: Live Image Search which used to suck in Firefox) but to visit my small time website with Firefox or Safari would insinuate that it's the user's primary browser of choice.

Microsoft Employees Use Macs

What about that single user of Safari? Well I decided to open up the operating system report and lo and behold, there's an employee at Microsoft using a Macintosh. I can understand someone using Firefox but for a Microsoft employee to be using a Mac downright defeats all logic. One would think that if Windows Vista/XP were the end all be all operating system that they wouldn't "need no stinkn'" Macs. Being a loyal MS corporate stooge I was a bit offended to see Macintosh show up in my operating system report.

The IE Team Reads Your Comments and Visits Your Website

Another interesting tidbit I got from Google Analytics (I'm assuming here) is that members of the Internet Explorer Team Blog actually visit their users websites via their blog. I posted a comment in on the IE Team blog stating that IE8 does a terrible job at rendering my website and that it looks worse in IE8 than it did in prior versions of IE. We can see in the report below that 2 employees, presumibly from the IE Team, read my comment and visited my website, neat!

Conclusion

Aren't web analytics great? Perhaps I'll do a simliar study on Apple Inc. employees visiting my website at another time to see if we can find any of them using Windows XP or Yahoo! employees searching with Google Search.

View Comments [0]

Common HTML Setup For A CSS Layout

The HTML below is a pretty standard setup for most websites. Generally people want the #footer DIV to fall below the #container DIV. Also many people will want the background-color of the #container DIV to be solid and touch up against the #footer DIV.

Now view how this HTML renders with the basic CSS applied to it > >

Solution #1: Giving The #container DIV a Height

Notice how the #footer DIV is much too high and doesn't clear the #container or it's two child DIVs? The most common fix to this problem that I've seen is to give the #container DIV a height like so:

View This In Action >>

At this point most web developers would just move on to the next project and considered this finished. The problem is, when the height changes or receives more content this design is broken.

Solution #2: Clearing Float Using clear: both;

The next common fix to this is to use clear: both; on the #footer DIV:

View This In Action >>

While this does actually clear the #footer DIV notice how the yellow bordered #container DIV is still a small sliver at the top? If you used a repeating background-image or background-color this solution would not work.

Finally, a New Way To Clear Floats

There's a seldom used CSS property called "overflow" which will fix this problem for us. The W3C describes the overflow property as a property that specifies whether content of a block-level element is clipped when it overflows the element's box. It affects the clipping of all of the element's content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.

In common english that means that if a container has floated or absolute positioned elements it will not have a height. In order for it to "expand" to the size of it's floated children the CSS overflow property must be set, in this case to "auto"

View This In Action >>

Voila! The #container DIV now assumes the variable height of it's floated children and the #footer DIV clears the #container DIV.

View Comments [3]

After using the CAPTION element for awhile now, I've noticed that in some browsers, it appears to be a pixel shorter in width than in other browsers. Below, take a look at the top left of the table. You'll see that there appears to be a 1px discrepancy. This happens in all versions of Firefox and in Internet Explorer. The bug doesn't affect Opera, Safari, or Google Chrome.

The Solution

The following code will fix the bug in Firefox and Internet Explorer.

A Better Solution To The 1px Caption Shift Bug

I would recommend doing the opposite of the selector above and leave the CAPTION margin at 0px but target Firefox and Internet Explorer using CSS hacks. I suspect that Firefox and Internet Explorer are actually in the wrong here and that the others are in the right.

Sources

• HTML 4.01 Caption Specification

View Comments [2]

Segmentation in Google Analytics...Yes!

With segmentation I can virtually transform an entire GA profile into a specific scenario. Want to see what users from Milwaukee, Wisconsin are doing? Easy. Want to see what users from Milwaukee, Wisconsin, on the UWM campus are doing? Easy. Want to see what users from Milwaukee, Wisconsin, on the UWM campus that use a Macintosh, have a 1600x1200 Screen Resolution and use Firefox are doing? Easy. Seeing a pattern here? Yes, with segmentation you can take a few 'known variables' and turn it into a uniquely identifiable person (such as a friend).

Google Analytics Segmentation Example

In the above screen shot you can see how easy it is to drill down to your stalkers' hearts content. In this example I'm looking for users at UWGB that use a Macintosh. My target? Eric Lightbody, a prior co-worker of mine (sorry Eric!). Depending on how much traffic you site gets, this may be really easy for you to do or really hard. My site gets a pretty small amount of visitors from Wisconsin (where I live) so I can easily deduce the segments down to the point of identifying individuals.

I'm Weirdo Stalker, How Does This Benefit Me?

Well weirdo stalker, this works out great for you. With the segmentation feature you can apply these rules to your entire profile and essentially 'filter out' everything but your segment. Here I can see exactly what my victim did for the entire month of November. Every web page visited, times and dates that those pages were viewed and for how long. Everything I could do before with those 'anonymous visitors'.

Final Thoughts?

Segmentation is really cool! Even better is you can take these same rules and create a custom report and add that custom report to your main pages dashboard. Now you'll always know when that special someone (or friend in my case) visits your website. Stalkers unite!

View Comments [7]

Apply Ajax Style Loading Image To Your Images Without JavaScript

It's really simple, in fact it's too simple I don't know why I hadn't thought of it before. Simply add the .loading class to any of your IMG elements.

But wait, that's not all

I would also recommend adding dimensions to your images via the Height and Width properties in CSS. This will ensure that your loading.gif file appears completely. My images we're dynamically added to the page via an ASP loop so this was easy enough to add.

Alt Text?

The only drawback to this solution is in FireFox (and possibly other browsers, other than IE) the alt text will cover up the background-image. A workaround might be to give the IMG tag a title attribute instead of an ALT attribute. I know this isn't ideal but it's the best I can think of. Since my images didn't need any SEO treatment I was fine with this.

To view a demo of this view my wallpapers section of my site.

Sources:

• Google Image Search For Loading GIF Icons

View Comments [4]

Annoyed by the extreme delay in my menu's background-image I started tinkering to solve the problem. My first tool of choice was using the Firefox Live HTTP Headers addon. Using this I could load the page, and then proceed to hover over elements to see if the browser was hitting the server for images or other files. I noticed on my navigation that when I hovered over it, it needed to retrieve my background-image from the server. This made finding a solution much easier.

What CSS Properties Will Do A CSS Image Preload?

The following methods will download the images from the web server upon page load. This assumes the following code which might be some element within your site's template:

These Methods Successfully Downloaded The CSS Preload Image Upon Page Load

I consider the background-repeat: no-repeat; background-position: -9999px -9999px; to be the most practical of these methods

These Methods Did Not Download The CSS Preload Image Upon Page Load

The browser will not download the images upon page load if the element has a display: none; property (interesting that they will download the image if it's visibility is set to hidden). The browser will also not download images that have a :hover, :active or :focus in it's selector.

CSS Sprites?

Nope, sorry, before you even bother commenting "why not use CSS sprites?" In my situation that was not an option. The element I wanted to preload the image for had :hover for it's parent element and display: none; set, talk about a double whammy CSS sprites only work for elements that are visible on page load. I should digress that I could have bundled these images with some other images in my site's template but semantically they had no useful purpose with any other background-image.

The Solution?

I ended up using the background-repeat: no-repeat; background-position: -9999px -9999px; method. The trick is I needed to place my CSS background-image on some unused element on the page. This is not the best solution for CSS maintainability but it was a necessary evil if I wanted my hidden background-image to load before it was displayed on :hover

How It's Done

I had two elements on my page (in close proximity or parents of my elements). I decided to place these selectors in their own section of my stylesheet so that they would stand out a bit.

Optimal Solution?

No, not really but It fixed a problem I had. One could also create specific DIVs just for image preloading and absolutely position them outside of the viewport, but that just adds extra markup to the page and isn't really semantically correct. Feel free to leave a comment if you can think of a better way.

View Comments [2]

Home Page Possibilities

1. http://www.nealgrosskopf.com/
2. http://www.nealgrosskopf.com/default.asp
3. http://nealgrosskopf.com/
4. http://nealgrosskopf.com/default.asp

It's important to standardize a way for linking to index pages within folders on your website. It's also good to relay this onto co-worker who may also be working on the same website as yourself. Although web workers try their best to be consistent with their inner-site linking, it's impossible to maintain in a multi-user environment. Because of this I created a way to do 301 redirects for home pages.

Setup: Variables

While there is of course a shorter way to do this, I decided to create variables for this article since I feel they are easier to understand.

301 Domain Check

First we need an IF statement to check the domain name against our CorrectDomain variable. If the current domain does not contain the domain we want it to, we enter the IF statement.

Query Strings

Next we check if there are any query strings and if so, add the question mark to the beginning.

Default/Home/Index Page

Then we check the path to the page and remove default,index or home.asp from the string to get a clean trailing forward slash.

301 Redirect

Finally we do the actual 301 redirect in classic ASP using all the variables we built.

Putting It All Together

View Comments [6]

Setting Up Your CSS Quotes

First, lets use the blockquote tag, because it is the most semantic choice when dealing with quotations. Also I should note that support for the <q> tag is not there yet in Internet Explorer so we will avoid that tag for now. The margin gives the blockquote some spacing much like a paragraph tag would, while the padding left offsets the content from our left quote. The rarely seen CSS quotes property sets what glyph we want to use for our quotation character. I used the HTML entity &#8220 since you cannot place a literal " or ' symbol in the property, plus it will not work or validate.

Styling Our CSS Curly Quotes

Now we use the :before pseudo selector to place our CSS content that we defined using the quotes property to style our CSS quotes. I change the color, font family and give it a negative margin which is the reverse of the padding we gave to the blockquote element. Note that you must also set the content property to another rarely used CSS property called open-quote. This will inject what we defined in the quotes property above.

Putting It All Together

Click to view a demo of CSS curly quotes

Sources:

• http://www.w3.org/TR/css3-selectors/#first-letter
• http://www.w3schools.com/css/pr_gen_quotes.asp
• http://developer.mozilla.org/En/CSS:content

View Comments [0]

CSS Hacks: The Problem

Most standards favoring browsers (Firefox, Opera & Safari) have no method of targeting CSS to the specific browser while Internet Explorer, the buggiest browser, has a completely safe and easy method of serving CSS/HTML to only IE.

The Setup

To show that the hacks are working correctly I created 6 paragraphs with their specific browser/version identifier within them. This will let you know that the hack is working correctly

Next I automatically hid all P tags:

Targeting Internet Explorer With CSS Using Conditional Comments

The easiest way to target IE is with conditional comments. There is a robust syntax that Microsoft has created to allow authors to do this. I'm not going to go into detail about this since it has been re-hashed a million times by other bloggers but here are two alternatives to parser CSS hacks:

Targeting Internet Explorer With CSS Using Parser Hacks

I wouldn't recommend using these hacks since conditional comments are really, really easy to use but if you want to keep all your CSS in one file here is an alternative. Note that the IE7 hack will only apply to IE7 because IE6 does not understand the > selector. It should also be noted that no other browser will recognize this hack.

Targeting Firefox With CSS

The first hack targets only Firefox 1 and 2 by using the body:empty hack. The second hack, which is quite clever target all versions of Firefox by using the proprietary extension -moz. -moz combined with the -document url-prefix() which by the way is used by Firefox Addon creators targets Firefox and Firefox alone. I've found that by using proprietary extensions to CSS, as hacks, usually means the most surefire way to target individual browsers without having to worry about another browser possibly parsing the CSS.

Targeting Safari With CSS

The Safari CSS hack works similar to the Firefox hack because it uses a Safari proprietary extension to CSS. By using the -webkit prefix we can target Safari and only Safari.

Targeting Opera With CSS

The Opera CSS hack works because of negation in CSS. Currently I feel this hack is the weakest of all the hacks I've listed simply because it's targeting ALL browsers that support -min-device-pixel-ratio that aren't -webkit. It will only be a matter of time before Firefox supports this and this hack will then most likely apply to Firefox as well.

Putting It All Together:

Sources

• http://msdn.microsoft.com/en-us/library/ms537512.aspx
• http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
• http://perishablepress.com/press/2006/08/27/css-hack-dumpster/
• http://thomas.tanreisoftware.com/?p=11#opera

View Comments [25]

I would only need 20GB or so for Vista yet I have 120GB available. Because of this I decided to triple boot vista, xp, and linux all on the same machine. A PCI Express machine.

Windows XP And the PCI.sys 0x0000007E Error

I used GParted to segment up my hardrive and that worked beautifully. The first problem I ran into was that I could not install Windows XP on my PCI Express computer. It simply won't work. So I naturally switched the drive out into my non-express computer.

Next I tried installing Vista on that computer only to find out, that Vista refused to install on it because it failed to meet the system requirements. Darn. So I had a problem on my hands.

After scouring forums I found that I need to slipstream Service Pack 2 (SP2) on to my Windows XP installation. I did this unsuccessfully until I found a great program called Auto Streamer. This was the only method I found where It successfully slipstreamed it. The program combines a downloaded version of SP2 with your Windows XP installation CD and outputs it as a bootable ISO file. You can then use IMGBurn to burn a bootable ISO file.

After that I successfully installed Vista on a 50GB partition and installed Kunbuntu on a 12GB partition. Once that happens the computer boots using the GRUB boot loader and then you can choose Vista and then select either XP or Vista.

To Triple Boot XP, Vista and Kubuntu On A PCI Express Machine

1. Slipstream XP with SP2 using autostreamer
2. Burn bootable XP/SP2 disk
3. Install XP/SP2
4. Install Vista
5. Install Kubuntu

Resources

• AutoStreamer
• IMGBurn
• Service Pack 2 Direct Download

View Comments [3]

YouTube uses the EMBED tag wrapped by an object tag to embed their videos which is not a standards based way of embeding video. Embeding video is easy and there is no need to resort to YouTubes method.

Rather than put the burden on my end users to properly embed video, I decided to write a function that would convert any videos posted from YouTube and display them in a standards based way.

Converting YouTube's Garbage Embed Code To Valid HTML

1. The function requires that you pass it the user's embed code and a link to the YouTube video

   Function YouTubeCleanup(embed,link)

2. Next we check if the embed variable contains the phrase "youtube" in it

   if len(replace(embed,"youtube","")) <> len(embed) then

3. Then I build the new path to the YouTube video using the link variable

   url = "http://www.youtube.com/v/" & replace(link,"http://www.youtube.com/watch?v=","") & "&hl=en"

4. Next I build the output for the new standards based way of embeding flash video

   embed = "<object type=""application/x-shockwave-flash"" data=""" & url & "&hl=en""><param name=""movie"" value=""" & url & """></object>"

5. Finally I return the value of the embed variable. Note that if the embed variable did not initially contain "youtube" in it, it will return the variable's default value and no harm has been done.

   YouTubeCleanup = embed

Putting It All Together

View Comments [2]

My IE Has Bugs!

After applying my original diagnostics code to several projects (at work, and my recent site redesign) I realized that Internet Explorer wasn't quite getting it right. In fact sometimes, IE was selecting incorrect elements. What came from this was that I needed to be more careful in the selectors I used and that using the "*" selector resulted in some weird things in IE. What also came from that was a bug in IE that selects the IMG tag when the selector calls for the proprietary IMAGE element.

I decided to go out to the HTML 4.01 specification (straight to the source) and find exactly what attributes and elements are deprecated and which aren't. That way I could create a more authentic version of the diagnostics tool rather than just adding my personal opinion on what ought to be deprecated and what shouldn't. This resulted in CSS Diagnostics 2.0.

Diagnostics Gone Famous

For my second rendition of the project, I decided that I should create a Google Code Project and host my diagnostics on there. I'm not completely sure if that is a good or bad thing to do. My goals are to keep traffic coming to my own site and not Google's but perhaps the two can live together. I also learned that you can embed the Google Analytics tracking code directly into the Google Code web page thus allowing me to track traffic to that area. This makes me care less about traffic going there because if I can use GA, then I can fell like I actually own those pages.

On to the code:

1. Highlight Empty Attributes

   I chose some common attributes that people may forget to fill in. Feel free to remove the href="#". I like to use this one because while developing a website, I forget to change # links to their proper pages and this helps me catch them in the copy.

   img[alt=""], area[alt=""], *[class=""], a[href=""], a[href="#"], *[id=""], *[title=""] { border: 5px dotted yellow !important; }

2. Highlight Proposed Deprecated Attributes

   These are a list of attributes that aren't formally deprecated but I personally believe should be. Generally this is because there is a better alternative such as CSS or using IDs on elements rather than NAME.

   body[background], table[background], td[background], th[background], input[border], table[border] table[cellpadding], table[cellspacing], object[codebase], img[height], object[height], table[height], a[name], form[name], img[name], object[name], a[target], area[target], td[valign], th[valign], img[width], object[width], table[width] { border: 5px dotted orange !important; }

3. Highlight Deprecated Attributes

   These attributes are officially deprecated by the W3C per the HTML 4.01 specification. If you are using the TRANSITIONAL DTD CSS Diagnostics is a great way to move you code to STRICT. It should also be noted that these should appear AFTER empty, and proposed deprecated elements due to specificity in CSS.

   applet[align], caption[align], div[align], h1[align], h2[align], h3[align], h4[align], h5[align], h6[align], hr[align], iframe[align], img[align], input[align], legend[align], object[align], p[align], table[align], body[alink], applet[alt], applet[archive], body[background], body[bgcolor], td[bgcolor], tr[bgcolor], table[bgcolor], img[border], object[border], br[clear], applet[code], applet[codebase], basefont[color], font[color], dir[compact], dl[compact], menu[compact], ol[compact], ul[compact], basefont[face], font[face], applet[height], td[height], th[height], applet[hspace], img[hspace], object[hspace], script[language], body[link], applet[name], hr[noshade], td[nowrap], th[nowrap], applet[object], isindex[prompt], hr[size], font[size], basefont[size], ol[start], body[text], li[type], ol[type], ul[type], html[version], body[vlink], li[value], applet[vspace], img[vspace], object[vspace], hr[width], td[width], th[width], applet[width], pre[width] { border: 5px dotted red !important; }

4. Highlight Non-W3C Proprietary HTML Attribute

   These are a list of proprietary HTML attributes. Using these in your code should is more offensive than using a deprecated attribute, since these were never warrented by the W3C. Use of these attributes should be avoided at all costs.

   body[bgproperties], *[bordercolor], *[bordercolordark], *[bordercolorlight], body[topmargin], body[rightmargin], body[bottommargin], body[leftmargin], table[frame] { border: 5px dotted magenta !important; }

5. Highlight Empty Elements

   These selectors will highlight empty elements within your markup. I've commented out a few selectors that I found didn't jive with my personal website but feel free to de-comment these and use them on your website.

   /*span:empty,*/ /*div:empty,*/ li:empty, /*p:empty,*/ td:empty, th:empty { border: 5px solid yellow !important; }

6. Highlight Proposed Deprecated Elements

   Here is a list of elements I feel should be deprecated. Inputs should be because the BUTTON element is a much better choice and allows for easier selection of all website BUTTONs especially in IE6.

   input[type="button"], input[type="reset"], input[type="submit"], tt, big, small { border: 5px solid orange !important; }

7. Highlight Deprecated Elements

   These elements are formally deprecated in the HTML 4.01 STICT specification.

   applet, basefont, center, dir, font, isindex, menu, s, strike, u, listing, plaintext, xmp { border: 5px solid red !important; }

8. Highlight Non-W3C Proprietary HTML Elements

   All of these elements are proprietary, meaning they are not part of the W3C spec and never have been. They include some of the more infamous elements such as the MARQUEE and the BLINK tags. I've commented out the IMAGE selector because IE7 and under will select the IMG tag as well, so use at your own risk.

   audioscope, bgsound, blink, bq, comment, embed, fn, ilayer, /*image,*/ keygen, layer, limittext, marquee, multicol, nobr, noembed, nolayer, nosmartquotes, rt, ruby, server, sidebar, spacer, wbr, xml, blackface, shadow { border: 5px solid magenta !important }

9. Highlight XHTML 1.0 Strict Deprecated Attributes

   Since many people use XHTML I read the XHTML spec and through in a few deprecated attributes specific to XHTML.

   a[name], applet[name], form[name], frame[name], iframe[name], img[name], map[name] { border: 5px dotted lime !important }

10. Highlight XHTML 1.0 Strict Prohibitions

    There are also prohibitions in XHTML, essentially elements that cannot appear nested inside other elements.

    a > a, pre > img, pre > object, pre > big, pre > small, pre > sub, pre > sup, button > input, button > select, button > textarea, button > label, button > button, button > form, button > fieldset, button > iframe, button > isindex, label > label, form > form { border: 5px solid lime !important }

11. Highlight Deprecated Classes From Old Version Of Website

    I found this area of CSS Diagnostics especially helpful during my last site redesign. When I redesigned my site, I threw out all my old CSS and started from scratch. What resulted was a lot of left over classes in my markup that was non existent in my external stylesheet. This is a great way to call out those "old" classes that aren't being used anymore.

    .toolbg, .ulnone, span.b, ul.list, .eleven, .lines, .wide, .select, table.form, form td.b, table .top, .gallerypic, .iegallery, .pic, .image, .transparent, .wht, .blk, .blue, .dkgray, .ltgray, .brown, .quote, .greyhover { border: 5px groove red !important; }

12. Highlight Deprecated JavaScript Functions From Old Version Of Website

    The same can be applied to old JavaScript functions. I found numerous references to old function calls so I devised a way to highlight deprecated JavaScript functions.

    input[onfocus*="normal1px()"], input[onfocus*="change1px()"] { border: 5px dashed red !important; }

13. Highlight Known 404 Page Links

    Another problem I ran across during my redesign was deleted web pages. I devised a way of highlight known 404 pages using CSS. You can substitute the URLs I have below with you own known 404 pages. A great way to determine 404 pages is to look at your server log files or to use Google Webmaster Tools.

    a[href*="/designs/web/web1/"], a[href*="/designs/web/web2/"], a[href*="/designs/web/web3/"], a[href*="/designs/aitp/aitp-fvtc/"], a[href*="/designs/aitp/aitp/"], a[href*="/forms/contact.asp"], a[href*="/forms/email.asp"] { border: 5px double red !important; }

Putting It All Together:

Summary:

It is best to use different colors and borders to apply meaning to what error you have made in your code. I like to use yellow for minor, orange for moderate, red for severe, and magenta for extremely severe.

I also like to apply different border styles depending on what the problem may be. Dotted for me means there is a bad attribute. Solid means there is a bad element. Other border styles have their own meanings as well.

Considerations:

Make sure to place this at the end of your stylesheet and to leave in the !important rules so that they override any rules that may be inline.

It is also best to use a standards compliant browser when testing. IE7 is ok but I would personally suggest Firefox 3 because it supports standards better and because it has other add-ons that make web development easier and diagnostic testing easier.

Download:

I've set up a Google Code Project so feel free to download it.

View Comments [5]

The problem was Internet Explorer kept highlighting all of my images, particularly my anchored images in solid 5px magenta (essentially proprietary elements)

I automatically started my comment strips of selectors out method, which is short is using deduction to pick out the offending selector. This is the offending tag I ended up with:

A Brand New Internet Explorer Bug...The HTML IMAGE Element:

That's right, some random archaic element. Now the real problem here is that Internet Explorer, and only Internet Explorer was highlighting regular old IMG tags even though my selector was calling for IMAGE tags. That's a bug, and that's a new bug to my knowledge. This does beg for me to cook up some kind of hackary to target IE regarding images on web pages but why not just use conditional comments? If you had a very, very specific case where you wanted to target IE and only IE images this might be useful. Other than that I'm not sure where it would get used.

Sources:

• http://en.wikipedia.org/wiki/Non-standard_HTML_tags

View Comments [2]

1. Remove First String Character In ASP Classic

   Input String = "/products/computers/parts/default.asp"

   First lets lower case that url

   url = lcase(request.ServerVariables("URL")) url = right(url,len(url)-1)

   What this does is moves the length of the string minus 1 space from the right position of the string using the right() and len() built in functions in ASP. I realize that there are probably easier ways to do this in other languages but I figured I'd fill that empty hole on the internet in this subject by writing it up.

2. Remove Forward Slashes

   Class Name = "products/computers/parts/default.asp"

   Next lets remove all forward slashes and replace them with underscores. (Note you can use whatever separator your want, I prefer underscores for readability.

   url = replace(url,"/","_")

3. Remove File Extension And Add Prefix

   Class Name = "products_computers_parts_default.asp"

   Last, lets remove the file extension and give the class a prefix of "url_" to set it apart from other class names.

   url = replace(url,".asp","") CreatePageClassName = "url_" & url

Putting It All Together

Class Name = "url_products_computers_parts_default"

Where To Use This

I would personally place this on your body tag as an ID if possible:

Which would result in this:

Reference:

• http://reference.sitepoint.com/css/specificity

View Comments [1]

CSS Selectors For Finding Broken Links

Then it occurred to me, why not use my CSS to highlight broken links? Here's how.

Rationale

This will select any anchor tags where their href attribute equals the 404 broken link page. For those of you using my CSS Diagnostics stylesheet, I used a different border-style here so that we can differentiate between the highlighted elements. This works good and fine but what about those newbie coders at work who still link to pages using "../" or the ones that include the domain name within the link?

Take Two

Rationale

This will first style the suspected broken links using CSS and then de-style the correct links.

Other Uses

This can also be used to style elements that are calling old JavaScript functions:

This will search through the entire onclick attribute using the substring selector for "old()". The reason I used the *= select is because sometimes developers place the function call before or after other functions so I need to be a bit less specific.

Notes

Like CSS Diagnostics, you will need to use a standards compliant web browser fully supporting CSS3 selectors. I've found that Firefox seems to be the best browser since it comes with many other developer tools as well.

View Comments [0]

View Comments [0]

The Solution:

Fortunately there is a solution using CSS:

The Opposite

If the meaning of your life depends on not conforming to Microsoft (you're out there) you can also make IE behave like Firefox:

Whatever method you prefer I would recommend placing this in your baseline stylesheet before starting a new web site or project. Your users will thank you.

Sources:

• Controlling browser scrollbars

View Comments [2]

One thing you'll notice with JavaScript programming is the methods and property calls can get quite lengthy. There is a solution to this and that is to create your own custom functions with shorter function names.

Short Named JavaScript Functions:

Each of these is simply a shorter way of calling the built in JavaScript functions. By using these you can reduce the file size of of you JavaScript and also increase the legibility. Probably the only con to these functions is there will be a performance decrease since the code will have to do an extra call each time it's used.

If you can think of any other down and dirty JS functions feel free to leave a comment and fill me in.

Sources:

• All credit goes to Chris Retlich

View Comments [4]

Then the other day I ran across this nugget of an article.

Reversing Arrays in ASP:

1. Here we define our array. In most cases this is done from a database. articlesRev = array( _ "array item 0", _ "array item 1", _ "array item 2", _ "array item 3" _ )
2. Next we loop through our original array and reverse it. Dim articles() ubnd = UBound(articlesRev) Redim articles(ubnd) for i = 0 to ubnd articles(ubnd - i) = articlesRev(i) next
3. Finally we write out our array, which is reversed now. for i=0 to ubound(articles) response.Write(articles(i)&"<br>") next

Putting It all together:

Sources:

• http://www.cruto.com/blog/?p=4

View Comments [6]