Main Menu

456 Berea Street

Roger Johansson is a web professional specialising in web standards, accessibility, and usability.

Using max-width on images can make them disappear in IE8

I recently ran into a problem that was really hard to figure out. I was working on a responsive design where I used img {max-width:100%;} to make sure that images would be downsized rather than overflow in narrower viewports.

It worked great everywhere… until I went to check in IE8. The site’s logo was gone! None of the usual IE bug fixes cured the problem, and it took me quite a while to realise that max-width was part of the problem.
Read full post
Posted in Browsers, CSS.
Copyright © Roger Johansson
How to adjust an iframe element’s height to fit its content

In an ideal world there would always be a clean way of displaying data supplied by a third party on your site. Two examples would be getting the data in JSON or XML format from a Web Service and having an API to code against. But you don’t always have any of those options.

Sometimes the only way of incorporating data from a third party is by loading it in an iframe element. A few examples are financial reports, e-commerce applications, and ticket booking applications. Using an iframe is not ideal for many reasons, one of which is that it can make multiple sets of scrollbars appear on the page. Not only does it look ugly, it also makes the site less user-friendly. But there is a workaround.
Read full post
Posted in JavaScript, Usability.
Copyright © Roger Johansson
Visited links can only be differentiated by colour

Showing whether a link on a web page has been visited or not can be very useful. One example that many will be familiar with is how it helps you know which links you have already followed from a Google search results page – links to pages you have already visited are a different colour than the other links.

Changing only the colour can be a bit subtle though, especially for people with colour vision deficiency. Depending on which colours are used to differentiate between visited and unvisited links it can be hard to tell them apart. To make the difference more obvious, there are a number of techniques involving background images, generated content (like the one I describe in Check marking visited links), and other CSS properties. However, if you’ve been using any similar tricks to style visited links, it’s time to forget about those and start relying on colour alone.
Read full post
Posted in Browsers, CSS.
Copyright © Roger Johansson
The difference between width:auto and width:100%

When adapting a layout for different viewport widths (a.k.a. responsive design) or media (like print), it’s common to reset any float and width values on major layout blocks to linearise their display.

Unfloating a floated element is as simple as specifying float:none. Width doesn’t seem to be quite as straightforward – lately I’ve come across several cases where people use width:100% to undo explicitly specified widths when they should be using width:auto instead. So here’s a brief explanation of the difference.
Read full post
Posted in CSS, Quick Tips.
Copyright © Roger Johansson
Styling buttons in iOS WebKit and -webkit-appearance:none

I just recently ran into an issue when styling buttons that had me pulling my hair for a while. I had my buttons looking the way they were supposed to look in desktop browsers, but when I went to have a look in Safari for iOS, much of my CSS wasn’t applied.

This was pretty puzzling as I couldn’t remember having any problems with buttons in Safari for iOS before. After taking a closer look at the CSS I was using for these particular buttons and the CSS I had used previously, I managed to find out what made the difference.
Read full post
Posted in CSS.
Copyright © Roger Johansson
Screen readers and CSS

As I have noted in a couple of blog posts recently, there are some cases when CSS has quite unexpected results in screen readers (or the way web browsers create the accessibility information they hand over to screen readers). If you haven’t read them, the posts are Screen readers, list items and list-style:none and Using display:table has semantic effects in some screen readers.

Here are a few examples:
- Using display:table on non-table elements to get the visual layout characteristics of an HTML table without actually using one may cause screen readers to act as if there was a real table
- Using display:block or float on table-related elements may cause screen readers to treat the table as a layout table and ignore its semantics or report an incorrect data structure
- Using list-style:none to visually remove bullets or numbers from list items may cause screen readers to ignore them too, basically treating list items as paragraphs of text
Read full post
Posted in Accessibility, CSS.
Copyright © Roger Johansson
JavaScript-created markup also needs to be semantic and accessible

Back in the day you used to be able to view source on a web page to see the markup used to create it. These days, on many sites, a large portion of the markup is not visible when you view source because it is inserted by JavaScript functions.

