CSS [25 post(s)]

08 February 2010 - 11:04

Difference between div and span element when coding CSS

I remember having prepared an blog post covering this topic, after a question during one of my courses... However it never saw the light because there's always so many things to accomplish at the same given time.
But never despair as it says: recently an article was published on Sitepoint on this matter. Which triggered also an interesting debate.

Nice reading if you're in the CSS business.

(0) Comments ·
20 September 2009 - 12:12

Centering horizontal menu in CSS

Rob Glazebrook recently posted a sample of a super simple horizontal navigation bar with CSS.
It's always great to have simplicity - something which isn't always the case, especially with CSS - so I'm just promoting the approach here as well :-)

Along the post someone asked for a solution to center the horizontal menu in CSS.
Well centering in CSS is also something simple generally; you basically put the object to center in a container which you style with auto-left and right margins. Something like

#menuHolder {margin:0 auto;}

Of course with menus you can always expect 'unexpected' behavior; so for some robust techniques on the matter Stu Nicholls is your man - he has been tireless in publishing huge amounts of code on his site; You'll find two very simple implementations of this technique over here:

(0) Comments ·
23 July 2009 - 14:28

Mind Map on web development

I've been working lately on a first version of a mind map on web development.
A kind of a blueprint really for some of my courses, based on my experiences, on what I've been reading and studying myself, on all kind of resources and what I happen to process as 'highlights'.
And of course all excuses making me go through the tons of materials spread all over my office are good indeed - so I'm happy too having allocated some time to this as well :-)

The map covers a whole range of fields or themes linked to web development and web design, with all kind of resources - I intend to develop it further when doing my courses, with time, but as I know some people have requested for a download already...here is version 1... as it says a very first version :-)

mind map on web development

Downloads

All feedback, suggestions and input of course more than welcome !

18 July 2009 - 05:48

Quality resources for web development and web design

During the last past months, my dear web developer friend Jaydev - currently much into the topic of usability - has kept on forwarding me so many links on the topic of web development and web design, that I felt I had to do something with it. Actually I was wondering even at the first place where he keeps on finding the time to go through all these resources !

So as I'm into the preparation of some web development courses, I grabbed the occasion and went through them once again, categorized them a bit and so for whoever may take benefit from or find them useful too: a nice collection of quality resources to improve the quality of your web development and web design works...

ps now who knows when I'll take or find the time to add all those nice ones hidden in my own bookmarks... but then also : who would have the time and the need to go through them anyway :-)

ps2 Well i've started adding some of my own resources too I noticed... :-)

[Read more on Quality resources for web development and web design...]
(0) Comments ·
03 July 2009 - 16:53

Should I or should I not …. install IE8 of course !

The beginning of July brought an interesting choice when logging on to my PC: windows update apparently wanted to install Internet Explorer 8 (IE8) !

IE8 logo

Ha ! There it was - as of course I had been following the topic since a couple of months and witnessed the problems with the upgrades to IE8 - and, of course, I didn't allow automatic installation. Luckily we're still offered the choice - after all :-)

Now I must say immediately I can only be in favor of IE8, as in terms of CSS, it's definitely adhering standards better than all the earlier versions all together. So I can only be happy with its venue.
Nevertheless some care is definitely on its place here, as there seem to be all kind of possible pitfalls during the installation process, there are performance issues to consider too, but most importantly I have to consider testing, as I basically use IE for testing only - and yes indeed: we now have this wonderful transition period of IE6, IE7 and IE8.

So this is what I've decided to do: nothing basically, that is on my main PC with Windows XP - I'll give IE8 a tryout a bit later this summer on my Vista driven portable.
And I'll use IE Tester for my (CSS) development, along with Multiple IE.

If ever you're after some materials to make up your strategy:

Some experiences and/or tips

Tools

(0) Comments ·
16 June 2009 - 16:11

To CSS or not to CSS: Object Oriented CSS

I knew it, but couldn't really put the exact wordings on it.
There must be another way to CSS.

Because looking at the talk Nicole Sullivan did for the Yahoo Developer Network Theatre, I have to admit : I did it too - I am co-responsible too in having contributed to following observations regarding CSS:

  • CSS requires quite a bit of expertise : yes I've been writing good semantic stuff, but web developers over there had hard time to understand with basic CSS knowledge...
  • File size just keeps getting bigger: yes to solve issues, match design requirement and so on, I've seen the sizes of my CSS files growing...
  • Code reuse is just not happening: yes it's true, I haven't made that extra effort to ensure that code for returning parts would be completely and easily reusable...
  • Code is too fragile : well indeed I was already happy if I could get it all together in a semantic way for all browsers...

And some other good practices

