Archive for the ‘CSS Tutorials and Tricks’ Category

Newer Entries »

CSS – Sticky Footer

Saturday, January 10th, 2009

Sticky Footer ExplanationAlmost all websites out there have what is called a footer, or a block at the bottom of the page with quick links. For example, my website has a footer at the bottom of the page if you scroll down with links to major sections of my site. When I was looking into implementing this on my site, I ran into some problems. On some pages, the content didn’t fill the whole screen (which also varies with different screen resolutions, so the footer would be in the middle of the screen. Obviously, on pages where the content went past the bottom of the screen, this wouldn’t be a problem because the footer would be pushed to the bottom. So clearly, I needed a footer that would “stick” to the bottom of the screen if the content wouldn’t push it, but if there was enough content, then it would be below the screen bottom. I searched and searched for solutions, and I found one which I adapted just a little bit into my own implementation (in thanks, here is a link to his site, ryanfait.com.

Ryan’s solution was fantastic. However, I did still have some problems with it, probably because of my wrapper div that I used to center my content. So below, I have implemented my fix which I have tested in Firefox 2 and 3, Internet Explorer 6 and 7, Safari, Opera, and Chrome. The footer sticks to the bottom of the screen when content doesn’t push it that far, but goes to the bottom of the page when content goes below the fold. Below is the CSS and HTML for the footer with a wrapper as well. The sticky footer combined with a wrapper allow you to account for pretty much any screen resolution) too, which is fantastic! However, there is just one downside to this sticky footer, you absolutely MUST know the height of your footer. Luckily, there are not many cases where you’d be putting dynamic content into your footer.

First, the CSS:

html{
   height: 100%;
}
body{
   height: 100%;
}
div.wrapper {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -100px auto;
   /*The -100px mentioned above needs to be the exact height of the footer.*/
}
div.footer{
   height: 100px;
   clear: both;
   position: relative;
}
div.nudge{
   height: 100px;
   clear: both;
}

And now the HTML:

<html>
  <body>
    <div class="wrapper">
      Your main content goes in here
      <div class="nudge"></div>
      <!--The nudge div should remain empty and makes space for the negative margin assigned above.-->
    </div>
    <div class="footer">
      Your footer content goes in here
    </div>
  </body>
</html>

To see a working example of this footer, obviously you can look on this page (because I have one implemented here), or you can check out this example page that I made.

So yeah, it works pretty simply, though I must stress that every line of that CSS is important. You must declare a 100% height for the two parent elements of html and body (and if you have any other tags between those and the wrapper div, then you need a 100% on that as well). This forces the browser to use the whole screen. The three separate height declarations for the wrapper div are each individually important, including the !important addition. "!important" is a statement which makes that lines declaration take precedence over declarations that come after it. This however does not apply in IE, but that’s okay, because we want it that way for this Sticky Footer. Then most important is how the margins work. By putting a negative margin of the footer’s height on the wrapper, we allow whatever comes after the wrapper to overlap with it. The nudge div creates empty space inside the main wrapper so that when the footer overlaps exactly with the wrapper, nothing is blocked out. If you theoretically wanted a margin between the wrapper and the footer then make your negative margin on the wrapper 100px, your footer div would be 70, and give the footer a 30px margin on top. The nudge div would also still be 100px again to make space for the footer and its margin.

As a last suggestion, I usually put another div inside the wrapper div and the footer div, give them both a width of 990px and make them float left. The float with the full width will make sure that nothing (such as padding or a margin) manages to creep outside the edge of the wrapper or footer div. This is a safety precaution, but one that I highly suggest. If you notice a problem when you try to implement the sticky footer, this is the first thing that I would suggest.

UPDATE: A common problem that I’ve seen people run into when implementing this sticky footer is having trouble making your wrapper div take up a defined amount of space in the browser’s eyes. Floating (as discussed above), or the CSS display property help the browser know how big a div physically is. If the browser can’t figure that out, then the footer won’t align to the bottom correctly. Either add a float to a div immediately inside the wrapper, or add "display: inline-block;" as a style definition to the wrapper div.

Got any questions? Need help troubleshooting? Critiques are welcomed too! Post a comment.

Tags: , , , ,
Posted in CSS Tutorials and Tricks | 21 Comments »

CSS – IE6 Bugs and Hacks

Sunday, January 4th, 2009

In a few previous posts, I’ve mentioned the all too scary issue of cross browser compatibility. In particular, Internet Explorer seems to always come up, and even more specifically, Internet Explorer 6 (or IE6). There are dozens of bugs that arise with IE6 because of how the browser reads HTML and CSS. I’ve found the best solution when you encounter a problem with how IE6 renders your code, google it. But, to make things easier for some of you, here is a compilation of some of the most serious problems that I have encountered with IE6, and if their is a good hack or fix for it, I’ll tell you about that too.

1. Padding discrepancy:
IE6 and below calculate the width and height of sizable objects differently than other browsers. This issue is easy to demonstrate with the following example of a div’s css:

div.example{
   width: 100px;
   height: 100px;
   margin: 10px;
   padding: 5px;
   border: solid 2px black;
}

Normally, this div should be rendered as actually having a width and height of 114px (100px defined width + padding-left of 5px + padding-right of 5px + border-left of 2px + border-right of 2px). Though this might seem counter-intuitive, it actually makes sense when you consider wanting to define space for copy or images, but still have padding with a background color (for example). IE6 and below makes the mistake of still defining the width and height of the div as 100 each, meaning the actual usable space inside the padding and border is now down to only 86 pixels.

There are two fixes to this. One is avoid using padding, and use margin instead (which is not included in the same way that padding and border are) when working with objects with defined width or heights. This is what I tend to do, because it doesn’t require using a hack. However, this is not always possible, especially when you are working with divs that have background colors and text inside. So, the best hack I’ve discovered so far is actually the underscore. Yeah, that’s right, _ does wonders when put immediately before a CSS style definition because every browser except IE6 ignores that line. So what you’d want to fix the above problem is the following CSS:

div.example{
   width: 100px;
   _width: 114px;
   height: 100px;
   _height: 114px;
   margin: 10px;
   padding: 5px;
   border: solid 2px black;
}

IE6 will read the first width definition, but then correct it with the second, whereas other browsers will simply skip over the second definition, leaving you with uniform renderings for the div!

2. PNG transparency:
To bring you up to speed, PNGs are far superior to GIFs in every way but one: IE6 displays PNGs with transparency incorrectly. Obviously, there are two fixes yet again. One is avoid using PNGs with transparency and use GIFs when transparency is necessary. I personally do not want to do that because the transparency on PNGs is much better than GIFs (GIF transparency can look rasterized in comparison). The other solution is some handy dandy javascript. There are a lot of these out there. You can check out this one or just google “png fix”. The only issue with these fixes is they often cause problems with background positioning for images. Sadly, you’ll have to live with that bug if you want to fix the first bug…

3. Double margin with floated objects:
Let’s say you have a div that you float to the left for positioning. Then you give it a margin on the right and bottom to give it some space before the next object begins. IE6 has a bug where it will actually double the right margin because the object is being floated. This is incredibly annoying and 100% a bug (as opposed to a discrepancy in how the browser will render something). To fix this evil little bug, add a display: inline style definition inside the floating object. That won’t work 100% of the time, so if it doesn’t work, then use an _margin: definition with half the margin that you defined. For example:

div.example{
   float: left;
   margin-right: 10px;
   margin-bottom: 10px;
   display: inline; /*This will usually do it and is much easier to apply*/
   _margin-right: 5px; /*This ALWAYS works, but is more tedious and technically not valid*/
}

As discussed above, the underscore is only read by IE6 and below but will be ignored by other browsers. This should be used when display: inline will actually mess with your layout, or if for whatever reason it does not work properly.

4. Inability to center divs using auto margins
Centering a div is easy unless you are using IE6. Normally, a div with a defined width and a left and right margin setting of “auto”, will automatically center within it’s parent element. However, IE6 doesn’t like that. To fix it, add a simple “text-align: center;” definition to your html and body tags. This of course will center all of your copy, so add a “text-align: left;” to all of your other tags that might contain copy (p, div, h1, h2, h3, a, etc).

Got other bugs? Got other questions? Got other fixes? Post a comment! Also, check out the second installment of IE6 bugs!

Tags: , , ,
Posted in Browser Compatibility, CSS Tutorials and Tricks | 3 Comments »

CSS – Controlling Copy aka Text

Wednesday, December 31st, 2008

In a recent post, CSS – Back To Basics, I discussed the purpose of CSS and how to use tags, classes, and IDs to create style definitions. In the last post, Setting Up Your First External CSS File, I discussed generic tags you should define right away in your main CSS file. This time around, for you beginners out there, I’m going to write specifically about all the different options you have for controlling the look of text in your website (or as you should call it, “copy”).

When writing your CSS files, you should always define your standard tags (as discussed in Setting Up Your First External CSS File). Included in that list are your copy tags. Copy tags include anything that can define the style of your copy. Most notably is the <p> tag. You also have <a> for links and <h1>, <h2>, <h3>, et cetera for headers. You also may want to consider defining the generic style for copy in your <body> tag and because of cross browser compatibility issues with Internet Explorer 6, your <div> tags. You see, if you define what you want all your copy to look like in your body tag, say font-size, font-family, color, et cetera, then IE6 will not apply this to your copy if any other tags interfere with it. So when you define your generic tag styles, it would be a safe move to define your copy style in your body, div, and p tag, and if you want to be even safer, your html tag as well!

So here are your options for defining the look of your copy in your CSS file (as always, w3schools is a great source for all of this):

  • font-family: times, georgia, serif;
    you can list one font name, multiple with commas, or a generic name
  • font-size: 14px;
    you can use px, em, %, or a size such as small
  • font-style: normal;
    normal, italic, or oblique
  • font-variant: normal;
    normal or small-caps
  • font-weight: normal;
    normal, bold, or a scale from 100-900
  • color: #444444;
    color name or color hex code preceded by the pound sign
  • line-height: 16px;
    using a pixel size larger than your font-size will yield extra space between lines. This definition is actually a great hack for centering text vertically in a div. If your div is 100 pixels high and you have one line of text in it, set the line-height to 100px!
  • text-align: left;
    left, center, right, or justify

That is really the basics of what you need to know for your copy. You may also include background-color as something, especially if you want white text. But basically, there you have it, the best ways to control your copy!

You know, the best tool I’ve ever found for any web developer, beginner or not, is a firefox add-on called Web Developer. It allows you to do so many things, but right now, I am touting it because it allows you to edit the CSS of ANY website you are looking at! It is a great way to learn the ropes because you see changes instantly and accurately. Try it out! Until then, try to keep your copy clean.

Tags: ,
Posted in CSS Tutorials and Tricks | No Comments »

Setting Up Your First External CSS File

Sunday, December 28th, 2008

In a recent post, CSS – Back To Basics, I discussed the purpose of CSS and how to use tags, classes, and IDs to create style definitions. This time around, I’ll chat about setting up an external CSS file and giving it some basic definitions that you should always include in your main CSS file.

So first, let’s explain how to make an external CSS file. The purpose in doing this is to keep all your CSS in a separate place from your HTML. But why is that important? Well, for one, it will speed up the load time of your page for your users. Probably infinitely more important is that it is much more likely that most of the CSS you write for one of your documents will apply to another one. Why repeat it in the head of every page if you can just write it once? That way, when you need to make changes, it’ll be much easier.

Alright, so here is how you make a reference to an external CSS file. In your head section, put the following line of code:

<link href="main.css" rel="stylesheet" type="text/css" />

You can replace main.css with whatever you want to name your CSS document. Main is a good idea if you plan on having multiple CSS files (for large sites). For smaller sites, you probably only need one (for example, my website, www.davidjrush.com, has only one external CSS file (actually, technically it has two, one for the blog, and one for the rest).

You can make your new CSS file (for now, we’ll just assume you are calling it main.css) in a text writer. Change the file extension from .txt to .css just like you would change .txt to .html for an HTML file. Inside the document, you don’t need any tags, in fact, you shouldn’t have any! All you should write in this document is the style that you would have put in the head (but without the <style> tag).

Now I’ll discuss some basics of what you should have in every main CSS file you ever write for a website. There are somewhere around 80 tags for HTML, but only about 30 of them are commonly used. Of these 30 you should think about defining these basic tags: body, div, img, table, p, ul, a, and a:hover. The reasoning behind this is safety safety safety! Different browsers have different default settings for some of these tags. So the smart move is to give them all uniform settings from the start.

You may want to start your main CSS document with the following:

/*--this is a comment, you can put anything inside the star and slash--*/
body{
   margin: 0px;
   padding: 0px;
}
div{
   margin: 0px;
   padding: 0px;
}
img{
   border: 0px;
   margin: 0px;
   padding: 0px;
}
table{
   margin: 0px;
   padding: 0px;
}
p{
   margin: 15px;
   padding: 0px;
}
ul{
   margin-top: 10px;
   margin-bottom: 10px;
   margin-left: 35px;
   padding: 0px;
   list-style-image: url('image location');
   line-height: 20px; (gives spacing between list items)
}
a{
   text-decoration: underline/none;
   color: hexcode/word;
   font-weight: bold/normal;
}
a:hover{
   text-decoration: underline/none;
   color: hexcode/word;
   font-weight: bold/normal;
   /*make sure to change at least one thing from your a tag definition*/
}
a:visited{
   text-decoration: underline/none;
   color: hexcode/word;
   font-weight: bold/normal;
   /*make sure to change at least one thing from your a tag definition*/
}

Anything in red is just a comment to help you out. The first several definitions really just look at margin and padding. This is where cross browser compatibility comes into play. For example, Internet Explorer and Firefox have different default settings for margin on p tags. This will cause pages to render differently. It always seems like a safe bet to define your margin and padding for most anything. In an upcoming post, I’ll discuss defining your copy/text (which will include more specific information on p tags, a tags, and other similar issues.

You’ll notice in the links section, there is a definition for an a tag, an a tag being hovered on by the mouse, and an a tag that has been visited by the user. The latter two are called “pseudo-classes”. There are others, and they can be applied to tags other than the a tag, just so you know.

If you have any questions about this starter file, post a comment, or send me an email. Stay tuned for further CSS related posts.

Tags: , ,
Posted in CSS Tutorials and Tricks | No Comments »

CSS – Back to Basics

Sunday, December 21st, 2008

So, trying to get into the world of CSS eh? Well trust me, you’ll never regret this decision. CSS, or cascading style sheets, are the absolute best way of laying out your site while still providing an easy ability to completely change the look of your site with little work. So here is the lowdown on CSS:

CSS is a simple addition to any HTML file that you have. HTML tells the browser what to display with tags (<p>, <h1>, <a>, etc.). CSS, tells the browser what that content should look like by describing it with “style”. For a great rundown/tutorial of CSS, try w3 schools… and always, when in doubt, google it!

So let’s just give a basic example HTML file with some very simple CSS. This document shows you the style tag where you can put all of your CSS (this goes in the head tag). There are three ways of identifying what tags in your HTML get what styling, tags, classes, and IDs. Use a tag definition if you want all of one type of tag (such as a p tag) to be the same. Use a class if you’ll be using that same style for multiple items (i.e. if you want all the links in your header to look the same then use a class). Use an ID if you only plan on having one item with that style (a specific link needs to look different to have emphasis so it has different style). So this example is as simple as it gets. It shows you how to define the style of a paragraph tag, then change a group of paragraph tags using a class, and then uses an ID to make a specific instance of that paragraph tag.

The CSS and HTML

<html>
  <head>
    <style type="text/css">
      p {
        font-size: 13px;
        font-weight: bold;
        color: #000000;
      }
      .redText {
        color: #A60000;
      }
      #blueText {
        color: #1240AB;
      }
    </style>
  </head>
  <body>
    <p>This is a standard paragraph with bold text at size 13 and a grey color</p>
    <p>This is a second standard paragraph with the same styling</p>
    <p class="redText">This is a red text paragraph made using a class</p>
    <p class="redText">This is a second red text paragraph made using a class</p>
    <p id="blueText">This is a single blue text paragraph made using an ID</p>
  </body>
</html>

The Outcome:

This is a standard paragraph with bold text at size 13 and black text

This is a second standard paragraph with the same styling

This is a red text paragraph made using a class

This is a second red text paragraph made using the same class

This is a single blue text paragraph made using an ID

So you’ll notice in the inside the style tag there are three definitions: one for the p tag, one for any tag with a class of redText, and one for a tag with an ID of blueText. You use a period before the name for a class, and a # before the name for an ID. Don’t mix them up or your browser won’t read them.

Safe CSS practice will encourage you to put a p in front of your .redText or .blueText definitions. This tells the browser that that specific definition for redText and blueText only applies to p tags. Then if you gave a class of redText to a link, it would not follow that styling. Sometimes however, you want to apply the same styling to different types of tags. In that case, it is alright to leave it out. Basically, use your best judgment. If you are working with a huge website, then you will have a lot of CSS, so be specific and purposeful in your naming of classes and IDs (and probably use the tag name before your definition (i.e. use p.redText instead of just .redText). If you are working with a smaller site, then you can be a little more lenient in your CSS naming efforts.

Coming up, external CSS files with a step up in CSS.

Questions? Post a comment!

Tags: ,
Posted in CSS Tutorials and Tricks | No Comments »

Newer Entries »