That isn't necessarily a problem provided that you use progressive enhancement and unobtrusive JavaScript. If you follow those principles, content and basic functionality will still be there when scripting is unavailable. Many of us understand that. But one thing I’ve noticed is that some developers forget to consider semantics or accessibility in the markup they use JavaScript to insert.
Read full post
Posted in (X)HTML, Accessibility, JavaScript.
Copyright © Roger Johansson
An accessible, keyboard friendly custom select menu

I’ve always been wary of styling form elements too much. Possible usability and accessibility issues, browser quirks, and the fact that the CSS specification does not define form control styling are the main reasons.

With that said, sometimes you have to do things you don’t really want to. Like styling select elements, which I’ve recently had to find a way to do. There are quite a few workarounds for doing this out there. However, most of the ones I looked at replace the select element with a bunch of links which changes semantics and behaviour a bit too much for my tastes. I couldn’t find any implementation that I was completely happy with, so I took the best one I could find and tweaked it.
Read full post
Posted in Accessibility, CSS, JavaScript.
Copyright © Roger Johansson

Your Choices

Let The Captain Build It

Captain's Designs, of Apalachicola, Florida, can take care of all your web site design, hosting and site maintenance needs. We can give you a web presence that will help promote your product and business or just put some things that are important to you online to share. We are located in Apalachicola, Florida but can work with you no matter where you are located.

Complex or simple, CMS or HTML, large or small, the choice is yours. Let the Captain handle it all for you.

You Have Choices

We can build you a dynamic CMS database driven site like this one or a more conventional HTML and CSS styled site. You can switch between this CMS site and our own HTML site by using the button just below.

For more detailed articles about the differences between HTML sites and CMS ones, look on the main menu above.

Your Image

Your Image Matters

Your Image means the world to you.
Put your web site in the capable hands of Captain's Designs and we will present your image to the world in the best of all possible ways.

Continue reading to learn about some of the ways Captain's Designs can help you best present your image to the world.

How We Establish Your Image

If you want to start from scratch, often the color scheme is the best place to begin. First we work with you to create a co-ordinated palette for you. If you already have "signature colors", we can help you expand that into a full palette to use throughout the website to give your web presence continuity.

Next, if you don't already have a logo, we will create one using that color scheme and then use your new logo and color scheme to design and build a cohesive web site with a central theme. Read more...

Our Services

Secure Set-Up and Installation

Many new computers arrive already bogged down by excess programs and utilities that you will never need. You never really know how well it COULD work. Known as "bloatware", some of the largest computer builders (Dell, HP, Compaq) are the biggest offenders. Many other new computers are compromised within the first few days before their owners have a chance to learn how to keep them secure.

Why go through that? Let us set up your new computer, streamline it to run at its potential, immunize it against problems, and get you off to a good start.

Viral and Malware Extermination

We do on-site assessment of malware or viral infections. We will come to your home or office and assess the problems with any computer or network and give you good solid advice on how to proceed.

If your computer needs time consuming multiple scans, we can take it back to our "lab" so we can run those scans without having to charge you for all the time it takes to let the scans do their work. We keep up to date on the latest malware released "in the wild" and have a full arsenal of tools at our disposal to root out and defeat the toughest of computer infections.

Our Pricing

Static Sites (HTML)

If it will fit your needs, the least expensive option for a web presence can undoubtedly be a static HTML site. Don't misunderstand, the term "static site" simply means the pages themselves are created and stored on the server and then the user's browser calls up the entire "static" page when it visits the site. A "static HTML site" can still have lots of interesting features, slide shows, and even flash or video features,

Pricing for static HTML sites is fairly straightforward. Like most design companies, we charge per page and then give you an "a la carte" choice of a number of extras..

Content Management Sites (CMS)

Content Management Sites, or CMS, are so flexible, dynamic and scalable that it is impossible to set static prices. If you are interested in a CMS site (and if you want a cutting edge site with maximum flexibility you should really consider one) we will work with you and follow a basic workflow to arrive at a firm contract and price based on the site you want created before we begin.

We will meet with you, find out exactly what you have in mind, work up a mock-up and design ideas, present that to you, set a price for the project, sign a contract with you and move ahead with the design.

Some Demos

We've put together a page on our HTML site of links to demos of some features we have built for various sites. Some flash movies, slideshows, music, video and more elements that will give your pages more interest. Link below left is to demo page, icons link to features on live sites.

Click to view demos