Posts Tagged ‘CSS’

Tuesday, March 16th 2010

Internet Explorer 9 on the way

It looks like Internet Explorer 9 will have quite a few nice new features for web designers and developers!

Microsoft are demonstrating some of the new browser’s capabilities here. They include rounded borders, CSS3 Selectors, JavaScript speed to match Firefox 3.6 and many more things.

I must say I’m quite impressed, although I haven’t actually downloaded and installed the preview yet.

Screen Shot of Internet Explorer 9 demo site

But why can’t they just call the test version IE9 preview or something logical. Internet Explorer Platform Preview??

Thursday, May 7th 2009

IE8 Sorted

After finishing my slight redesign here I found that IE8 made a complete mess of it. Turned out of course that I had forgotten to change the doctype into something other than XHTML Strict, which IE still doesn’t understand.

I went with the nice, simple HTML 5 doctype, which seems to be the best option:

<!DOCTYPE html>

That was all that was necessary and now, miraculously, my blog looks … decent in IE8! Looks like it has finally understood my max-width rules as well! Amazing stuff.

Thursday, May 7th 2009

New Design Done

Well, this is the new modified design. Nice and tight and snug! Obviously the font size in the left column isn’t web 2.0 compliant, but you can’t get everything.

For comparison, here’s a screenshot of what it used to look like:

Screenshot of my old blog design.

So what has changed? To start with I removed a couple of things from the right column and moved what was left to the left column. Then I made the left column quite a bit tighter to allow for 1024 px images in my posts. I tried to use a sans-serif in the left column but the combination looked really weird.

I decided to revert my choice to use a downloaded font, for two reasons: A, i find Georgia is actually prettier than Dustismo and B, I don’t really like how Firefox 3.5 (beta) deals with downloaded fonts at the moment.

Firefox will display the page with the fall-back font first, and then redraw the page when the @font-face font is downloaded. This behaviour is annoying when viewing the page – Safari does this much better. Safari simply waits with displaying the text until the font is downloaded.

While I was fiddling with the design I decided to remove the alternate stylesheets for a slight simplicity win.

I have considered implementing columns in my posts, but I’ll need to think that through properly first.

Edit: Argh!! Internet Explorer 8, supposedly CSS 2 compliant, messes the design up completely. I’ll have to look into that some other time.

Friday, March 20th 2009

Microsoft (Isn’t) Lying About IE8 CSS 2.1 Compliance

Microsoft boldly claims

We believe that IE8 has the first complete implementation of CSS 2.1 in the industry and it is fully compliant with the current CSS 2.1 test suite.

Jason Upton

Now, correct me if I’m wrong, but don’t the following CSS 2.1 tests look very much like fails in IE8 (and Firefox btw):

CSS 2.1 test suite test

CSS 2.1 test suite test

CSS 2.1 test suite test

CSS 2.1 test suite test

As I said, if I have misunderstood something, like for instance if the above tests aren’t considered part of the CSS 2.1 test suite, or if they for some reason should be ignored, do correct me. But if not, it seems like Microsoft are somewhat exaggerating IE8′s capabilities in the CSS 2.1 area.

Edit: Removed a few of the tests which turned out to be fails because I had ClearType activated.

Edit 2: Arron Eicholz of Microsoft has explained to me that the above fails are due to faulty tests. That would explain why Firefox also fails them.

Tuesday, September 16th 2008

Fun with CSS

A few days ago I sat down and played around a bit with CSS text-shadows on my blog.

Here’s what I ended up with. It will be visible if you’re using Safari 3+, Opera 9.5+ or Firefox 3.1+:

Screenshot of my blogs title in Firefox 3.1 alpha 2

Here’s the code I used to get this effect:

text-shadow: 0 0 0.45em #fff;

… Which can be interpreted as… Create a shadow 0 distance to the right and 0 distance below the text. Blur it 0.45 m lengths and make it white.

