Changing scroll bar color in Gecko Browsers


Although this is not recommended by W3C, out of popular interest, i feel like posting the solution to this problem. The problem, being the fact that IE went ahead and allowed people to customise its scrollbars, while the gecko browsers like Firefox, Opera does not allow user styles to custom browser styles. 

For IE scrollbar settings, you can use the following properties:

scrollbar-arrow-color
scrollbar-base-color
scrollbar-dark-shadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-3dlight-color
scrollbar-shadow-color
scrollbar-track-color

For Gecko-browsers, you can use the FlexiScroll. Its free for commercial use:

http://www.hesido.com/web.php?page=customscrollbar

Hope this helps!!

How to enable javascript in various browsers – help file


This is a help reference for those sites, which are javascript critical. You can use this in a page to which you redirect in your javascript disabled scenario.

Microsoft Internet Explorer
1. On the Tools dropdown menu, click Internet Options, and then click the Security tab.
2. Click on the earth «Internet» icon, and then the Custom Level button.
3. Scroll to the bottom of the Settings list, and locate the section named Scripting.
4. Under the subsection Active Scripting, click Enable. Click OK.
5. Answer Yes to the confirm box that pops up. Click OK.
6. Reload the page, by clicking the reload button or pressing F5 in the keyboard or select the url in the address bar and click enter key in the keyboard.

Firefox
1. Go to the «Edit» drop-down menu and click on «Preferences…».
2. In the «Category» list, click on «Advanced».
3. Click on «Scripts & Plugins».
3 Click the «Activate Javascript for» option, and then click okay.
4. Reload the page, by clicking the reload button or pressing F5 in the keyboard or select the url in the address bar and click enter key in the keyboard.

Netscape Navigator
1. Go to the «Edit» drop-down menu and click on «Preferences…».
2. In the «Category» list, click on «Advanced».
3 Click the «Enable Javascript for Navigator» option, and then click okay.
4. Reload the page, by clicking the reload button or pressing F5 in the keyboard or select the url in the address bar and click enter key in the keyboard.

Safari
1. Click the Settings (gear symbol) icon in the browser and go to “Preferences”. or press (Ctrl + ,) in your keyboard.
2. Go to the “Security” tab.
3. Check the “Enable Javascript” check box.
4. Close the popup window.
5. Reload the page, by clicking the reload button or pressing F5 in the keyboard or select the url in the address bar and click enter key in the keyboard.

You can use this content in the page, to which you redirect under noscript scenarios. Hope this helps.

how to change the default text selection color in Browser


One of those cool CSS3 declarations that you can use today is ::selection, which overrides your browser-level or system-level text highlight color with a color of your choosing. The biggest hit is in the fact that only Safari and Firefox are supporting this, and both in slightly different ways. IE totally ignores them. Fortunately, this can be thought of as one of those “forward-enhancement” techniques. It’s a nice touch for those using modern browsers, but it just gets ignored in other browsers and it’s not a big deal.

I feel it’s worth a mention and am posting it. The solution for this text highlighting is a small CSS fix shown below:

::selection {
background: #ffb7b7; /* Safari */
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
}

[ VIEW DEMO ] – Try using your mouse to select the text.

If you are able to find a fix for this in IE, please feel free to share it.

How to apply width to IE and not Firefox


Well the solution is simple. All you need is the knowledge of some keyword that IE recognises while setting the property value, while Mozilla ignores it.

Few solutions:

1. Using Expressions:
div#maincontainer{
width:300px;
/* IE and mozilla will take the width as 300px */
width:expression(‘100%’);
/* But now mozilla will ignore this statement, but IE will take it
End result: In IE the div gets rendered with a width of 100%, but
in Mozilla it get rendered with a width of 300px */
}

2. Using separate stylesheet for IE and Mozilla
Add the following in the head tag of your page, wherein you add the reference to stylesheet.
< !–[if IE]>
< type=”text/css”>
< @import url(‘iespecific.css’);
< /style>
< ![endif]–>

3. Using Incremental Overrides
div{ } /* Works for all */
* html div { } /* Works for IE */

There can be a lot of other hacks out there. Do explore your options. Hope this gives you a headstart.

CSS fixes based on Browser versions


IE Specific CSS loading:

There can be scenarios wherein you might want to load IE version specific CSS. Say an IE6.css file for IE 6 and below, IE7.css for IE 7 alone. In these scenarios, it is good to exploit the conditional comments that IE layout engine Trident look upon.

Check the code below to check out how to implement these comments:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<link href=”main.css” rel=”stylesheet” />
<!–[if IE 7]>
<link href=”ie7.css” rel=”stylesheet” />
<![endif]–>
<!–[if lt IE 7]>
<link href=”ie6.css” rel=”stylesheet” />
<![endif]–>

<title>Conditional Comments Structure</title>
</head>
<body>

</body>
</html>

In the above example, the main.css will be loaded always. While depending on the IE browser versions, the other css will selected. IE7.css will be selected only for IE 7.0 browsers and IE6.css will be selected for IE 6 and below. The styles applied by the selectors in main.css will be overridden by the respective selectors in these css files, if any.

Conditional comments cannot be inserted into the css file, however they can be used with the style tag. For example:

<style type=”text/css”>
.MyStyle {
background-color: red;
}
</style>

<!–[if lt IE 7]>
<style type=”text/css”>
.MyStyle {
background-color: blue;
}
</style>
<![endif]–>

The other possible operators that can be used in the conditional comments are:

Operator Description Example
! not <!–[if ! IE 7]>
lt less than <!–[if lt IE 7]>
gt greater than <!–[if gt IE 7]>
lte less than or equal <!–[if lte IE 7]>
gte greater than or equal <!–[if gte IE 7]>

To target styles for IE 5, IE5.5, IE6.0 and IE 7.0 separately, you can use the following snippet:

h3{

background: #00f;   /* all browsers including Mac IE */
*background: #f00; /* IE 7 and below */
_background: #0f0; /* IE 6 and below */
_bac\kground: #f60; /* IE 6 only */
_background:/**/ #f62; /* IE 5.5 only */
_background/**/: #0f0; /* IE 5.0 */

}

Targeting Firefox Browser:

I would suggest your design your CSS for Firefox and then get back to IE to fix the IE specific bugs. Even under such cases, if you want Firefox specific fix, you can use the code below to load style specific for Firefox browser.You can also add the section inside the css file.

<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
@-moz-document url-prefix() {
h1 {
color: red;
}
}

/* Firefox 1 and 2 specific */
body:empty h1 {
color: red;
}

</style>
</head>
<body>
<h1>This should be red in FF</h1>
</body>
</html>

Targeting  Safari & Opera Browser:

Add styles specific for safari browser, you can use the following snippet:

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Opera 9 rules here */
}

Targeting Opera Browser only:

Opera hacks work out of the negation in CSS.

/* Opera Specific */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
head~body #h1{ display: block; }
}

CSS and Browser Compatibility Chart


We have a lot of browsers poping up every year. Not to mention the versions they come in. At times it can prove difficult to check if the website you have designed would look good in all browser. Browser compatibility has always been a web designers nightmare. Taking into account of this, i thought it would be useful to have a look at the various selectors and declarations used in the CSS 2.1 and CSS 3.

I would suggest you stick to CSS 2.1 as of now and use the advanced selectors judiciously based on your client browsers.

Let us check the compatibility charts of CSS and the popular browsers in the market. Most of the other browsers you get to see in the net will be using one of the layout engines used by the browsers in chart. Hence i feel the chart would suffice the needs of browser compatibility factor for your site.

It would be wise to keep note of this chart before you design your CSS.