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.

Styling a file upload control or input type = “file”


FileUpload control has weird styles, especially when you view them across browsers. The normal look and feel of the control, would look like something below:

The Safari one looks really worth a bug for the testers.

This solution to style fileupload controls is a concise and verified version of the solution by Michael McGrady.

Step 1 : Copy the following code to you javascript file that loads along with the page.

var W3CDOM = (document.createElement && document.getElementsByTagName);

function initFileUploads() {
if (!W3CDOM) return;
var fakeFileUpload = document.createElement(‘div’);
fakeFileUpload.className = ‘fakefile’;
fakeFileUpload.appendChild(document.createElement(‘input’));
var image = document.createElement(‘img’);
image.src=’search.gif’;
fakeFileUpload.appendChild(image);
var x = document.getElementsByTagName(‘input’);
for (var i=0;i<x.length;i++) {
if (x[i].type != ‘file’) continue;
if (x[i].parentNode.className != ‘fileinputs’) continue;
x[i].className = ‘file hidden’;
var clone = fakeFileUpload.cloneNode(true);
x[i].parentNode.appendChild(clone);
x[i].relatedElement = clone.getElementsByTagName(‘input’)[0];
x[i].onchange = x[i].onmouseout = function () {
this.relatedElement.value = this.value;
}
}
}

Step 2 : Add the initiFileUploads function to the onload event of the body. You must have your file upload control to be styled, placed on the page. The javascript will handle the styling of the controls of type file input.

<body onload=”initFileUploads()”>
<div>
<input type=”file” />
</div>
</body>

Step 3 : Add the following CSS class to your css.

div.fileinputs {
position: relative;
}

div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}

input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}

Step 4 : Sit back and enjoy!!!

The output would look like something below:Images I used:

In case you want to get into the technical details of this styling, i strongly recommend you to visit Quirks Mode input styling.

Try to style the textboxes with one of these shared images, your file upload control will look cool.

By the way, It is browser independent, but javascript dependent.

Even if your javascript fails, your original upload control stays there. So don’t worry much about the functionality, in case javascript is disabled.

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.

Javascript to maximise window on load


Well this is simple script to get your browser maximised onload:

<html>

<head>
<script language=”JavaScript”>
window.onload = maxWindow;
function maxWindow()
{
window.moveTo(0,0);
if (document.all)
{
top.window.resizeTo(screen.availWidth,screen.availHeight);
}
else if (document.layers||document.getElementById)
{
if (top.window.outerHeight<screen.availHeight||top.window.outerWidth<screen.availWidth)
{
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;

}
}
}
</script>
</head>
<body>Testing</body>

</html>

I just tested it it IE. Hope this works fine in other browsers.

You can also open up a new window as maximised. Check the script snippet below:

function fullScreen(theURL) {
window.open(‘testwindow.html’, ”, ‘fullscreen=yes, scrollbars=auto’);
}

If you would like to use jQuery here, you can use the following jQuery methods:

var height = $(window).height();
var width  = $(window).width();

Hope this helps.

Internet Explorer Bugs


Internet explorer is considered as the most widely used browser over the internet. However, this buddy comes up with some weird bugs in every version of it. I will be giving you a high level view of the bugs that IE has got. To get the indepth view of these bugs, i would recommend you to go through the following site.

http://www.positioniseverything.net/explorer.html

Bugs:

  1. IE non-disappearing content Bug
  2. The IE8 noscript-ghost Bug
  3. The IE5/6 Doubled Float-Margin Bug
  4. IE6 Peekaboo Bug
  5. IE 6 duplicate character Bug
  6. IE & Expanding Box Bug
  7. Guillotine Bug
  8. The Float Model Problem
  9. Three Pixel Text Jog
  10. IE & Italics
  11. Inherited margins on form elements
  12. Quirky Percentages in IE6’s Visual Formatting Model
  13. IE/Win Line-height Bug
  14. Disappearing List-Background Bug
  15. Unscrollable Content Bug
  16. Duplicate Indent Bug
  17. Escaping Floats Bug
  18. Creeping Text Bug
  19. Missing First Letter Bug
  20. Phantom Box Bug

Well these are among the most widely found bug in IE.

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; }
}