People Love Me and So Should You

November 25, 2009 5 comments

If you’ve seen be around Twitter chances are you already know how awesome I am at helping people with CSS problems. But it doesn’t hurt to share a bunch of comments from happy customers that had their CSS issues fixed by yours truly. I laugh in the face of Bill Gates and his pathetic Internet Explorer problems.

I have finally managed to give my blog a much needed face lift. This seemingly simple layout has been the bane of my existence for months and I owe so much credit to That CSS Guy or helping me iron out some pesky coding kinks. He spotted my frustrated Tweets and offered a helping hand. Sure, I felt a little foolish after he pointed out the errors with such ease but he was so right when he said that a pair of fresh eyes can make all the difference. I had been staring at this coding for so long it was starting to rot my brain! I really appreciate all of your assistance, Justin. So generous and kind of you.”  Jaclyn F. http://smile-pretty.blogspot.com/

dtssmithers

@ThatCssGuy it worked! thanks! I really appreciate your help!

coolphotoideas

I LOVE Twitterers who have a great sense of humor…thanks @thatcssguy for giving me a chuckle! I needed it today!

surferartchick

@ThatCssGuy thanks!

xtnblue

@ThatCssGuy thanks!

atlemo

@ThatCssGuy That was it! Thanks for the swift reply – you´ve been PayPal´d ;)

Afterthemouse

@ThatCssGuy many thanks sir!

matthew_parente

@ThatCssGuy thanks. I knew it would be something simple … too many permutations to guess, though. thanks!

melfi

@ThatCssGuy @MitchMartin Guys, thank you so much. It works perfectly.

robhanly

@ThatCssGuy it’s almost like you felt my pain across the internet!

mikejarrell

@ThatCssGuy I’m an idiot…why didn’t i think of that? You rock!

Joesalome

@thatcssguy good work. keep it up.

robinjection

@ThatCssGuy CssGuy to the rescue once again!

GraziellaB

@ThatCssGuy Great, thanks I appreciate it!

Purse17

@ThatCssGuy Thanks…I appreciate it!!!

jenz036

@ThatCssGuy great. Thanks! :)

gregpederson

@ThatCssGuy thanks for the css help…that site’s nav now behaves. Thanks again.

heathr

@thatCSSGuy is not only my hero of the day, but he has the best site + biz model based on twitter I’ve seen. http://tr.im/gfef

A Small Plug in The Wall Street Journal

March 8, 2009 7 comments

Who would have thought that a spandex suit and a cape will end you up in the Technology section of The Wall Street Journal?

Below is a side bar to the full article.

When 25-year-old Justin Rockwell was laid off from his job as a Web developer last fall, he began scrounging for freelance gigs. He also found himself spending a lot of time on Twitter, answering Web development problems for fellow Twitterers.

Eventually, Mr. Rockwell realized there was a market for his services on Twitter. Now he spends his days trolling the site for people with Web coding problems, offering to help for a fee.

He’s not making a lot of money yet. But he is a pioneer for what Twitter could become — a forum for real-time answers. Already, journalists such as CNN’s Rick Sanchez are asking their Twitter followers to suggest interview questions, and many companies such as such as Comcast Corp. are providing customer service on Twitter.

Still, Twitter is evolving and has yet to figure out its business model. “I haven’t heard of this particular guy, but, in general, I’d say we’re fine with this sort of experiment so long as it’s done with good intent,” says Twitter cofounder Biz Stone.

For Mr. Rockwell, like most people, Twitter started a personal branding opportunity: “What sparked the idea was just that I wanted to become well known for what I do well.” Mr. Rockwell’s expertise is in a method of building Web pages called Cascading Style Sheets (CSS).

So he set up his account in February — Twitter.com/ThatCSSGuy, which shows a picture of a superhero wearing a cape. He figured he would just swoop in and fix people’s development problems.

He finds clients by searching Twitter for keywords related to CSS issues. Once he finds a person tweeting about a Web coding difficulty, he sends out a tweet: Need a hand?

If the tweeter is interested, Mr. Rockwell directs him or her to his Web site which displays a slider with prices ranging from $35 (“Fixed within 3 days!”) to $135 (“Hot damn give me two hours!). “People like to choose their price,” he says.

On his first day in business, he made two sales. In his first week, he made $500. This past month, he raked in $1,400 — all from Twitter referrals.

Mr. Rockwell still relies on additional freelance work to pay the bills, but has been pleased with the results on Twitter. “I fell into this niche,” he says. “Because of the economy, people are trying to do things themselves, but they need a little extra advice to get it done. “

Julia Angwin
Senior Technology Editor, WSJ.com
The Wall Street Journal
@JuliaAngwin

Head-Banging CSS Bugs