Now, if this had been 1998, I would have applied several shadows (yes, that’s possible too, for some crazy reason) to all the text. It would have looked cool, for about six seconds, at which point you would begin to feel sick.

Since this is 2008 and I’d prefer to keep the few readers I have, I’ll just leave it at the white glow effect on the title.

Writing this post, I also decided to ditch the semi-transparent PNG image I have used for the hovered links. Instead I replaced it with a semi-transparent CSS3 colour:

background-color: rgba(255,255,255,0.30);

… Which means … Make the background colour white, but make it only 30% visible.

This is what the title looks like in Safari 3 and Firefox 3 when hovered:

Screenshot of my blog title hovered

No images, just some simple CSS code, er, baby! (Well, the N in the background is still an image, I’ll maybe get to changing that some day as well.)

You can read more about transparent colours here. And about text shadows here.

Edit: Well, as you may have worked out, I have also set a border radius for the light hover background:

-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-radius: 0.5em;

Since the standard isn’t finalized, the browsers have their own prefixes for this setting.

Rounded corners look best in Firefox 3 (smooth!) but also work in Safari 3. Read more here.

Sunday, March 30th 2008

New Blog Design

If you’ve been here before you might have noticed the new design. I got inspired yesterday and thought I should have one if those hip dark wallpaper pattern inspired blog designs.

If you still see my old default design, the Tech Blue, just click Dark Pattern at the top of the page.

I started off by finding a suitable pattern for the background. I found this one:

Black and white pattern background

at theinspirationgallery.com, inverted it and used curves to make the pattern a dark grey.

To increase the readability I added a see-through (40 % opaque) black to the main section using the following CSS3 declaration:

#main {background-color: rgba(0, 0, 0, 0.4);}

This is what it should look like:

Screenshot of David Naylor's new dark blog design.

So far, only Firefox 3 and Safari 3 have support for semi-transparent colours (RGBA/HSLA), but I think the text is fairly readable even if you don’t get the darker background. Hopefully the number of Firefox 3 users will increase to about 20 % when it is released this summer, thanks to the auto-update feature of Firefox 2.

I’ve also changed the font to Lucida Sans Unicode (Lucida Grande on the mac), inspired by John Lilly’s blog. I decided to use it for both titles and text.

And here’s what a quote looks like:

I may not have gone where I intended to go, but I think I have ended up where I needed to be.

Douglas Adams

Overall I’m really pleased with the new look. Do shout if you find any annoying bugs.

Thursday, December 20th 2007

IE8 will pass the Acid 2 test

This is seriously good news for everyone who is planning on making a website in the coming 10 or so years.

What does it mean? Well, here are a few things:

  • The IE team must have started working on IE8 roughly at the same time as they started work on IE7.
  • Finally, IE will support CSS min- and max-widths. (Which I use on this blog to regulate the width of this main column.)
  • Loads less IE layout bugs: Web designers and web developers will be happier at work in the coming decade.

However, there is a big however. The IE team speaks of some kind of switch to make IE8 work in IE8 Standards Mode. Let’s just hope they didn’t choose a non-standard way for websites to request standards mode… (I.e. I hope they’re going to stick with the transitional vs. strict doctypes for quirks mode vs. standards mode.)

Saturday, October 21st 2006

CSS3 Teasers

Some of these CSS3 previews show just how far behind Internet Explorer is when it comes to the latest and greatest in CSS3. Nice features such as HSLA colours are already being implemented by other browsers!

HSLA colours are a very nice thing indeed. Instead of defining a colour as Red, Green and Blue, web designers of the future will be able to choose Hue, Saturation and Lightness, as well as Alpha, an opacity value.

That means it will be much easier to guess-pick colours when you’re coding. Also, making a colour semitransparent will be a very nice possibility for backgrounds. (No more semitransparent 1px png graphics!)

Then we have rounded borders, which is already being used around the web, since it degrades nicely (into square corners).