So her talk was on 'Object Oriented CSS' for high performance web applications and site and summarizes 2 of the main proposed principles nicely as follows -:

  1. Separate structure from skin - separate the CSS to layout, position, structure including browser compatibilities etc. from how it should look like
  2. Separate container and content - separate the CSS for the object, the placeholder, the container from what should go in, so that anything can go in
Teaching Object Oriented CSS [Read more on To CSS or not to CSS: Object Oriented CSS...]
(0) Comments ·
17 March 2009 - 13:40

Definition lists to style a multimedia listing of flash videos

I did ponder about using a definition list to provide some good x-html for a multimedia project, it, but finally gave it a go.
I came up with something which worked great in all browsers, including IE6 (yes still considering it a couple of months for now :-) )

And although I couldn't stop myself of not considering it a fully appropriated use of semantic html, I still found it very useful to consider definition lists to style this multimedia listing of flash video items.

Code

<dl class="mmItem">
     <dt><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. </a></dt>
     <dd>
           <object data="http://www.youtube.com/v/Iu68UXU7UUs&amp;hl=en&amp;fs=1" type="application/x-shockwave-flash" width="150" height="125">
           <param name="movie" value = "http://www.youtube.com/v/Iu68UXU7UUs&amp;hl=en&amp;fs=1" />
           </object>
          <span class="mmRating"><img src="images/stars_5.gif" width="75" height="14" alt="Rating" /></span><span class="videoItem">&nbsp;</span>
    </dd>
</dl>

CSS

#mmItems { float:left; margin: 0; padding: 0; clear: both; width:100%; overflow:hidden; } /*IE7 */
.mmItem { float:left; position: relative; margin:0 6px 15px 6px; top: 5px; width: 325px; left: 6px; min-height: 125px; }
.mmItem object{position:absolute; left:0; top:0}
.mmItem dt, .mmItem dd { padding:0 10px 5px 160px; margin:0; }
.mmItem dd {}
.mmRating { float: left; display:block; line-height:25px; padding: 2px 0 0 0; }
.videoItem { background:url(images/videoItem.gif) no-repeat center center; width:30px; height:20px; display: block; float: right; line-height: 25px;}
.audioItem {}

Afterstudy

Afterwards I did some research on using definition lists in such situations. Which reassured me actually, as these (older) samples confirm the use of multiple dl-elements.

(0) Comments ·
26 February 2009 - 15:56

CSS Grid Systems

Through an article in Sitepoint recently, I got into exploring some 'grid systems', which can come in handy when doing some new site layouts:

Some in and outs of these systems, so advantages and disadvantages are discussed in the annexing blog postings.

I've added these also to my overall CSS links page, which btw is regularly updated.

(0) Comments ·
07 February 2009 - 03:49

direction:rtl breaks CSS layouts in IE

Gosh, having to do a some Hebrew web sites, I was quite happy to find out that working with the {direction:rtl} actually works quite nicely. Even IE seemed to behave rather well, till of course I had to tackle some more complicated design with floats - there IE6 broke the whole design. I used every possible tool to hack IE6 I know about - there's a whole list by now - but nothing seemed to work.... Despair !! :-)

Luckily enough there's some wonderful developers out there, publishing wonderful articles and even though this one is years old, it did provide the solution: the workaround is to override direction for floats and re-apply it to elements that contain actual text. Go to Aleksandar Vacić 's article for a full explanation.

(0) Comments ·
04 February 2009 - 14:49

Align numbers in tables with CSS

How to align numbers in tables with CSS, without having to apply a class selector on each and every td-cell?

Well luckily enough HTML provides the col- and colgroup-elements which can be used to address tables.
Suppose you have a table with 4 columns and you'd like to align the three last columns with figures to the right (leaving decimal aligning aside here as this is not really possible yet with CSS)...
You could start with following HTML coding.

<table width="90%" border="0" cellpadding="0" cellspacing="0">
<colgroup>
<col>
<col class="tableFigures">
<col class="tableFigures">
<col class="tableFigures">
</colgroup>
<tr>
<td colspan="4" class="tableTitle"><h3>Population en Europe</h3></td>
</tr>
<tr>
<td>Albanie</td>
<td>3422</td>
<td>119</td>
<td>0,6</td>
</tr> .../...
[Read more on Align numbers in tables with CSS...]
(0) Comments ·
14 January 2009 - 16:50

What to do with IE6 in 2009?

Well yes with IE8 coming up, you might wonder what to do with IE6 ; not always easy to answer as long as some major businesses or organizations still use this browser.
So a podcast and some links may be of inspiration:

(1) Comments ·
09 January 2009 - 15:39

Styling ordinary lists with CSS (combinded with IE6 and strict DTD)

Problem

