CSS: input text inside table cell without overflow

Tweet

If you ever worked with forms and tables together (and I believe you have at least once in your web developing career), you surely have found that input boxes width can be difficult to manage.
Presume you have a table and inside a <td> you have an input text box which should have a 100% width. The input box should stay inside the <td> and fill all the available space. However that doesn't happen, and the input box overflows the available space. Why?

Explanation

The reason is because you have set borders and paddings. Let me show you an example: your input box has a width set to 100%, a border of 1px each side and a padding of 2px each side. That means, the input box width will be:

100% + 2*(2px+1px) = 100% + 6px

Those extra 6 pixels are your trouble, and the input box will overflow by those 6px.

CSS & HTML: solution for border radius not working on IE8

Tweet

Today, I would like to share something I've discovered only recently (there is always something to learn!).
It's related to border radius and box shadows solutions for Internet Explorer 8 and previous versions. It might happen that the rendering of round corners and shadows is not working at all, and that every CSS rule applied is completely ignored to the point that the styled element won't even be displayed at all.
While the solution is very simple, the problem needs to be explained, and, please, read all the article if you're interested in the solution, because you really need to know what's happening.
Follow me.

A little bit of background

How did I discover the problem? It happened at work. In the company where I work, there's an intranet which I have developed. The main menu of the web app has round corners, rendered with a jQuery plug-in.
A colleague, a few days ago, called me because the background colour, the round corners and the shadows on the intranet menu had disappeared. I immediately checked the browser configuration and security options, asking if he had changed something there. "I haven't", he replied.
We all know from experience that IE8 (the browser he's using) is not a great piece of technology and that it gives us a lot of troubles, but I immediately understand that the problem was not strictly related to the browser configuration. Any site using round corner was not working; even the CSS Pie homepage was not showing those wonderful round corners.
And so I started my quest.

HTML & CSS: text overlay with shadows and round corners

Tweet

Today, I'm going to explain a simple effect that is getting quite popular on web sites: we will position a text over a main container. The box will have shadows and round corners. Something like:

It will be an easy solution with full browser compatibility... please follow me...

CSS: style your form elements

Tweet

When talking about how to style an HTML element, it is always difficult to meet everyone's tastes.
Keep that in mind when reading the following post, because we are going to show how to style form elements with CSS, considering two possible extreme situation: with a white background and with a black background.

We are going to work on the input, text area, select and button elements. We are going to use CSS and specifically the following properties:
1) background color;
2) font family, size and color;
3) text alignment;
4) width and height;
5) padding;
6) border radius;
7) border;

Let's see what we can do.

CSS: the use of styles in Apple homepage

Tweet

As you already know, Steve Jobs has passed away. When the news appeared on the web, many blogs, news agencies and web sites published articles about the life of the man who's been said has changed the world.

The Web Thought paid a tribute to him, as well, by reproducing Apple corporate homepage main picture.

Apart from the sad thing, I would like to take your attention on how the Apple web team created that homepage. I believe it is quite interesting to see how CSS styles were used, even if it might look too basic.

Please follow me...

CSS: Layer styles

Tweet

Following similar articles about online CSS tools, today I would like to share Layer Styles.
The web site has a simple graphical interface with sliders and selectors where we can insert parameters and see the results of our choices with a screen preview. The possibilities are quite interesting and the customizable parameters are surely the most used for most web developers. The resulting CSS style can be then copied for our personal use.

Let's see what we can do in depth.

CSS3: Use CSS3 in IE 6-8 with PIE

Tweet

"Marco, the design department has prepared the layout for the new site. Please, now you can start developing it."

That's what I found in my company mailbox, the other day. Interesting enough, the design department is mainly a smart guy who's very skilled using Photoshop and stuff like that. But placing shadows, neat and polished background textures, rounded corners and every other embellishment you can think of, is drammatically easier to do with Photoshop than actually designing it with CSS, ASP and plain HTML.

Upon looking at the drafts, I immediately realized there were troubles ahead. The problem was compatibility...
I know, I know... we've been talking about CSS3 compatibility issues many times, however I believe that we can now start to talk about possible solutions... or not?

... drum roll ... the solution is already out there!

CSS: CSS3 generator and CSS3 Please!

Tweet

We have talked a lot about CSS3. The not-anymore new standard is giving some of us headaches. In this post I will show two incredibly useful tools to automatically create styles for your pages.

CSS3 Generator

CSS3 Generator is a simple page with a few sliders helping to create styles for a container. Basically, moving the sliders and selecting from color pickers, we can change:
1) border radius;
2) box shadow;
3) background gradient;
4) opacity.
When we are happy with the look of the container (through the live preview), we click "Get the code!" and a pop-up with the style sheets opens, ready to be used.

The generator is a very useful tool, quick and easy to use. One important note: CSS3 Generator can create style sheets with minimal IE7 and IE8 support. Impressive!

A big thanks goes to Eric Hoffman and Peter Funk for this remarkable tool.

CSS3 Please!

Another useful page is CSS3 Please! In this case, we have a styled page, where we can toggle CSS3 effects on and off. There's a live preview of our actions, so that we can understand what every single style is actually doing to the container.
The page is commented so it is a very interesting playground and learning tool. Through it, we can really learn what the rules are doing, how they apply to different browsers and finally decide what to - eventually - use in our web pages. In addition to all that, we can change the values of the styles and see the resulting effect, applied live to the container.

The original project was developed by Paul Irish and Jonathan Neal with many other nice people contributing. The project is an open one: anyone can contribute and new features will be introduced in the future.

Hope this will help you in building remarkable style sheets for your web pages. Please, leave your comments in the section below.

CSS: Border radius with CSS3

Tweet

I continue exploring new properties that will be introduced with CSS3. This time I like to share information on the border radius property, which is really a great thing, considering that most of us probably had to create such effect for a new web site or application more than once. Personally I like rounded corners, even if - I must admit - recently I've started to prefer live corners again. That is probably related to fashion or personal taste and aesthetic; however, from a technical point of view, you know how tricky is/was to create such round corners effect. At the beginning we used a set of small gif images - and that was a real mess - then came jQuery or JavaScript in general.
And what about now? CSS3!