Another promising feature of CSS3 is columns. Currently, only Mozilla browsers (Firefox 1.5+) support this in any way. The idea is that you will be able to set a column width as well as spacing, and the browser will calculate how many columns to fit across the screen. Alternatively, you can define how many columns you want, and the browser will adjust their width to fit the space provided. A List Apart has a very nice article on the subject.

If you’re really intersted, have a look at what the W3C are working on right now, the different modules and their specs. CSS3 is still work in progress, so only a couple of the modules are even close to the recommended status. (I.e. implement now! status.

Sunday, July 30th 2006

Serious Layout Bug in Opera

After redesigning my photography website today, I noticed that Opera 9 has a fairly serious rendering bug:

I don’t understand what I’ve done to make it do that… The CSS for H1 is here:

h1 { font: 220% Georgia, “Gill Sans MT”, “Trebuchet MS”; margin: 0.5em; letter-spacing: 0.25em }

h1 a { border-radius: 0.5em; -moz-border-radius: 0.5em; padding: 0.2em 0.4em; background: #eee; opacity: 0.5 }

h1 a:hover { opacity: 0.65 }

Maybe Opera applies

h1 * { display: random }

by default?

Monday, February 20th 2006

See-Through CSS Colours in Firefox 3

The bug for rgba and hsla css colours has just been fixed on the Firefox trunk. That means it will be released with Firefox 3, in about a years time.

Can’t wait till we can start playing around with semi-transparent colours… Also, the hsl colour model is very nice – making it possible to think in hue, saturation and lightness when choosing colours. Very nice :-)

It’s just a shame that Firefox 3 is so far away.

Edit: Fixed an error. (Had written brightness instead of lightness.)

Saturday, November 19th 2005

Alternative Stylesheets

I have created a few alternative colour themes/style sheets. Just for fun really. (Choose your colour at the top of the page.) Your browser should remember which one you had selected on your last visit.

I’ve also moved all the CSS out into sepearate stylesheets to reduce the amount of space used on my webspace, as well as to make design tweaks simpler in the future.

Saturday, October 1st 2005

Some CSS3 Columns/Wizardry

Fini Alring has a great demo of CSS3 columns. It’s making me drool. For those who don’t have Firefox 1.5 beta there are screenshots.

Thursday, September 22nd 2005

New Design

After having played about with a three-column CSS layout, I decided to use the design for my blog.

So, here’s the result! There may be some minor polishing work left to do, but I think I’m mostly done.

I used Firefox for testing while I was building the design. Then I checked the result in Opera (no problems) and lastly in Internet Explorer. I made one small adjustment to the CSS for IE, in order to make links the right colour. (It seems IE doesn’t understand the inherit value for links.) Something I decided not to do for IE was swap the max-width property (which IE doesn’t understand) of the posts for the width property. Doing so would break the scalability of the design. I’d rather make it clear to users of Internet Explorer that they’re using an outdated browser…

So, If you’re reading this in Internet Explorer, and wondering what this design really should look like – try Firefox instead. You’d be doing yourself, me, and every single web designer in the whole world a huge favour.

I also added a favicon for anyone who may have bookmarked the site.

Update: Just for the heck of it I made a semi-transparent white PNG image for the background of links when hovered. That way I don’t need to find different suitable hover colours for the different background colours. Also, if I want to change the colour-scheme later on it will be much easier.

Monday, September 19th 2005

Playing Around With CSS – A Scalable Three-Column Layout

After having read the first few chapters of Lie and Bos’s book Cascading Style Sheets (3rd ed.) I was inspired to play around a bit with some of the nice things available in CSS.

Unfortunately many of these nice CSS features (such as the sibling or adjacent selectorme wants it very much!) don’t work at all in Internet Explorer 6.

Anyway, I put together a three-column layout based entirely on CSS, which a) is completely based on the users default font size and b) makes use of the full screen width. Actually, to my surprise, the basic layout seems to work quite OK even in rusty old IE6. Here’s what I’ve put together so far. Feel free to use all or parts of it if you should want to.

