How to debug your css quickly in all browsers…
First of all, buy lots of computers and load every browser in the sun on them. Or if like me you find this a little unpractical then buy an intel mac.
First of all i’d advise to get everything looking good on Firefox - it is more standard compliant than the rest and is a great starting point to getting your css sorted.
- Download Firebug: http://www.getfirebug.com/
This is a great way to look at your CSS, and a lot more besides. It also allows you to edit your CSS (and html) right in the browser, allowing you to quickly try stuff out.
- Install Parallels and a version of Windows. With Parallels you can have multiple installs of Windows, allowing you to install every version of IE (each one will need a new windows install i believe)
- For IE download the IE Developer Toolbar. This gives you much of the Firebug functionality within IE
I always try and aim to solve any cross browser problems by finding a happy medium, rather than hacking about too much - this is often a bit of a nightmare when you want to change something later on, as you’ll have more CSS to change, and it increases the download size of your CSS. But here’s some hacks you can use to target IE (there are loads more, just google):
#css-id-tag {
padding: 7px 0 0 10px; /* for all other browsers */
}
* html #css-id-tag {
\padding: 7px 0 0 10px; /* for IE5 and IE6 in quirks mode */
p\adding: 9px 0 0 10px; /* for IE6 in standards mode */
}
Here’s a method of targetting the other way round which can also be useful, this particular example is for forms:
#edit-submit {
height: 55px; /* For all browsers */
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
form>#edit-submit { /* For non-IE browsers */
height: 0px;
}
Only bad CSS developers use hacks. It is possible to cater for all browsers without.
G Unit!
Not at all true, the Box Model is a massive problem if you’re creating pixel perfect layouts, look at this quote from here http://css-discuss.incutio.com/?page=BoxModelHack:
“According to the W3C, an assigned ‘width’ (and ‘height’) of a box refers to the ‘content area’ of a box only. The padding, borders, and margins are then added to this value to arrive at the total box width. If the ‘width’ property is omitted, the total box width is the same as the ‘content area’ of the surrounding container element.
All well and good. Unfortunately, all CSS enabled versions of IE before IE6/strict use a different box model. In that model, the padding and borders are counted as part of any assigned ‘width’ or ‘height’. In the absence of borders and padding, the two models agree. However, if a box has an assigned “width’, and if borders and/or padding are added, the standard box model causes the overall box width (between the outer border edges) to increase, while in IE’s model the ‘content area’ gets squeezed by the same amount. This is a major problem for proper page layout.”
Thats only part of it, once you start to do slightly more exciting things you sometimes have to get quite creating. Have a look into transparencies in gifs in IE, that’s quite a chunky hack to get working, but it can be done.
Another massive difference between all browsers is the way in which forms get rendered, that can involve all sorts of hacks if you really want to get everything the same
thats why you use two divs to produce for example a header area. the first one contains a width and height, then another div inside that houses the margins or padding. you should never have a div with a width AND padding\margin property.
good point iesu - that certainly helps the padding problem.