CSS is a relatively simple language to learn. Mastering it, on the other, can prove a little more difficult. Compensating for various browser inconsistencies alone can produce a migraine. In this article, we'll demystify five of the most head thumping issues that you'll encounter when building web applications.
Why Are My Styles Not Effective?
We've all done this. You think to yourself, "Wow, this text would look great if it were bright red." (really??) Unfortunately, when you add the necessary styling, your text remains black. How come?
There could be a couple reasons why your styles aren't taking effect. Needless to say, it can be a nasty problem - especially for beginning CSS developers. First, pay a visit to your CSS file and make sure that there aren't any typos. I've wasted many hours dismantling my documents only to find that I misspelled a word. But, if you haven't banged your head against the wall at one time or another, you aren't allowed to call yourself a web developer! Most likely, you're dealing with a specificity problem. Try adding "!important" next to the style that isn't taking effect. If it suddenly works, that means you definitely have a "weight" problem. As a matter of good practice, never leave "!important" anywhere in your stylesheet. Simply use it as a way of debugging. Consider the following example:
1 |
|
2 |
#wrap #myStyle |
3 |
{
|
4 |
color: black; |
5 |
}
|
Because there is greater specificity here, the color will remain black. By including the additional identifier, "#wrap", there is more weight on this selector. Consequently, the first style will be disregarded in favor of this one.
How can we solve this issue? You should first check to see if the second style can completely be erased. If it can't, you'll simply need to add more specificity to your original selector. We'll go over the concept of specificity" in much greater detail shortly. Let's try adding:
1 |
|
2 |
#wrap p#myStyle |
3 |
{
|
4 |
color: red; |
5 |
}
|
Now, the text will finally turn red. By adding the additional "p" selector, we've added one more point, thus overriding any other styling.
What's The Difference Between Absolute And Relative Positioning?
Maybe more than anything else, positioning can prove to be an unnecessarily confusing topic for beginning to intermediate CSS designers. The best way to learn is to first tackle absolute positioning. Let's assume that we have a blank html and CSS document. If we were to then place an image absolutely on the page - say 100px from the top, and 100px from the left of the window's edges - we could write the following style...
1 |
|
2 |
img
|
3 |
{
|
4 |
position: absolute; |
5 |
top: 100px; |
6 |
left: 100px; |
7 |
}
|
Absolutely positioned elements are positioned in relation to their closest positioned parent elements. In this case, where there are no relatively positioned elements on the page, the image will be positioned in relation to the window.
Now, imagine that we wrapped a relatively positioned div around our image.
1 |
|
2 |
<body>
|
3 |
<div id="wrapper"> |
4 |
<img src="#" alt="Some Image" /> |
5 |
</div>
|
6 |
</body>
|
In order to set a positioning context, we must add "position: relative" to the styling of our parent div.
1 |
|
2 |
div#wrapper |
3 |
{
|
4 |
position: relative; |
5 |
background: gray; /*Just to see the borders.*/ |
6 |
height: 600px; /*Because the image is absolutely positioned, we need to force the height.*/ |
7 |
width: 770px; |
8 |
margin: auto; |
9 |
}
|
Now, when we absolutely position the image, it will be positioned "relative" to the "wrapper" division. Keep in mind that if we removed this property, the image would once again be placed in relation to the browser's window. The "position" property is key here.
Additional Resources
-
CSS-Tricks.com : Absolute Positioning Inside Relative Positioning
Chris Coyier goes over some practical examples that show exactly how and when to use positioning. Includes a demo and downloadable source code.
-
Digital-Web.com : Web Design 101: Positioning
"Let’s shed some light on the shadowy mysteries of CSS positioning. If your CSS skills are limited or even moderate, you will learn what you need to master positioning."
How Can I Compensate For Internet Explorer 6's Double-Margin Bug?
For those who are unfamiliar with the "Double-Margin Bug", if you float an element and then procede to add margins in the same direction as the float, Internet Explorer 6 will incorrectly double the value. In effect, a left margin of "100px" becomes "200px" in IE6. There are three different remedies that we'll review.
Change The Display To Inline. The simplest fix, discovered by Steve Clason, is to change the display property of your element.
1 |
|
2 |
#floatElement
|
3 |
{
|
4 |
display: inline; |
5 |
float: left; |
6 |
margin-left: 100px; |
7 |
}
|
Use Conditional Comments. Luckily, changing the display will fix that nasty bug. However, what if, for some reason, you need a different method? Internet Explorer allows you to target different browser versions by using "conditional comments". Add the following into the head tag of your document:
1 |
|
2 |
<!--[if lt IE 6]>
|
3 |
<link rel="stylesheet" type="text/css" href="ie6.css" />
|
4 |
<![endif]-->
|
In layman's terms, this code is saying, "If a visitor to your page is using Internet Explorer 6 or lower, import a stylesheet called "ie6.css". As a result, modern browsers will ignore this statement. IE 6 and below, on the other hand, will implement the file. Now, in our ie6.css file, we'll need to add some override styling.
1 |
|
2 |
#floatElement
|
3 |
{
|
4 |
float: left; |
5 |
margin-left: 50px; |
6 |
}
|
Since we know that IE 6 will double the margins on floated elements, if we reduce the value of the margin by 50%, it will fix our document. This method is particularly appropriate when you have many styles that are targeting IE6 directly. It's important to contain all of your "hacks" in a centralized location.
Implement The Underscore Hack. There are many ways to target older versions of Internet Explorer directly from our primary stylesheet. Generally, I prefer using conditional comments. However, if I only need to change a single property, I'll many times use the underscore hack. Consider this following:
1 |
|
2 |
#floatElement
|
3 |
{
|
4 |
float: left; |
5 |
margin-left: 100px; |
6 |
_margin-left: 50px; |
7 |
}
|
Modern browsers will cycle through these properties. When they come to the underscore, they'll skip the style entirely. On the flip side, IE6 will ignore the underscore and implement the new margins. What we end up with is modern browsers adding "100px" to the left margin. IE 6, respectively, will add only "50px".
Additional Resources
-
DustinBrewer.com: CSS Fix For The Double Margin Float Bug In IE6
Dustin offers a quick explanation for overcoming this bug. Be sure to check out his related tutorials as well.
-
PositionIsEverything.com : Double Margins
Make sure that you check out this easy to read article if you are still somewhat confused.
Is There A Way To Measure How Specific My Selector Is?
Absolutely! Yet, very few people know the exact equation. Many of you probably go by the "keep adding more identifiers until it works" method. Practically speaking, this will work just fine. But, you should know how to calculate the weight of your selectors never-the-less.
First, let's associate each type of selector with a value.
- Elements - 1 points
- Classes - 10 points
- Identifiers - 100 points
- Inline Styling - 1000 points
Let's try to calculate the weight of the following style...
1 |
|
2 |
body #wrap div#sidebar ul li a.selected |
3 |
{
|
4 |
random styling.... |
5 |
}
|
Referring to our calculator above, we'll dissect this selector. The body element receives one point. Next, we have an identifier (#wrap). This will add 100 points to the tally. Continuing on, we have "div#sidebar". How many points do you think this is worth? If you guessed 100 points, you'd be incorrect. You must factor in the "div" element into your weight. The correct answer is 101 points. The "ul", "li", and "a" elements earn one point a piece. Lastly, the "selected" class receives an additional 10 points. Adding everything up, we come to a sum of 215.
I recommend that you spend a few minutes and memorize this point system. It will save you a great deal of wasted time when you find yourself in a specificity dilemma!
Additional Resources
-
SmashingMagazine.com: CSS Specificity: Things You Should Know
For an in depth explanation of specificity, I highly recommend that you read this article from top to bottom.
-
StuffAndNonsense.com: CSS Specificity Wars
Learn the art of specificity in a fun "Star Wars" setting. This is a must read.
What Is The Best Way To Test My Site In Different Browsers?
A required step when you're working on a site is to review it in every modern browser: Firefox, Internet Explorer, Safari, and Opera. Step two is to test your site in older version of IE. I recommend that you download IE Tester, which will allow you to view your site in IE 5 - IE 8. The final step is to check all of the less common browsers. Visit BrowserShots.org to view snapshots of your site in every browser available.
Additional Resources
-
Mozilla.com: IE Tab for Firefox
Do you hate having to switch between IE and Firefox when testing your site? Why not download IE Tab?
Any confusing questions that I missed? I'm sure there are plenty. Leave a comment and I'll try to incorporate them into part two. I'm hoping to turn these "Question and Answer" style articles into an ongoing series.
