Four top CSS tips from the pros
It is the language of style that has transformed HTML into something beautiful, Web Designer tracks down four leading lights from the world of CSS coding and asks them to share a small sample of their knowledge with the masses…
Stephanie Sullivan
Coder, trainer, writer – www.w3conversions.com
Until CSS3 takes centre stage, background images can only be placed one per element. By using a second wrapper directly inside the first, you can add a second background image to create fluid layouts and irregular shapes. But be aware that many times it’s not necessary. Use the UL of your menu for the background. Hang an extra background image on a sibling or child element. Avoid a boxy look by putting the curve for the main body area into the header. Round the bottom of a faux column by placing its curved background into the footer. Create an illusion!
Stefan Mischook
CSS expert – www.killersites.com
The most important tool you have in your CSS arsenal: IE conditional comments. Microsoft smartly built into Internet Explorer from version 5.5 and up the conditional comments mechanism that allows you to solve the incompatibility problems between IE and the rest of the browsers out there. IE conditional comments basically allow you to insert code that only IE can read. This way, you can put in IE-specific CSS to make your pages look good in all browsers. You can watch a free video at www.killersites.com/blog/2006/ie-conditional-comments-video
Natalie Downe
Web developer/CSS specialist www.clearleft.com
Internet Explorer 6 sometimes doubles the margin on a floated element if a margin has been set in the same direction as the float. For example, #something { float: left, margin-left: 1em } may result in a visible margin of 2em instead in that browser. To fix this, add display: inline to that rule block. This will solve the problem in IE, while other browsers will ignore the display: inline because floating an element causes display: block to take precedence.
Eric Meyer
The godfather of CSS www.meyerweb.com
Use reset styles. Well, actually, start with a reset style sheet and then modify it to become a ‘reboot’ style sheet, one that has all of your personal default styles in it. That way, you can always start from the same place, having ‘rebooted’ browsers into being as consistent as possible, while also getting a jump on writing the styles specific to a particular project.
Keep an eye out for our Top 50 CSS tips coming very soon….
Nice tips,
An extra one, would be;
Build from the inside out. Put margins and paddings on the most inner element if possible. You will avoid many differences between IE and other browsers.
Good tips. I use Eric’s reset.css for all my projects.
I just finished reading Andy Budd’s CSS Mastery. All those points above are well covered in the book. Good read.
Very informative..
Natalie Downe has described it very well with example.
Easily understood…
Thanks to every CSS professionals
i do wonder why a css “expert” would make his top tip IE conditional comments. i build for IE, including IE6, and have never used a conditional comment, or any other hacks or filters. 99.9% of all browser inconsistencies can be solved, along with Eric Meyer’s tip, in your markup. and i would always rather have that extra div, or that extra span, rather than having css hacks, filters or browser specific stylesheets. providing, of course, that your markup is still valid and uses semantic css identifiers.
i’d like to think that css experts would promote standing back for a minute and seeing if you could try different markup and presentational ways to get your desired result rather than — as is too common the case now — immediately blaming the problem browser and adding some form of hack (conditional comments included).
incidentally, the .1%? form elements. but it’s very rare that the inconsistent padding that IE forces on form elements is going to wreck your layouts.
Thanks Natalie, great useful tip. Like it.
[...] CSS Tips from the Pros [...]
What's your opinion?