February 17, 2009 17 comments

Listen! You hear that? It’s the faint *thud thud thud* of a web developer banging their head against a desk trying to solve the simplest of CSS bugs that they squashed 3 months ago but now can’t remember how!

Below is a list of the most common CSS problems I’m asked to fixed over and over again. Keep it in your back pocket. Trust me, it will come in handy. Now put the Advil away.

1) Dropdown Menu Behind Flash Element

menuflash

I know you all have seen this one before- it can take a lot of time to find the solution. You set the z-index on the ul to 99. That doesn’t work, you set the z-index on the li to 99 (though, sometimes this helps if it’s not a flash element that it’s going behind) finally you say f** it, and set the ul z-index to 500 and every other tag in your css file to -90000. But still not dice.

The problem is with the flash movie it self, not the z-index of it either. You need to set the “wmode” of the flash movie to “transparent”.

Depending on how you’re embedding the code there are different ways you can do it. The two most common ways would be:

If you’re using the embed tags add this anywhere in it:

wmode="transparent"

For you swfObject lovers give this a go:

so.addParam("wmode", "transparent");

2) Fieldset/Legend IE Background Overflow.. thing

thatguyfieldset

I doubt that is the technical name for this bug, but who cares. It’s a bug and still a problem. What happens is when IE renders the fieldset background it applies it to the legend as well. Yay IE! If you add a padding to the fieldset it gets even worse.

The easiest way to fix this, is to set the position of the fieldset to “relative”, and the position of the legend to “absolute”. This disassociates the legend with the fieldset by removing it from the flow of the document.

This has been my solution:

fieldset {
position:relative;
padding:10px /*this is optional*/
}
 
label{
position:absolute;
top: -10px; /*make this the same as your fieldset padding top- if set */
}

3) Can’t Click Position:Absolute Anchor Tag

pointerfrownpointersmileYeah, this is another IE bug- I’m not sure if there is a well documented solution for this one, but this is what’s up.

Lets say you have a “button” that is actually part of a background image. Typically it’s a logo. You have a link positioned absolute inside the container that you want to be able to click. Your code might look something like this:

<h1><a id="homeLink" href="/index.html"></a></h1>

And your CSS along these lines:

#homeLink{
display:block;
height:150px;
width:150px;
position:absolute;
top:50px;
left 50px;
}

I really wish I had a clean solution for this problem. But I don’t, since it’s IE I suppose it doesn’t matter too much. The easiest and dirtiest solution is to add a fake background-image to your style.

#homeLink{
background:url(fake_image.gif);
display:block;
height:150px;
width:150px;
position:absolute;
top:50px;
left 50px;
}

That’s quick and easy, with more time, just add REAL transparent .gif and be done with it.

4) Content Flows Past Container

thatbuyflowbug

I get this problem a lot, especially when I’m floating a ton of objects on the page. If your content inside its container is all floated, then the container doesn’t know how to size itself. If your container has a width, it needs a float as well. So your solution would be to put a float on it!

#contentContainer{float:left; width:/*whatever your width is*/}

A rule of mine is, if it floats, it needs a width, if it has a width, it needs to float. If adding a float to the object screws up your site big time, you can always cheat by adding this extra tag just before your container’s closing div.

<div style="clear:both"></div>

Of course, giving a class and keeping the style separate is the better option. But you get my point.

Limit Your DIVS

February 17, 2009 8 comments

During the years of honing my HTML skills I have been tempted and often required to serve up the cleanest code I possibly can. I quickly learned that all elements within my document – everything from a <p> to a <ul> to a <h5> – can accept the same style rules as a div.

This got me thinking, why even use a div for styling when you can apply the style directly to your elements? I started to explore this concept further and over time noticed one repeating outcome when limiting my div use: consistent cross browser rendering!

When I limited the use of my divs all the major browser including both IE6 and IE7 would render the sites nearly perfectly. Or with very little fixes needed.

So, this obviously brings me to the point of this article, what if you build a site without any divs at all?

It’s possible and I’ve done it- not that it’s magic but proves divs nor tables are necessary for layout

www.nodivs.com is a proof of concept site that I’ve put together to show how a typical website can be built without divs.

No div Contact Box

To give you all a taste of what is involved (and to show how simple it is) to build a site without divs, lets take a detailed look at something like this contact box:

nodivform

This is a standard contact box that might appear in a side column on your website and allow people to submit their information to you. The box’s code typically would look something like this:

<div id="formHolder">
    <p>Order Your NoDivs Today</p>
    <form>
        <!-- form stuff here -->
    </form>
</div><!-- /formHolder -->

And the css to go with it:

#formHolder{border:5px solid #ffffff; padding:10px; margin-top:10px}
#formHolder p{font-size:180%; color#ffffff;}
#formHolder form{/*any styles for the form */}

