Is it Fine to Use a CSS Reset?

Yes, yes, yes absolutely use a CSS Reset if you plan to develop for cross-browser compatibility.

Also, Yahoo YUI reset in another excellent choice.

Popularity: 1% [?]

Quick Tip: Include One CSS File into Another?

The short answer is:


@import url("base.css");

Howerever, bare in mind that every @import statement is a new request to the server. This might not be a problem for you but when optimal performance is required you should avoid the @import. Think twice!!! Do you even need to have 5 stylesheet files.

Popularity: 1% [?]

Way to Align Checkboxes and Their Labels Consistently (cross-browsers)

So, the problem is how to align checkbox and its label and looking the same in all browsers. You align them in one browser and then check with another they can be completely messed up.

Let’s have the standard code first:


<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

And is one solution that I find working perfect for my need:


label {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
}
input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
    *overflow: hidden;
}

This code assumes that you’re using a reset like Eric Meyer’s that doesn’t override form input margins and padding (hence putting margin and padding resets in the input CSS).

Popularity: unranked [?]

The Best Way to Test Layout Design Across Multiple Browsers & OSs?

What is a good method for testing website layout designs across multiple browsers and operating systems?

Screen capturing services are a great way to do this.

BrowserShots (Free)

http://browsershots.org/

BrowserCam & LitmusApp (Paid)

http://www.browsercam.com
http://litmusapp.com

These kinds of services are nice because they allow you to specify a certain amount of time to wait for the page to load, and allow you have them perform actions (clicking links etc). Then you get a nice array of screenshots you can quickly browse to ensure your site looks like you expected across your desired platforms.

Popularity: unranked [?]

How would you this, WITHOUT tables?

tiles

This layout can be done quite simply with 2 HTML tables, one nested inside the other, or even with a single table. However, can it be done only with CSS??? Here is a solution I found, it’s pretty cool check it out.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>The Challenge</title>
<style type="text/css">
div     {
    text-align: center;
    width: 175px;
    height: 175px;
    line-height: 35px;
}

div div {
    float:left;
    width: 35px;
    height: 35px;
}

#orange, #maroon,
#blue  , #green  {
    float:right;
}

#orange, #silver {
    background-color: silver;
    width: 140px;
}

#navy  , #maroon {
    background-color:maroon;
    height:140px;
    line-height:140px;
}

         #navy   {
            background-color:navy ;
         }

#green , #red    {
    background-color:red;
    width: 70px;
}

#yellow, #blue   {
    background-color:blue;
    height: 70px;
    line-height: 70px;
}

         #yellow {
             background-color:yellow;
         }

         #white  {
             background-color:white ;
         }

         #green  {
             background-color:green ;
         }

         #orange {
             background-color:orange;
         }
</style>
</head>
<body>
  <div>
    <div id="silver">1</div>
    <div id="maroon">2</div>
    <div id="navy">3</div>
    <div id="red">4</div>
    <div id="blue">5</div>
    <div id="yellow">6</div>
    <div id="white" >7</div>
    <div id="green" >8</div>
    <div id="orange">9</div>
  </div>
</body>
</html>

via jsbin

Popularity: 1% [?]

What is The Best Way to Create Rounded Corners Using CSS?

Well there are couple of options when it comes to round corners.

Images

The old fashion way is using images.  Some say that the other ways (JS for example) aren’t nearly as good:  No anti-aliasing and senseless markup.

jQuery

All those JS fans would say go with jQuery, CSS support is minimal, images are too fiddly, to be able to select the elements you want to have round corners in jQuery makes perfect sense to even though some will no doubt argue otherwise. However, Javascript definitely has the highest scope for failure, and flickering in my experience. Here are couple of plugins you might consider using.

http://www.methvin.com/jquery/jq-corner-demo.html
http://plugins.jquery.com/project/jquery-roundcorners-canvas

CSS 3 and border-radius

With support for CSS3 being implemented in newer versions of Firefox, Safari and Chrome, it will also be helpful to look at “Border Radius”. But how about IE and Opera. You can always follow the “twitter way” handling this issue and my fave, downgrade the rounded corner feature to pointed corners on their website to IE users. Not a big deal really. Right?


    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;

Like any other CSS shorthand, the above can also be written in expanded format, and thus achieve different Border Radius for the topleft, topright, etc.


    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 7px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 3px;
    -webkit-border-top-rightright-radius: 10px;
    -webkit-border-top-left-radius: 7px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-rightright-radius: 3px;

