Predefined CSS rules in most browsers June 26, 2006

Posted by Predrag in : Web Design , 1 comment so far

Each and every time I start working on a new (X)HTML / CSS project - same problems turn up. As you probably know, every browser has some predifined CSS rules that you might need to override in order for your page to appear correctly on most of them. I say most of them because some of them I consider as waste of time (IEs older than 5, Netscape 4, etc. and their long lost relatives). While reading one cool and very useful article about prototype coding, led by few clicks I got this W3C page in my favorite browser (use Firefox!) I found very useful. It explains what rules most of browsers apply as they default CSS. Even the page states that the list is informative, not normative, I found points where should I focus my attention while overriding defaults.

As you can see below, I dig through that W3C page and copy pasted most used (X)HTML elements (I skipped some I never heard before) in more organized way - so I can print them out on single piece of paper I’ll keep on my desk in the future. Here is the list:

body {
   display: block;
   padding: 8px;
   line-height: 1.33;
}
div {
   display: block;
   margin:0px;
   padding:0px;
}
p {
   margin: 1.33em 0
}
ul, ol {
   display: block;
   margin: 1.33em 0;
   margin-left: 40px
}
th {
   font-weight: bold;
   text-align: center
}
caption {
   text-align: center
}
h1 {
   display: block;
   font-size: 2em;
   margin: .67em 0;
   font-weight: bold;
}
h2 {
   display: block;
   font-size: 1.5em;
   margin: .83em 0;
   font-weight: bold;
}
h3 {
   display: block;
   font-size: 1.17em;
   margin: 1em 0;
   font-weight: bold;
}
h4 {
   display: block;
   margin: 1.33em 0;
   font-weight: bold;
}
h5 {
   display: block;
   font-size: .83em;
   line-height: 1.17em;
   margin: 1.67em 0;
   font-weight: bold;
}
h6 {
   display: block;
   font-size: .67em;
   margin: 2.33em 0;
   font-weight: bold;
}
blockquote {
   display: block;
   margin-left: 40px;
   margin-right: 40px
}
dl {
   display:block;
   margin: 1.33em 0;
}
dt {
   display:block;
}
dd {
   display:block;
   margin-left: 40px
}

These are only the most used. Apart from this, you should always kill predifined FORM margin and padding values since IE iapplies them (and ruins my page). I’m sure there are some IE margins for BODY too, so pay attention on them. body {margin:0} won’t kill you.

For complete list of suggested predefined values visit http://www.w3.org/TR/REC-CSS2/sample.html.

Banner ads with HTML elements – banners that actually work June 19, 2006

Posted by Predrag in : Web Design , add a comment

Banners are one of the most used marketing tools on the Web for ages – you can see them on almost every commercial site. Some of them are successful, some are not. Some of them are truly annoying, some interesting.

No matter how they look and feel, people are still using them. One thing that’s important for any web designer is – there is still need for them and you’ll be creating them for a long time.

Key point you need to understand when you are creating a banner ad is – it doesn’t have to be good looking. Over-animated, shiny banners won’t do you any good if they are not clickable.
(more…)

Disable ctrl + n and other ctrl + key combinations in JavaScript June 17, 2006

Posted by Slobodan Kovacevic in : Programming , comments closed

Few days ago Vijay asked if there’s a way to disable ctrl + n combination (open the new window shortcut. So I set out to create a small Java Script that disables any ctrl + key combination (e.g. ctrl + v, ctrl + c, ctrl + a, etc.).

Script is a bit more complicated than Disable form submit on enter keypress and it should work in both Fire Fox and Internet Explorer.

<script language="JavaScript">
function disableCtrlKeyCombination(e)
{
        //list all CTRL + key combinations you want to disable
        var forbiddenKeys = new Array(‘a’, ‘n’, ‘c’, ‘x’, ‘v’, ‘j’);
        var key;
        var isCtrl;

        if(window.event)
        {
                key = window.event.keyCode;     //IE
                if(window.event.ctrlKey)
                        isCtrl = true;
                else
                        isCtrl = false;
        }
        else
        {
                key = e.which;     //firefox
                if(e.ctrlKey)
                        isCtrl = true;
                else
                        isCtrl = false;
        }

        //if ctrl is pressed check if other key is in forbidenKeys array
        if(isCtrl)
        {
                for(i=0; i<forbiddenkeys .length; i++)
                {
                        //case-insensitive comparation
                        if(forbiddenKeys[i].toLowerCase() == String.fromCharCode(key).toLowerCase())
                        {
                                alert(‘Key combination CTRL + ‘
                                        +String.fromCharCode(key)
                                        +‘ has been disabled.’);
                                return false;
                        }
                }
        }
        return true;
}
</script>

And you just add this to the field where you’d like to disable keys:

<input type="text" name="mytext"
        onKeyPress="return disableCtrlKeyCombination(event);"
        onKeyDown="return disableCtrlKeyCombination(event);" />

Although the key combinations are disabled only on one field the same script can be easily modified to disable ctrl + key combinations on whole page.

Also if you are looking for something more sophisticated and with more features you might want to take a look at a visitor comment that contains DisableKeys.js script that gives you more control and you can disable almost any key and/or key combination, including ctrl + key and alt + key.

Control your color gradient tool! June 12, 2006

Posted by Predrag in : Web Design , 2 comments

There is one thing you should know about gradients no matter what application you use – it is a tricky business. You can create nice color harmony or ruin your layout in 3 mouse clicks.

Back in 2002 I was avoiding it wherever possible from various reasons:

  • Page load was longer
  • It looked unprofessional and lame
  • 2 of 3 gradients throughout the Web were followed with some horror looking headline, 3D rotating logo and/or heavy JPEG compression

Of course, those days CSS was used for changing colors in anchor tags - rarely for something more. Now it’s different – we use style like background-image, background-repeat, background-position and whoohoo – with a 0.1KB GIF image of 50×1 pixels in gradient, we have a cool looking header background. If we use some cool font, sometimes it’s more than enough for good start in our design.

So, now we know what we need and I am more than sure you know how to create gradient in your favorite application. You pick two colors, you draw a direction line and that’s it! Gradient is here. We just need to learn how to control it.

Here are some ideas how to refresh your current web sites…
(more…)

Ruby installation on Windows June 10, 2006

Posted by Slobodan Kovacevic in : Programming, Ruby & Rails , 3 comments

Recently I’ve started playing around with Ruby and Ruby On Rails on our hosted server. Since I liked it a lot I have finally decided to try to install it on our local Windows server. While I was doing it I found that most of the online tutorials are not all completely accurate, i.e. they need a bit of tweaking… So I started logging every step I did.
(more…)