As far as markup goes it’s all pretty clean and uses only one div. But is a perfect example of an unnecessary div being used on your site. div and forms are both block elements, they will accept styles the same and render the same.

To transition to a no div layout would be simple, just apply the div style to the form and move on. You can either move the p tag inside the form, or as a smarter make the p tag into a legend. So something like this:

<form id="formHolder">
    Order Your NoDivs Today
    <!-- form stuff here -->
</form>

And a nearly identical CSS to what we had before just replacing the #formHolder p with #formHolder legend.

#formHolder{border:5px solid #ffffff; padding:10px; margin-top:10px}
#formHolder legend{font-size:180%; color#ffffff;}
#formHolder form{/*any styles for the form */}

Ok lets move onto something a little more difficult that usually requires a bunch of divs to create.

Building a div-less header

nodivheader

This is the header that is located at nodivs.com. It’s pretty straight forward, a logo that links to the home page, a call to action box and of course the main navigation.

The markup on a typical div filled something would looks something like this:

<div id="header">
    <div id="topHeader">
        <div id="logo">
        <a href="#">No Divs</a></div>
        <div id="contantBox">
            <h2>Contact NoDivs.com 1-888-1485</h2>
        </div>
    </div><!-- /topHeader -->
    <div id="mainNav">
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
            <li>Login</li>
        </ul>
    </div>
</div><!-- /header -->

Pretty straight forward I would say, and I might even be a tad conservative in the number of divs that I’m using. But I think you get the idea.

Now, this is how that same header would be built without divs.

<h1><a id="logo" href="#">Welcome to NoDivs.com</a></h1>
<h2>Contact NoDivs.com <span>1-888-1485</span></h2>
<ul id="navBar">
	<li>Home</li>
	<li>About</li>
	<li>Contact</li>
	<li>Login</li>
</ul>

And here is the CSS:

h1{ background: #6788a1 url(/images/headerbg.gif) top left repeat-x; width:970px; height:110px;}
 
h2{position:absolute; top:20px; right:0; font-size:180%; color:#ffffff; padding:10px; width:250px; text-align:center; background-color:#ffffff; color:#a17a67}
h2 span{ font-weight:bold; margin-top:10px; display:block;}
 
#logo{background:transparent url(/images/logoz.png) top left no-repeat; text-indent:-9000px; height:101px; width:118px; display:block;}
 
#navBar{background:#48657a url(/images/navbg.gif) top left repeat-x; width:970px; margin-top:10px; list-style:none; float:left; margin-bottom:20px;}
#navBar li{float:left; color:#ffffff; padding:10px;}

Basically what happens is the style is removed from the container divs and applied directly to its containing element.

Conclusion

The biggest thing I want you to take away from this, is NOT that using divs is bad and shouldn’t be done, but that the limited use of div tags create less problems and there for have less room for error when it comes to rendering in all browser types.

I encourage you all to go to www.nodivs.com and see how the rest of the site is built. The idea of removing divs, as you can see, is pretty straight forward. This is not going to be the end of divs, there are times where you will have to use the, but should give you a good example of how divs are overused currently on sites

CSS Gems You Might Be Missing Out On

February 9, 2009 9 comments

clip:

A clipping area describes the portions of an elements rendering box that are visible. In less geeky terms, think of this property as “cropping” your element to size. A great use can be for creating thumbnails of images that already exist without having to resize them. Throw some JS into the equation and you can pull off some pretty cool effects.

Example Code:

#element{position:absolute;
width: 50px;
height:50px;
clip: rect(5px 40px 40px 5px)
}

Seifi.org does a nice write up on using clip to create thumbnails. Have a read! http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html

empty-cell:

When you’re using tables the right way- to display tabular data- this little gem gives you an easy way to remove the borders from an empty cell. Note that IE does not allow you to change this property.

Example Code:

table { empty-cells: hide; }

Possible values include ‘inherit’, ‘show’ and ‘hide’. Show is the default value.

quotes:

This is a nice little way to get sexy quotes to appear on your site without having to use any images. Some of you might already be using the blockquote tag which is a good start, but the rarely seen CSS quotes property sets what glyph you want to use for the quotation character.

Example Code:

blockquote{
quotes: “ ”
}

Here is a nice writeup on Creating CSS Curly Quotes Without Images You need to use the HTML entities since you cannot place actual ” or ‘ symbols in the property. Some optional glyphs include:

ASCII double quote graphic
&#34;
ASCII double quote graphic
&#39;
ASCII double quote graphic
&#8249;
ASCII double quote graphic
&#8250;
ASCII double quote graphic
&#171;
ASCII double quote graphic
&#187;
ASCII double quote graphic
&#8216;
ASCII double quote graphic
&#8217;
ASCII double quote graphic
&#8220;
ASCII double quote graphic
&#8221;
ASCII double quote graphic
&#8222;

font-variant:

This is a simple property but still a goody. Gives you the option of small-caps which is great for you typography nuts.

Example code:

h3{font-variant:small-caps;}

This is just a normal chunk of text. This is a chunk of text with small caps. Isn’t this swell?

text-indent:

You think that this would be used more often, but it’s really not. Use this to push in the first line of text in your paragraph.

Example code:

p{text-indent:20px}

Firecookie- my new BFF

February 9, 2009 5 comments

Firecookie is an awesome extension for Firebug I just recently discovered. It makes it possible to view and manage cookies in your browser. Unlike the other cookie managers and views that are avaiable as extensions to Firefox, this is an exclusive plug in for Firebug. This keeps things clean and simple in my opinion since Firebug is running 24/7 anyway.

After Firecookie is installed you will see a new tab within Firebug’s bar called Cookies.  Clicking this tab will then display all cookies associated with the current domain. Each item lists the basic information about that cookies. So things like name, value,path, expire date and domain.

But where Firecookie really gets useful is when you want to see when something happens to a cookie in real time. Using the existing Console tab in Firebug, Firecookie creates a log entry every time a cookie is created, changed, deleted or rejected.

CSS Shorthand – The Need to Know Basics

February 8, 2009 4 comments

Short hand CSS has made my coding days so much easier and faster, but even I don’t take full advantage of shorthand code- mainly becuase I didn’t know it was possible until experimenting with it. Here are some CSS shorthand guides you can use to make your life easier.

Shorthand Padding and Margin:
Yeah this is a simple one, but all too often people forget to use it and end up typing way more CSS markup than is needed.

#element {
  padding-top: number+unit;
  padding-right: number+unit;
  padding-bottom: number+unit;
  padding-left: number+unit;
}