Can’t wait ’til the standards compliant browsers have a more substantial market share, so we can start using adjacent/sibling selectors seriously. They are truly wonderful for making good-looking typography.

Comments on this design, or other advanced CSS stuff, are more than welcome.

Oh. And one other thing I’m looking forward to play with is CSS3 colours, which will be allowed to be semi-transparent: colours with an opacity value. Sounds pretty neat, eh? Can only imagine it will be totally so.

Update 2005-09-26: As you may have noticed, I decided to use the three-column layout I was playing with here as the base for my new blog design…

Saturday, July 30th 2005

Many Rendering Bugs Fixed for IE7 Beta 2

Chris Wilson of the IE Team has just posted a list of bugs that have been fixed for Beta 2 of IE7. It’s a list which will greatly reduce the number and severity of headaches within the web developer community. Check it out:

In IE7, we will fix as many of the worst bugs that web developers hit as we can, and we will add the critical most-requested features from the standards as well. Though you won’t see (most of) these until Beta 2, we have already fixed the following bugs from PositionIsEverything and Quirksmode:

  • Peekaboo bug
  • Guillotine bug
  • Duplicate Character bug
  • Border Chaos
  • No Scroll bug
  • 3 Pixel Text Jog
  • Magic Creeping Text bug
  • Bottom Margin bug on Hover
  • Losing the ability to highlight text under the top border
  • IE/Win Line-height bug
  • Double Float Margin Bug
  • Quirky Percentages in IE
  • Duplicate indent
  • Moving viewport scrollbar outside HTML borders
  • 1 px border style
  • Disappearing List-background
  • Fix width:auto

In addition we’ve added support for the following

  • HTML 4.01 ABBR tag
  • Improved (though not yet perfect) <object> fallback
  • CSS 2.1 Selector support (child, adjacent, attribute, first-child etc.)
  • CSS 2.1 Fixed positioning
  • Alpha channel in PNG images
  • Fix :hover on all elements
  • Background-attachment: fixed on all elements not just body

I’m looking forward to seeing how IE7 will render my web gallery, which makes use of floats and fixed-position divs.

I’m also very much looking forward to the day when we can make websites from scratch and see our CSS code just work in all the major browsers… And the following may sound strange coming for a Firefox addict and advocate, but I truly hope that Microsoft puts a huge marketing campaign behind IE7 once it has shipped so it as quickly as possible replaces IE6 (where still in use) on Windows XP. Firefox will have the older Windows versions for lunch, and through continuous innovation it will probably keep growing on the XP & Vista versions too.

Update: Now if only Gecko would get support for soft hyphens, I would be a truly happy geek…

Monday, May 30th 2005

CSS – Designing for the Web

Just received my (free!) copy of Håkon Lie and Bert Bos’s book on Cascading Style Sheets (Cascading Style Sheets – Designing for the Web, 3rd ed.). Very nice!

The front cover of Cascading Style Sheets - Designing for the Web. The back cover of Cascading Style Sheets - Designing for the Web.

I was sent a copy for free in exchange for a user review over at amazon.com, which I feel is a great deal :-)

This (the third) edition has been updated to fully cover the details of CSS 2.1. Without having read the book properly yet, it seems to be a very useful and complete guide and reference.

Beforehand I thought the book would only be a technical (code-centered) guide to CSS, but it turns out to contain many practical design tips as well. I would say it is useful for both beginners and advanced website designers. (I thought I knew basically what there was to know about CSS, but the book has already tought me several new and useful things.)

The book is split into logical sections, and for each CSS property discussed there are symbols indicating which browsers support the property in question.

Reading this reminds me how much I love using stylesheets for website design…

Ok, this is getting a little out of hand here. I’ll try to think of something negative and add it to this post at a later date… :-)