Subscribe to RSS

Web Design Posts Tagged ‘CSS’

CSS fix for the double margin float bug in IE6

There are several well known bugs that affect only Internet Explorer 6 that can wreak havoc on your websites. One of the most annoying is the double margin float bug in IE6, simply if you float a block level element to the left it will double the margin you have applied to the element and most of the time break your site entirely in a strange way.

 (more…)

Popularity: 4%

How to create a good looking form without tables, using CSS

There are a lot of different attempts that we have all made over the years to master the quirky art of creating an aesthetically pleasing form. The trouble is being able to control the form and have your labels and inputs match up nicely without going to too much work. We’ve all made a form in tables, regrettably. For some this has been the only option due to restraints from CSS or frustration with cross-browser compatibility.

 (more…)

Popularity: 4%

Creating a photo gallery in CSS without tables

I have received several emails recently about creating galleries with CSS. Most people still use tables to create your basic image gallery in CSS. There is a much simpler way to do this with a list and some very easy CSS. Depending on what you want to do with your photo gallery you may want to have a caption or more information available on the page. This simple method can be expanded for use on staff pages or real estate sites to list houses for sale.

 (more…)

Popularity: 11%

The best free web development add-ons for IE 6 and 7

We have all used the great Firefox extensions that make our lives easier, there are thousands of lists out there of the top 10-15 Firefox extensions for web developers. There is of course a lot of resistance from web developers against using Internet Explorer because of its lack of standards support. A lot of this is carried over from IE 6 being so fundamentally broken at rendering web pages with CSS. There are always time though when we need to test web sites in IE6 or IE7 and just like we use our extensions for development in Firefox— it is a huge help to have add-ons installed for Internet Explorer that will allow us to do our job more effectively.

 (more…)

Popularity: 28%

CSS Image replacement technique

There are a lot of reasons that you would want to replace simple text with an image. One of the biggest reasons is the benefit of getting the text that is within the image for search engines. This method is used mostly for site headings. Say you were making a site about “Freelance Oklahoma Web Design” you would want to be sure to include that in your first H1 but you don’t want to use plain text to do it. So you would be creative and ensure that you are getting the same information that is within your fancy image into your heading tag. This way you can ensure that your site topic is best read by search engines without losing any of your design benefits of creating custom imagery for your design comp.

 (more…)

Popularity: 75%

CSS text effects you may not know about

There are a lot of different ways to display text using CSS, some of them are rather straight forward. Like assigning a color or setting the font size of your text. However, there are several text effects that you may not know about that can manipulate more then just the color or font size of the text. You can literally transform the text using various CSS rules. I’m going to show you a few that I think are kind of cool, some are handy and others are nearly useless in design. But they are all there and available to use, and I’m going to show you how.

 (more…)

Popularity: 46%

The importance of using lists for navigation

It is important to use lists in navigation for semantics, accessibility, aesthetics and flexibility. Not using lists for navigation can lead to confusion, inaccessibility and unclear markup. There has been an article published from a popular CSS tutorial web site that is slightly misleading and generally not the best advice for developers and designers. It appears as though most of the people in the comments noticed right away some of the holes in the attempted “listless navigation” theory. I thought I would address the importance of using lists for navigation here. For some this may be an obvious practice in design but it is important enough to be addressed. I would like to be clear that I mean no disrespect to David Walsh or Chris Coyier, I’m sure they both only had good intentions of showing off what can be done with CSS.

 (more…)

Popularity: 44%

Opera files formal complaint against Microsft and IE

Opera’s CTO announced that they are filing a formal complain against Microsoft and the Internet Explorer browser. Their complaint is about their lack of support for web standards and the disservice they have done to the web community at large. Opera calls for the support of the web community in this charge.

This is fantastic, I’m glad that Opera has stepped up and shown their support for web standards vocally. Most in the web community have known that the Opera web browser has been the largest supported and advocate of web standards. Not many outside of the web design community have been aware of this though. Most don’t even realize that web standards is an issue. I hope that something actually comes out of this, I would like to see an update that makes IE7 web compliant. It is insane for such a large company to know adhere to web standards such as Microsoft does.

Popularity: 10%

Using relative positioning in CSS

Relative positioning can come in handy in CSS, you are much more powerful as a designer if you can place things in the exact location you are pressing towards. There are a lot of times when you want to put an object somewhere and you are unsure of how you are going to place it. Whether it be just outside of your box or just above another object. The position of your object in your HTML document is important in design. You can’t always just use the restrictive box for your web sites, web designs more and more are breaking out of the box form and becoming much more elegant designs. (more…)

Popularity: 7%

Using negative margin in CSS

There are a lot of times when you want something to just be a few pixels higher than it is. Unfortunately for you the container of that element starts to soon. So you need to move it outside of the box. Your options in CSS? You can either use relative positioning or you can use negative margin. I’ll go over in another article so for now we will discuss the handy ability to use negative margin on objects. (more…)

Popularity: 6%


Recent comments

CSS fix for the double margin float bug in IE6

On July 24, 2008, katalyst wrote:

omg finally bigtime thank you! i’ve been looking for a solution and yours works for me.

Understanding color in design

On July 23, 2008, Christy wrote:

i am what is referred to as a “traditional artist”- i am a fine art major & have taken a ton of color theory courses. I get confused when reading articles about color...

The best free web development add-ons for IE 6 and 7

On July 23, 2008, Valentinka wrote:

Сайт, да нет это целый портал - с фишкой. Буду теперь постоянно посещать…. и всем...

CSS fix for the double margin float bug in IE6

On July 23, 2008, agencja modelek wrote:

finally found what I sought! thx for this fix! regards, AM

Test IE5 or IE6 on your PC with IE7 installed

On July 21, 2008, Ken Hamric wrote:

CrossBrowserTesting.com allows you to check your site ‘live’ via connection via VNC to several configurations of OS and browsers. The browsers available...