Here couple more links if you’d like to see more examples and solutions:

  1. CSS Design: Creating Custom Corners & Borders
  2. CSS Rounded Corners ‘Roundup’
  3. 25 Rounded Corners Techniques with CSS

Popularity: unranked [?]

Are Fluid Websites Worth Making Anymore?

First of all it depends on your audience and your content. Amazon and Wikipedia are only couple of examples and are one of the most visited websites in the world. When asking a question like this or even thinking of creating a fluid layout the first thing that pops-out in most front end developers is “How is it going to look in IE6?”. Well we all want to stop supporting IE6 but that’s not the case with all there visitors that are using it. According to w3Schools 13% of the Web uses IE6. That’s a good reason to support IE6. Simple ideological dislike is not enough to dump IE6. Some people are arguing that in most modern browsers you can hold control and scroll your mouse wheel to basically re-size any website. So why should we make the layout fluid, browsers have the problem solved. Well most users aren’t that savvy to know all the features and shortcuts. You have to realize most computer users don’t even KNOW HOW to zoom in the browser! Most users are so far from the understanding of computers that we have. We always have to remember that fact. Making a website fluid, by adding a min/max-width attribute seems to be the best of both worlds. You support fluidity, but you limit it at a certain width (say, 800px and 1200px). So, it is up to you to decide and when you go to your next meeting and client says “I want my layout to be fluid” here are some things you talk about before you take the final decision:

  1. Text is hard(er) to read when lines are very long.
  2. Your audience may have larger or smaller resolutions than normal, and picking an ‘incorrect’ static width will annoy them.
  3. Maintaining a fluid site can be, but doesn’t have to be much more difficult than its static counterpart.

Popularity: 1% [?]

Force IE7 Standards on IE8

Following the previous post here are couple of ways emulate and force your browser to go with the IE7 standards while opened with IE8.

First, to do that you’d need to have XHTML Transitional doctype.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Then you’d need add the following line above all your meta tags:


<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

The solution, is to set the X-UA-Compatible value via an HTTP header ala:


<?php
    header('X-UA-Compatible: IE=EmulateIE7');
?>

Popularity: 12% [?]

IE8 Conditional Comments

Here is an email that I received yesterday from Mike M of VoloMike and a problem that he found when trying to use conditional comments for IE8.

“So last night I discovered to my horror that if you are trying to do custom CSS for IE8 using conditional comments, your XHTML or HTML will be required to pass strict W3C validation. Otherwise, the browser may announce itself as IE7 through its conditional comments. Also, on intranets (such as when testing your website), it will announce itself as IE7.

For instance, I noticed that in IE8 they fixed the old float left/right problem where the float right would drop below (next line) of the float left. So, any CSS repositioning tweaks (via IE conditional comments) you may have been doing to bring up the rightside float by x pixels is only going to put that right float up in the air somewhere. So, I introduced an IE8 conditional comment to trigger some custom CSS to bring it back down, and to my horror I couldn’t get it to fire on my intranet.

So, the only way to trap for IE8 appears to be to use a browser quirk (such as finding something in the DOM that only applies to IE8), or asking jQuery to identify it, or using a CSS hack (one that fires only for IE8) to style it.”

Popularity: 28% [?]

Best Page Width and Screen Resolution Trends

Liquid layouts are decidedly out-of-fashion. Fixed-width, centered layouts have become the dominant design pattern for the Web, and for good reason too. Fixed-width layouts allow designers to define strict proportions between columns, and keep line-lengths under control. Another thing that is not considered anymore by designers and developers is the 800×600 resolution, more and more people buy larger screens with better resolutions. Only about 4% of the users are still using the 800×600 resolution on their monitors. That means that we can increase the width of our pages, which will decrease the height and we can put more content to the top of the our pages.

Below you can see a list of random selected, fixed width, web pages

Most of the pages will fit inside 1024×768 (except IMDB & Buy.com), which will cover around 93% of your visitors [ source: W3School Display Statistics ].

In conclusion, if you select your next web site to have fixed width you can choose for your width to be anywhere between 960px to 1020px.

Note: the average width from the sites above is 982px, which will give you 980px page width with 1px for left & right border.

Tip: You can also have 100% header & footer with fixed width body.

Popularity: 22% [?]

« Older Entries