CSS is an important part of any web designer’s skills and therefore it’s extremely important that a designer understands how block elements and inline elements work together and how they can be styled using CSS. This article will explain the default display values of the most commonly used HTML elements whilst part two of this article will explain how CSS can be used to alter the display and visual appearance of these elements.
Block and Inline elements: Part one
IE CSS Conditional Comments
Consistency across browsers is obviously extremely important and Internet Explorer 6 just won’t go away so unfortunately from time to time we need to use hacks to get around certain bugs and that’s where conditional comments can come in extremely useful.
Accessible CSS Contact Form
Forms are probably the most misunderstood areas when it comes to accessibility however with a properly marked up form it isn’t difficult to create form elements which can easily be styled using CSS.
Which browsers to support?
It’s a question that I often find people asking and unfortunately there is no right or wrong answer as it can vary from site to site depending on the market and the types of users it attracts, however there are usually similarities that are consistent amongst users of the web.
Opera 9.5 Kestrel Alpha
The Alpha version of Opera 9.5 was released today so I had to download it and give it a try as I have done with the latest versions of Safari 3 and Firefox 3.
Are we getting carried away with CSS3?
I’ve been trying to catch up a lot recently with the progress of CSS3 and how it can be used positively to improve code and simplify both the HTML and CSS.
CSS.info is a great resource for this kind of information and a lot of the content is useful, but the recent post on Lists to get more decorative which contains information on the new lists module got me thinking that some of the modules being talked about may not be all that useful and we might just be getting carried away with the buzz and excitement.
Box model hacking
There’s always been different rendering issues within different browsers. From the problems with Netscape 4.2 and Internet Explorer 5 right upto the differences today with Firefox and IE7. But one of the biggest problems that always seems to crop up is when a website has to support IE5.x and the issue of the box model versus the broken box model.
Converting px to em or percentage
I’ve always created font sizes and elements of a page that I need to resize in % or em but when you’ve created a mock-up of what the site will look like in Photoshop then it can sometimes be a bit of a pain trying to figure out what size % or em you need to use in order to replicate your design within a web browser. Continue reading
3 Column Fixed CSS Layout
Last week I added the 2 Column Fixed CSS Layout example to the site.
The 3 column fixed CSS layout is very much the same except for a little extra markup and a few changes to the CSS to make the space for the extra column. Continue reading
CSS3 Selectors
Whilst we’re still some way off being able to adopt CSS3 fully within web design. It’s certainly worth being aware of it’s capabilities and it would be great to start using it for those browsers that support it whilst ensuring that pages degrade gracefully for those that don’t.
If enough sites started to use the technology then surely the browser manufacturers would have to step up their attempts to support it with or without the W3C specification completed.
Obviously this could throw in complications with different browsers having different understandings of how to support CSS3 but for these CSS3 selectors at least, it seems as though all modern browsers support them. Continue reading