In summary: in a large organisation some webmasters need to be able to add and style lists in html documents created from templates - their main browser is IE6 (yes... it does happen :-) ).
The technique of zeroing out all margins and paddings has been used here and bullets were removed by default by the main design for easiness of styling the templates.
Contextual selectors have been added to the main CSS file (see sample code), so that when html lists are created, ordinary bullets or numberings appear as desired - the only requirement for this is to apply the appropriated class selectors

there's a problem

[Read more on Styling ordinary lists with CSS (combinded with IE6 and strict DTD)...]
(1) Comments ·
21 December 2008 - 12:45

Selectoracle : English (& Spanish) translations of CSS2 and CSS3 selectors

Css Select Oracle

I've bumped on this one today, through a CSS book: an online CSS selector dictionary, so to say.
From their intro:

Ever wondered what a particularly complex CSS selector really means? Here's your chance to find out! Simply enter one or more semi-colon separated selectors or rulesets into the following "Direct Input" area, or provide the URL of a stylesheet in the "URL Input" area. Best of all, the SelectORacle will flag potential errors and other problems, and it won't choke on any actual rules. You've always wanted to know what makes those line-noise posers tick-- now you can.

The link: http://gallery.theopalgroup.com/selectoracle/.

(0) Comments ·
07 May 2008 - 16:17

A Guide to CSS Support in Email

Or how to survive Outlook 2007's rendering limitations?

Writing and developing html email hasn't become particularly easier over the years - on the contrary, the new version of Outlook, Outlook 2007, virtually forces the developer to go back to table based design or use design methods which had been abandoned already.

Whilst searching some information on which email programs still support background images, I bumped on this very comprehensive overview on this matter: A Guide to CSS Support in Email - Last years's version is here: A Guide to CSS Support in Email: 2007 Edition.
You'll find some links on which CSS selectors are not supported anymore in Outlook 2007, but especially also an overview of which properties are supported by which email client - great information !

Equally great is Campaign Monitor's Guide for the Web Designers wanting to survive the html email saga, full of interesting resources really.
If you're after a comprehensive list of what Outlook does render (or read Word 2007's rendering engine), try this overview at MSN.
Yet another ‘enlightening’ & interesting must read article on the use of html email: based on Sitepoints' experience when revamping their email newsletters...

Update

There's a commercial preview tool now available: http://litmus.com/

(1) Comments ·
01 May 2008 - 15:27

The future of CSS…

Every now and again someone publishes a post or an article triggering off interesting and/or wild and/or animated discussions, clearly indicating and clarifying the current state of affairs on the topic.

Kevin Yank from Sitepoint recently published an interesting post on CSS Gradients, Transforms, Animations, and Masks, clearly demonstrating what the potential of CSS can be, but also triggering of all kind of remarks and considerations on it's development.
Worth reading !

(0) Comments ·
20 March 2008 - 16:45

Attribute selectors and CSS3

CSS3 is bringing all kinds of beauty to the web development environment - like the use of multiple backgrounds on the same selector e.g.
Although many of these features aren't really implemented properly by most of the browsers out there, one of the newnesses which stands out a bit is the implementation of Attribute Selectors. Ok perhaps not fully supported yet in its full scope, it's pretty much covered in its basics (only IE6 amongst the best penetrated browsers doesn't do so). Just an example - recently I was asked to come up with some CSS code for a form generated by a content management in combination with a PHP script... and rendered in an <iframe;> ... oeps, that wasn't too problematic. However for all kind of reasons the script generating the form's xhtml couldn't be changed and the design proposed a nicely layouted submit button...

You must have guessed it by now: no selectors were available or allocated through the script and as the <input> element is used for the submit button, but also for several other form fields... there was an issue of course.

So what to do? Well luckily enough therewere attribute selectors ! So this was the code extract I came up with :

body#mailinglistcontainer input[type="submit"] {background:#e24c46; border:1px solid #9c0300; color:#fff; padding:5px; margin: 10px 0 10px 45px; font-weight:bold; width:22em;}

body#mailinglistcontainer input[type="submit"]:hover {color:#d90501; font-weight:bold; background:#f0d742;}

As you can see attribute selectors use the square brackets [ ] and are quite flexible in use, i.e. you can refer to the overal use of an xhtml attribute, or be a bit more specific, as I've been doing here.
As the submit button uses the type="submit" attribute, it's quite easy with an attribute selector to target for just that type of <input> element.

If you want to see some other samples of the syntax to use, and some overall CSS3 introduction, perhaps start at Roger Johanssons' 456 Berea St.:

or for another nice overview go to Trevor Davis Blog

 

(0) Comments ·
14 March 2008 - 07:41

Specific CSS hacks

Today I was confronted with a very weird issue with png transparent images on Opera : they just disappeared !

As I couldn't figure out this brought be to the question - I want to avoid as much as possible btw -, is there a way to write CSS code only rendered by Opera?

I had seen some before, but on ESN Studio, I founded following beauties:

IE 6 and below* html {} IE 7 and below*:first-child+html {} * html {} IE 7 only*:first-child+html {} IE 7 and modern browsers onlyhtml>body {} Modern browsers only (not IE 7)html>/**/body {} Recent Opera versions 9 and belowhtml:first-child {}

And of course my issue was solved... first by implementing the hack for Opera, but finally by realizing that a png javascript for IE6 was the culprit at the first place !

PS. And around the same time good news concerning IE8 which now will not render as IE7 and force 'version targeting' - here's the list with all improvements IE8 is going to implement - leading of course to fewer hacks all together too...

(0) Comments ·
24 February 2008 - 10:24

Table Captions and CSS

I was about to call this ‘CSS frustrations’ :-)
Because even for the greatest & most enthusiastic CSS loyalists amongst us, there are days where you just hear yourself saying: ‘my God, why does this need to be so complicated?’…
Too bad Internet Explorer so often has to take up the role of the devil :-)

