For you now, the best questions might be when you don’t understand a specific line of text or about what’s going on in a specific example.
I thought your client was Swedish, but that you were Finnish. Or are you a Swedish-speaking Finn? : )
Thanx for all answers! If I just got time to look through them all… 
Do understand that it will take several homepages to learn just the basics, and then you´ll never will be fully learned. It is just hard when I code webpages just to myself (and sometimes to friends).
Tihii… My native language is actually Swedish, but that´s just a little thing (still the same that it isn´t English). 
I have to say that sometimes it feels easier to get just one person´s opinion/advice on something and then go to others for more solutions after a while (this is the case at least for me).
And yes, I do have different screens that I use, depending if I use the laptop or the computer (“at the desk”). The laptop´s resolution is 1366x768 and the other is 1280x768… But I usually work with 1024x768 when it comes to looking at the homepage that I´m working at for the moment.
Is this not a common problem, since the screens resolution various today so much? What resolutions do you work with and what widths do you use for the webpage (in common)?
Thanx for those links, Poe!
I think I am too afraid to ask so much, since most of the time questions have already been asked, but I can´t understand that or I can´t find the threads. Somehow it´s easier to understand the answer, for me, when I ask the question myself. And of course, the language barrier comes sometimes against me. 
Hmm… as usual it´s difficult for me to be short…
Hi photomoon, definitely stick around! And, yes, it will take more than one website to get a handle on this. Took me 3+ years, and still learning.
Guys, the native language here is Finnish so possibly British terms would help. Instead of “period”, “full stop” and “.” might work better.
I just thought of a place where you can “see” a lot of these problems…
http://www.brunildo.org/test/
He just writes the code, so if you look at his pages in IE6 and IE7 you see the bugs he means with your eyes.
Make your browser smaller when you do this… I didn’t know you’ve been doing this all along with a bazillion pixel-wide screen!
I’ve been talking for a while with photomoon via PM on another forum but one problem is I’m not always clear… another is, I’m not always right… and another is, "see"ing the bugs as they come.
I started learning on just one site. I learned a lot, but I learned more as I did other sites. I read articles floating around on the web. I asked a LOT on forums (esp DigitalPoint back when deathshadow, Dan and Gary were regulars over there) and learned a lot online.
I wouldn’t have been able to learn online without first going through Ian Lloyd’s book though.
Enclosing floats makes more sense when you see it:
Firefox not enclosing a blue float:
http://stommepoes.nl/photomoon/fffloats.png
But IE7 is enclosing the blue float because the pink box has Layout:
http://stommepoes.nl/photomoon/ie7floats.png
And of course IE6/7 haslayout (code below will trigger it (based off Ralphs))
#wrapper{zoom:1;}
That specific code is for browsers that understand the pseudo element :after which rules out IE6 and IE7. However the rest of the clearfix code targets IE6 and 7 by ensuring that IE is in haslayout mode because in that mode it will aut clear its child floats.
What does it means in this article about the “Tony’s method originally used “overflow: hidden;””? Was the overflow:hidden; in the code aswell?
Originally the overflow:hidden was an attempt to hide the dot but failed on some browsers so it was changed to the method presently in use.
Read this thread for a through discussion ion clearing techniques.
When I first started with CSS and when I was noticing if CSS is not behaving as I wanted, I usually eliminated parts of the code, then refresh my HTML file to see if the problem is solved. If not, I put back the eliminated code, then remove another part of CSS. If the HTML file upon refresh is behaving as it should, than the last removed part of CSS is something that makes the problem. That would’ve helped me focus on finding the bug.
Most important CSS rules are those that will help you set out the base structure of the side (like positioning, margins and paddings, widths and heights, floats ect.). There is no particular order you need to focus.
Don’t worry you will remember most of the CSS rules with months of practice
Hi Welcome to Sitepoint 
It can be daunting at first when starting CSS as you not only have to remember the CSS rules you have to remember the browsers differences and bugs also.
Luckily, many people have already been there before you and these days all the old bugs are well documented and the answers are already out there but the trouble can be in identifying what the bug is when you are new to this.
I suggest that you read through the FAQ at the top of the forum where most of the common problems are documented and eventually you will start to remember what the bugs are.
The Sitepoint Reference has some sections on haslayout and collapsing margins that you may also find of interest. It is also important to know how things should work so read through the reference and try to understand how a property is supposed to work and what it can do. Too often people use things in the wrong place and wonder why they come unstuck.
Also read through the posts on the forums and you will see the same questions cropping up time and again and soon you will remember the answer yourself. Look at the answers that some of our established members are giving as they often go into a lot of detail as to why something needs to be the way it is.
CSS isn’t difficult but it does have rules that must be obeyed and you need to understand them and their limitations in order to move forward n the right direction.
Lots of practice and eventually the experience will come.
Thanx to both of you!
I have the most problem(s) since I use floats (?) to know when there is margin collapsing, overflow, contained floats, enclosing floats and what “wrapping the floats” means…
The hard part is for me to remember the “faults” and the “rights” when I´m doing a new webpage. Do have to confess that I´m struggling with my first webpage at the moment (and I´m having the time against me, since it´s a clients webpage, that wants the webpage as soon as possible…).
And I also have a personal issue; I´ve noticed I learn by doing, and that´s why this is so hard for me, I have just this one webpage that I´m doing and don´t get how to come familiar to all things I have to learn since I don´t have any webpages to do exept for my personal webpage I´m going to start doing when I´ve got the company ready. Sorry, if too much information.
One of the problems is the margin collapse.
Is it a browser problem (that it looks different in different browsers (I try to at least see in FF and IE6-8)? Or is it a coding problem?
How can I in that case see what/where/how the problem is?
And as so many times been said, it´s a experience-thing to learn something…
Do have to ask how to use the FAQ. I tried to search for “margin collapse” but no answers came… and did it for many other things. 
You are so right Paul when you talk about the importance of knowing the things and how they work and what it can do. I am there at the moment and want to learn that.
The faq here goes into a little details here.
Wrapping a float means that if you have a parent element that contains only floated children then the parent element will have no height at all because the floated children are removed from the flow. In these cases you need to use a clearing method (such as overflow:hidden on the parent) to contain the floated children and drag the parents borders around the floated children.
The hard part is for me to remember the “faults” and the “rights” when I´m doing a new webpage. Do have to confess that I´m struggling with my first webpage at the moment (and I´m having the time against me, since it´s a clients webpage, that wants the webpage as soon as possible…).
And I also have a personal issue; I´ve noticed I learn by doing, and that´s why this is so hard for me, I have just this one webpage that I´m doing and don´t get how to come familiar to all things I have to learn since I don´t have any webpages to do exept for my personal webpage I´m going to start doing when I´ve got the company ready. Sorry, if too much information.
Rather than struggle for hours with a problem just ask here for help and someone will put you right very quickly. In that way you will learn what the problem is and what the best fix is also.
One of the problems is the margin collapse.
Is it a browser problem (that it looks different in different browsers (I try to at least see in FF and IE6-8)? Or is it a coding problem?
How can I in that case see what/where/how the problem is?
And as so many times been said, it´s a experience-thing to learn something…
Margin collapse is explained in the link I have given below and don’t worry because a lot of experienced coders still don’t understand it properly which is why I recommend you taking time to understand the detail.
Do have to ask how to use the FAQ. I tried to search for “margin collapse” but no answers came… and did it for many other things.
You are so right Paul when you talk about the importance of knowing the things and how they work and what it can do. I am there at the moment and want to learn that.
The CSS Faq is here and the topics are listed in the first thread.
Margin-collapse is covered in detail here in the reference.
Haslayout is covered here.
Hope that helps a bit
Welcome to SitePoint! There are a lot of CSS “cheat sheets” out there. Here’s one:
http://lesliefranke.com/files/reference/csscheatsheet.html
and another:
http://webdesign.about.com/od/css/a/css_cheat_sheet.htm
And one for CSS3:
http://www.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/
Combine these with the SP reference material Paul has provided, and you’re off and running. Don’t hesitate to post specific problems or questions here.
Oh my… I started to take a look at Sticky Threads-link you gave me Paul O´B (starting with floats), and stumbled against a problem already in the beginning.
You say “You will see that in IE6 the float is nearly off the screen while in mozilla its in its correct position.”. Well, my IE example is not at al “nearly off the screen”. Here is a example of my FF and [URL=“http://www.bluechalo.com/tests/floatmarginIE.jpg”]IE6.
Are they correct or is there something wrong with these?
And the display:inline; is put there because of the IE?
In the FF the box is right?
![FF and [URL=“http://www.bluechalo.com/tests/floatmarginIE.jpg”]IE6](http://www.bluechalo.com/tests/floatmarginFF.jpg){kind=link}
I just loved the fact that you´ve put examples in your explanations. It soooo much easier that way, at least for me.
And next question, the three pixel jog…
Do you have any example how this is in practice, without doing any hacks to it?
What can the static content be? What does it mean? 
I do have to admit that I didn´t understand a word, when it comes to understand context.
Gaaah, I came this far and I don´t understand a word of what is explained… Did understand the part of the “trilogy of techniques”…
And next… an example of the “float drop” would be good, for me at least. I don´t get this either. Gaaah, am I stupid or am I…?!? :mad:
You have a big screen
Yes Firefox is the correct display and you can see that the box in IE6 is double the distance from the left due to the double margin float bug. The display:inline fixes this bug for IE6 without causing harm to any other browers and can safely be added to the floats as required.
Any float that has a side edge adjacent to it’s containing block will exhibit this double margin bug.
In IE6 if you have 2 floats at 50% wide you will find that as you close or open the window one float will drop down below the other one at every odd pixel window size. This is due to the browsers rounding the mesuremets up and 50% + 50% = 100% + 1px which is too big to fit and so one float must drop below the other.
Just try it with 2 floats.
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.float1 {
width:50%;
float:left;
height:300px;
background:red;
}
.float2 {
width:50%;
float:right;
height:300px;
background:blue;
}
</style>
</head>
<body>
<div class="float1">Float1</div>
<div class="float2">Float1</div>
</body>
</html>
You can see an illustrated article here that explains it in detail:
http://www.positioniseverything.net/explorer/threepxtest.html