making things work: ie 5-7 and css.

I am currently working on a CSS project that needs to work in IE 5.0+, FireFox 1+, Safari 1+, and Opera 8+ for both Mac and PC. Normally writing CSS for multiple browsers/multiple platforms does not scare me, but the IE 5.0 part scares me, particularly since I am going to have to create some major hacks that will not validate and a simple 2-3 hour job becomes a 4-6 hour job full of making one change, looking at it in 5 browsers and then moving on. I am hoping that IE 7 (now beta 3) will actually be more standard compliant, but of course I have doubts…and I have to live with IE 5.0 hacks for at least another year. During my process of writing CSS code that will work in the browsers mentioned above, I have had to reference a few good IE hack web sites that I wanted to share in case anyone ever needed a good CSS for IE reference.

[tags]IE hacks, CSS, web standards[/tags]

One of Those Days

Time for a beer! Nothing like waking up at 5am and putting in multiple hours of “work” before you actually start your day job. To begin the day…I could not sleep (because of the humidity) so I decide to get up early and check my consulting company’s email figuring I can do a few simple tasks before I start my day job. No new messages. I think to myself that I should have something…I should at least have my daily tasks email from Tasks Pro that is sent every morning at 430am. I then look into the problem and notice I cannot send mail either….everyone’s favorite 550 smtp error. I call my hosting company and have them look into it. I start to sweat because this is affecting my entire VPS…all my domain names, and all my clients. After getting disconnected four times from my hosting company but finally get a call back from the last person I talk to and he assures me he is looking into it. An hour goes by and no fix. I call back and talk to someone else who is now also looking into it. Meanwhile, a client calls me and tells me she is going to demo the XOOPS CMS I built and she cannot log in with the administrative account. I confirm the problem, and luckily I recognize this issue…and a simple database rebuild takes care of the problem. As I get off the phone with my client, I get an IM from another person I am doing work for and they are having some CSS issues. ID issues, the ever-so-lovely unclosed div tag issue – luckily this was not too bad of an issue and I like CSS so this was not too bad. Next thing I know I get a call back from my hosting company and my issue has finally been resolved. It is now time to stop my consulting work so I can start my day job…unfortunately I am already stressed out and it is not even 9am!

My work day officially begins…and finally ends. I take a conference call during my lunch break and get piles of more work to do this evening. I start to think my day looks up when my Vonage (sorry Jerry, I misplace your refer a friend email and was so lame I did not email you back about getting another copy – lunch is on me when you are in the city next time) equipment arrives (I am using it for my business) but to continue on with my wonderful day…I cannot get a dial tone. Whoops, I do not have a Vonage compatible router. Off to Best Buy to buy a new router. I then had to come home and reconfigure the router (I have quite a few custom port forwarding settings for PS2 and for my home servers). Finally, I am able to sit down, take a breath, and start some work for my consulting business….knowing I really should be out mowing the lawn. Serenity Now!
[tags]serenity now, tasks pro, VPS, CSS, XOOPS, Vonage, PS2[/tags]

troubleshooting/debugging css.

After spending fourteen hours this weekend working on CSS for a project (99% positioning), I thought I should write something about troubleshooting and debugging common problems I usually run into in hopes it can save others a few minutes/hours/frustration.
What to do when the unexpected happens (including when nothing at all):

  1. class(.) or ID(#)? There are sometimes when I define a class (#) and then try to call it in a page by using
    instead of calling it in correctly using

    .
  2. spelling. I cannot tell you how many times I define a class that I thought would be perfect then when testing it, nothing happens. Most common problem: I have either misspelled the defined class name, or in the code misspelled “class”. There have been many occasions when I catch a “calss” in my code instead of “class” which then brings unexpected outcomes.
  3. matching curly bracket ( } ). If you define a class, ID, or element, make sure you have both an opening bracket and a closing bracket. If you are missing either, your CSS will not show up properly. You will also get unexpected results if you have two closing curly ( } ) brackets in a row.
  4. semi-colons. If you define a style, make sure you have a semi-colon after it. If you leave out the semi-colon after a value (selector {property: value;} ) you will not see any change. (I have done this countless times)
  5. validate. If all else fails, look for any weird characters in the style sheet – common issue when using subversion and there is a conflict) or validate your CSS. (You should always try and validate your code, but validating your code when you are having issues is a good way to see warnings/errors really quickly).
  6. One last thing…make small changes and look at the changes in at least 3 different browsers – preferably on two different platforms. Better to catch the problem early, then after you have nested divs and no idea what happened 😉