Take table captions e.g. - there are some great things you can do with tables (yes they still do have a lot of ‘usefulness’ !) and of course adding a caption to your table not only provides accessible code, but also provides the ideal make-up for your CSS touches.

[Read more on Table Captions and CSS...]
(0) Comments ·
18 February 2008 - 06:33

HasLayout

Had to tackle a couple of weird issues related to the CSS coding for a design mockup I did recently.
It turned out to be a combination of a ‘Margin Collapsing’ issue with one of those famous hasLayout phenomenologies in IE.

So I bumped onto a nice explanation on this IE rendering logic, where I found something I’d never seen before: some small Javascript code with which to check whether your container is having layout or not. Quite useful indeed:

javascript:alert(id_of_element.currentStyle.hasLayout)

Some comments on the article are available here.

(0) Comments ·
05 February 2008 - 11:42

CSS3 sample

CSS3 brings in many new features - like multiple background images and attribute selectors.
I hadn’t realised this one: Overriding The Default Text Selection Color With CSS.

Enough to mention it and someone - in this case Erik Kastner from Metaatem.net - is bound to make something nice out of it: Fun with highlights ; and why not upgrade it into a sample case of what PHP and CSS3 combined can do - really love the ‘statement’ : Highlight application.

(0) Comments ·
30 December 2007 - 15:06

CSS and web browser support

As web developer one of the main concerns you have of course is how different browsers are going to render you code - especially in regard to CSS.
I stumbled across the work of this young man with the name David Hammond, who truly did a beautiful job and made one of the best and most complete overviews of ’Web Browser CSS Support‘ I’ve ever seen.  You can even choose the browser against which you want the checking to happen.

As a bonus he also published a page with a handy overview of the rates in which the main browsers support web standards for HTML, CSS and even the DOM model as such.

Nothing to add ! Just thanks for making this available !

(0) Comments ·
27 December 2007 - 16:10

Expression Engine and Veerle’s blog

I’ve been going into more depths regarding the use of Expression Engine -
It hadn’t taken me lots of moments to appreciate the code it renders, especially in terms of xhtml and CSS - and I could immediately see the power of its template system, as well as it robust nature.  It took me a while dough to really get to the point of certain aspects like the URL building, where the public member template is (still haven’t found it, but I suppose it’s in the licenced version only; also the documentation is not always helpful), or how to build conditional references to categories - and why certain code in my php includes wouldn’t render properly. 
It’s really things like this last topic which impressed me most - this is the first tool e.g. I discover where you can decide if php will be taken into account or not on a template page and moreover if the php code needs to parsed ‘before’ or ‘after’.  And so many more luxury throughout the control panel.  I had made up my mind already to take the EE direction from 2008 onwards - looking forward to discover its further potential.

Speaking about Categories and EE: this brings me to this useful resource I went through today, about Categories and paths in EE. Many other interesting resources on this beautifully designed and world famous web-blog of this Belgian designer and developer Veerle Duoh - a fellow country woman indeed !

Which closes the circle beautifully as it was this very blog actually which brought me on the track of EE, so - even if she might never read this and gets about two dozains blessings for her work from all over the world every day anyway - a sincere thanks Veerle. 
As thoughts anyway reach their destination at the very moment you think them :-)

(0) Comments ·
25 December 2007 - 11:11

CSS resources

So many resources are available when it comes to getting into CSS - not always clear where to start though, unless you know exactly what you’re after… and even then…
Following document contains the links I share with participants to CSS courses : CSS resources
- I do try to update them every now and then…
Don’t hesitate in adding your two cents too…

CSS
(0) Comments · (0) Trackbacks ·
Page 1 of 1 pages