You can save alot of time, just think of the hands of a clock starting at noon, and follow around clocking wise, top right bottom and left. Padding and Margin work exactly the same.

#element {
  padding: value value value value;
}

Background:
This could be my all time favorite short hand property in CSS

#element {
  background-color: color || #hex || (rgb / % || 0-255);
  background-image:url(URI);
  background-repeat: repeat || repeat-x || repeat-y || no-repeat;
  background-position: X Y || (top||bottom||center) (left||right||center);
  background-attachment: scroll || fixed;
}

The cool thing about this shorthand method is that these properties can be combined.

#element {
  background:
    #fff
    url(image.png)
    no-repeat
    20px 100px
    fixed;
}

You can leave out as many values as you want, but they will automaticaly inheret their default values. They are as follows: Background-color: defaults to ‘transparent’, background-image: defaults to ‘none’, background-repeat: defaults to ‘repeat’, background-position: defaults to ‘top left’, and background-attachment: defaults to ‘scroll’.

Border Properties:

#element {
  border-width: number+unit;
  border-style: (numerous);
  border-color: color || #hex || (rgb / % || 0-255);
}

You can trim this bad-boy down pretty easily

#element {
  border:
    6px
    solid
    #3f3f3f
}

That CSS Guy

January 21, 2009 1 comment

Allow myself to introduce, myself. Or better yet, allow me to introduce to you what this site is. To put it as simple as possible, it’s a site to help you with all of your CSS problems. You know who you are, and you know you have tons of problems. So rather than beating yourself up to fix those issues, just get in contact with me and I will solve your problems for you.

What I will do for you!
As stated, I will fix your css problems. I specialize is XHTML and CSS however I’m pretty handy with tables based layout, and can even handle fixing a JS issue or two- if it directly effects your css.

What does it all cost?
Not as much as you think. It depends on how soon you need it fixed. The more you pay, the sooner your problems will be solved and you can move forward with your project. You might be thinking, “why pay for someone else to do what I can already do?” Good questions, even the best developers have problems with their code, and it helps to have an outside person looking in to give assistance.

Does it hurt?
Nope, it’s painless, just place your order on the home page and tell me the details of your problem (1 problem per order please). Using FireBug and the other fancy tools I have at my disposal I will dissect your code and pinpoint the problem for you. I will then forward the CSS solution to your method of contact and we can all move on our merry ways.

What if you don’t fix it?
Pssh, what makes you think I won’t? Yeah, I’m awesome and all, but sometimes I just won’t be able to fix your problem. It’s usually for a reason out of my control, if this is the case I will let you know that I can’t fix your problem. I will refund your money so there are no hard feelings.

That’s how it all works, pretty straight forward I would say. If you have any questions feel free to email me at emailme@thatcssguy.com

-Justin