Crib sheet.
Welcome to my crib notes section. These are mainly for my benefit but I have learnt so much from other people's notes that it seemed only right to put them on the web. If anyone has had these problems and would like to email me with better suggestions then please do! It's great to know when people have found these useful or have their own ideas.
A few notes about PNG
Now semi transparent pngs are supported in IE7, it seems like a good idea to explore the png potentials again
Conditional Comments and Haslayout - (internet explorer).
Since I've discovered conditional comments and haslayout, I have found that I am now building sites much quicker.
I know that some people will say conditional comments are another form of hacking but it's the browser that isn't following standards in the first place. Being able to separate the problem and specifically target a browser feels right to me.
Min and Max width in IE 5 and 6 (expressions) - Strict Mode
IE can't understand Max and Min-width. I don't like to have to use expressions in the CSS but there seems no better way.
Explanation here of how to achieve max and min width in IE in Strict Mode
IE Double float bug - (internet explorer).
If you float an element in the same direction as its margin it doubles that margin. There is a very simple fix for this and I have not come across a problem with it (yet!). Display the floated element as inline.
See this link for a good explanation of the double floated bug
Clearing a float with no extra markup.
There is a great explanation of how to clear a float with no extra markup here. However, I found this to be a bit too much of hack for the CSS. Using a DIV with a "break" inside doesn't take up any space but I have found in some circumstances this doesn't work
A very simple way of clearing a float with no extra markup has appeared here but looking through the comments this is not perfect. Worth checking back here every so often.
Also, something that is worth remembering is that if you have an element that contains floated elements and you want the container to stretch as far its contents then you can float the container.
Class versus id
A class uses "." (Eg .container) an ID uses "#" (Eg #container). The main difference is that a class can be defined more than once and an id can only be defined once. Another way of thinking about this is ID = identifier and class = classify
Font size.
I was having a problem where text on the Mac I use to test with was much smaller than that on the PC. A bit of umming and ahhing later and I found the default size had been set to 12px (preferences > font-size). I did learn a few things on the way though that are useful.
Most modern browsers are set to 16px default font size. 1em = 16px.
If you really wanted to you could force each browser to set it's default to 16px by setting this in the body. You would then have to set IEWin back by setting a percentage. This can be done like this:
font-size: 100%;
}
html>body {
font-size: 16px;
}
If you want to set the font-size to 10px default you could set the body size to 62.5% and then 1 em would equal 10px. This could make it easier to scale after. http://www.clagnut.com/blog/348/
Anything below 10px (on my Mac at least) is illegible but I can't see me ever needing to go that low.
Background image and colour problem in safari.
If you mix the background position units then safari (1.24) messes up.
I tried using "background: blue url(/image.gif) repeat-y 130px top". This caused nothing to show at all.
This is fixed by using the background position of 130px 0px. Strangely using "border:none" also fixed this.
Image Replacement
As far as I'm aware this is one that has yet to be solved with no draw backs.
The best one (in my opinion) is the Dave Shea Enhancement of the Gilder/Levin Method. This solves the problem of images off and css on.
The only drawbacks are that it requires one extra span and you can't use any transparency within the background image. I suppose the only real problem with this then would be that you can't enlarge the text. It's a shame background-size is not supported or we could set it in em's.
My thoughts are that usually if I am using this for a header than the text in the graphic is going to be fairly large anyway. Also, with CSS off, the image would disappear and they could increase the font-size
Tip - State the absolute position or netscape 6 messes it up.
Font-size not inherited in tables on IE 5.5
I set the font-size in the body to 75%. This would set the font-size to 75% of whatever the browser default size is which is usually 16px. However, on IE 5.5 this is ignored and the font-size stays at 100%. This is fixed by setting the font-size back to 100% for all tables.
In a way I would have thought that if IE 5.5 misses the body size then setting it to 100% would make no difference but thankfully it does. All the other browsers should set the 100% back to the 75% body size so there is no need for the IE 5.5 hack.
Comments before the doctype messes up standards / quirks mode in IE 6
I put a comment before the doc type declaration and noticed that the box model for IE 6 had turned into IE 5 (padding and border added inside content area). I think this had made the page render in quirks mode. The validator was still validating as strict but if I put the comment after the doc-type the box model sorted itself out.
Multi classes
It is possible to put more than one class on a single element by using class="one two three". You Just need to separate them with a space.
IE white space bug
Shouldn't happen but it annoyingly does. When creating an unordered list and setting the links to display:block, IE adds an extra line when there is white space within the source code
You could just delete this white space but that makes the list hard to edit
One solution suggested by Andy Budd is to set the LI to inline but this messes up IE 5. I think this browser needs the LI set to block to add margin / padding
The Best solution I have seen is on the Hicksdesign website. Set the link to float:left and clear:left. I found Netscape 6 had a problem with this but as suggested I then wrote li>a {float: none;} which IE does not understand so sets everything back to normal
Photoshop CS - New install stopped thumbnails working
After installing CS I couldn't see my PSD thumbnails on windows explorer. You can see them through Photoshop but that's not ideal.
Easy to fix you need to stick the psicon.dll into Programfiles/ Commonfiles / adobe / shell.
Align a horizontal list to the right
Due to browser problems this is not as easy as I first thought. My solution to float a list right is here
Last updated January 2008