Hopefully knowing what to look for will save you time next time you are ready to scream at your CSS problems. I still run into the problems above on occasion, but at least I know what to look for now…and that saves countless hours!
P.S. You know you have been doing too much CSS when you are trying to sleep at night in your bed…and there is a cat down by your feet…and in your mind you are creating a div container to contain the cat in one spot. Yikes.
[tags]CSS [/tags]

helpful css tips.

Over the years, I have wasted a lot of time on “guessing” what would work and what would not work. Anyone just starting with CSS or looking to modify someone else’s CSS will hopefully find these tips helpful and time saving.

  • Padding or Margin? These two attributes are often used, and more often confused. The margin attribute defines the space around an HTML element’s border. The padding attribute refers to the space within the border.
  • Example:
    p.marginex { margin:20px; border:1px solid #ccc; }
    p.paddingex { padding:20px; border:1px solid #ccc; }

    This illustrates using margins.

    This illustrates using padding.

  • Class(.) selector or ID(#)? selector I explained the usage of classes v. IDs in an earlier post but this is something that still confuses people. Classes are used over IDs when you have something that might repeat on a page. IDs are used for unique items like header, navbar, container, footer. My rule of thumb: if there is a possibility for something to appear multiple times on the same page, use a class, if not, use an ID.
  • How do I deal with line breaks without tables? CSS is not for the light hearted, but using display: block and display: inline correctly will save many headaches. Remember, display is your friend. If you would like to have a line break after an element, a class or an ID, make sure to define display: block. If you do not use that, chances are you will have the code following that seep up into where it does not belong.
    will not even help you at this point. On the other hand, if you would like to create something like my post categories list (see above, right below the post title) and you want to put all the list items in a row, on the same line, use display: inline. display: inline also works out nicely when you are using multiple columns in a layout. Anyone who has tried to do this will smile at this point, because we have all seen the left column in position and then having to scroll down the height of the left column before the right column begins. Display inline will take care of that.
  • The “float” property Most people will have to use floats at some point when using CSS. Floats are most commonly used to float text around a graphic, like I often do here on jappler.com. Floats are also commonly used with using multiple columns in page layout. Jappler.com uses floats all over (header, navbar, columns, etc). By using a float, you can shift a fix width box to the right or left with the surrounding content flowing around it. (think magazine picture layout).
  • The “clear” property If you are using floats, you most likely will need to use the float property too. The clear property sets the sides of an element where other floating elements are not allowed.
    Ex. If you set clear to left, an element will be moved below any floating element on the left side.

Hopefully these tips/explanations will help you understand how to get CSS to work for you…and not so much you working for CSS.
[tags]CSS, margin, padding, classes, IDs, float, clear[/tags]

display:inline.

Instead of practicing my short game or enjoying the nice weather in the backyard on the hammock, I decided to spend my day yesterday squashing IE 6 bugs. Issue #1 and #2 that took me several hours to resolve: Everything displayed fine in Safari, Opera, Firefox, etc but not in IE 6 for the PC. The margins seemed to be doubled. If I used: margin-left:24px; everything would display correctly in Safari, Opera, Firefox, etc but if I dropped the margin to 12px from 24px, my CSS would display correctly in IE and IE alone. After a few hours of writing and rewriting, and rewriting, and getting really frustrated I decided it was time to research because I was no longer thinking clearly. I did a google search for “margin, CSS, IE” and the first link provided the solution. A simple display:inline fixed my problems and became my new best friend. I should have taken a step back after two hours…but I am working with very complicated CSS and so I thought I just had to be missing something in one of my IDs. Where was that crazy margin hiding? Thank goodness I figured it out! display:inline.
[tags]CSS, display:inline[/tags]

jappler v14.

Well, I have done it again, a slight redesign to the eye, but a major overhaul on the backend. I have pretty much converted all what once were graphics into text with CSS. I have been working on this for a few weeks now and when I get a few minutes here and there, I edit it and make improvements. I still have a few pieces (like getting the blog tab to stay highlighted when it should) to put in place to complete it, but it is mostly done. Some minor logic changes and I will be set. It was time to shed some of the graphic weight (tabs, right column bars, etc) and control to gain a more lightweight, easy to manage web design.
web sites that I found useful when re-designing jappler.com:

[tags]jappler.com[/tags]

time suck.

Some days are more fun than others. I did not have time to install Fedora Core 5 today, but will hopefully get that going in the next few days. Lots of work, but hopefully I will be able to wrap a few things up tomorrow. A big congrats to Doug as he is working on his first CSS web site! Rock on! I still cannot sing enough praises for w3schools.com for a reference, or learning the basics on HTML, CSS, SQL, etc.

Somethings interesting to note:

[tags]CSS, Blak, Google Finance, Phlink[/tags]

a fun day with CSS and HD.

Getting rid of tables is extrememly satisfying to me when working with HTML. Fewer tables: cleaner code, easier to maintain code (throw away those WYSIWYG editors), faster loading code, and personally is very satidfying after years of cluttered and extraneous code from GoLive. I spent a good chunk of time today getting rid of hundres of lines of table code per page by replacing the tables with simple lists and some basic CSS, and I feel very happy about the work I did today. I ended up reducing the lines of code by over 50%-60% on each page…and this is only round one of clean up! As I stopped for a few minutes to take a break, I checked out Apple’s HD gallery and was very impressed. Anyone questioning the quality of HD needs to check this out for sure! Also, anyone who wants to see some great footage ranging from seeing a space shuttle launch to a music video, check out the Apple HD gallery.
[tags]CSS, GoLive, Apple HD gallery[/tags]

css basics.

I had promised Doug I would have an upcoming post “that would change his life.”
Well, since I am busy with a few projects, I have not had time to devote to this post. Of course this life changing post will finally convert Doug from using tables to CSS for page layout. In the meantime, I thought I would get things rolling by explaining some of the basics.

Syntax: There are three parts to CSS syntax.

So, a generic example of CSS syntax: selector {property: value;}

Classes and IDs
Classes are defined by a “.” then class name. Ex: .class_name {font-weight: bold;} Classes give you the opportunity to have an HTML element have multiple looks with CSS. For example, classes are used a lot with paragraph elements to make certain paragraphs look different. In my latest design, I have two columns. The paragraphs in the left column have different line height, and different font properties than the right column so I created two separate paragraph classes: p.main {line-height: 1.5em; font-size: 1.25em;} and then p.side { line-height: 1.25em; font-size: 1em;} Note: when creating your own classes, you only need to use a class name like .jappler {property: value;}. When using just a custom selector (no HTML element), the style can be used for all elements. When you create classes for HTML elements, you will need to use the HTML element name then the class you want to use: h2.side {font-size:90%}. Also, remember that when using HTML elements with classes, that the “.” is placed between the HTML element and the class name, not before.

IDs are defined by a “#” then the ID name. Ex. #id_name {font-weight: bold;} The W3C defines class ID as “a unique identifier to an element.” IDs are mostly used for layout since you are should reference an ID once per page. Naturally, there are in most cases, one header, one footer, one menu, etc.

I am still confused, which do I use: Classes or IDs?

You should use IDs when there is only one occurence of it per page. (Ex. #header {background: #fff; height: 86px;} Use classes when there are one or more occurrences per page. (Ex. .center {text-align:center;}

Span Class v. Div Class
When first learning CSS, I was also confused about when to use span class="something"> vs. div class="something" . I soon learned that you should use span class where I used to use the font tag. I use a div class where I have other inline elements that I want to fall under the div.

So, for the beginners out there. Do not get too frustrated, just start out by finding a layout you like, and begin modifying it. If you are not sure what something does, look at W3 Schools. Once you know the basics, you can shed the cumbersome WYSIWYG editors for the text editor and web browser approach to design like I use.

Further Resources
Classes vs. IDs
W3 Schools
[tags]CSS, Divs v. IDs, span classes[/tags]

my other valentine: css.

Yeah, A has nothing to worry about, but I will not lie…I spent a good portion of this evening (while A was not here) with my other valentine: CSS. Why? CSS finally, after all these years showed me some love today. I have been cooking up a new CSS layout and the first check/browser check (6 browsers to start off with) not only validated but everything also looked perfect and worked in IE 6 for Windows and IE 5 for Mac. (Time to download IE 7 beta) I am not sure when I will have the layout/design ready for prime time as this is something I am doing “for fun” in between a few other projects. If things work out, I could have something ready by tomorrow or at the latest by next week. Time to spend sometime with A and the Olympics.
[tags]CSS, Olympics[/tags]