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!!

Large CSS background moves on resize, in IE 8


This post is in continuation to the a solution given by webdesignerWall, regarding the use of large CSS backgrounds in your website. You can check the site below:

http://www.webdesignerwall.com/tutorials/how-to-css-large-background/

The solution he states is that of using display:table; for body tag wherein you are specifying your large background.

The solution works quite fine! But when it comes to IE 8 – unfortunately, you end up in a mess.

I have a small work around for this issue. It works totally cool in almost all the browsers.

Solution:

All you need to do is load the same image twice – one for the body, and the other for a header div container. Difference being the body will be showing the full width of 100% but the header container will show only say 1000px, of center of the image.

Have a look at the CSS to get an idea:

body {
background:url(Images/bg.png) no-repeat center top;
background-color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
width:100%;
}
#ms-container
{
background:url(Images/bg.png) no-repeat center top;
margin:0 auto;
position:relative;
width:1000px;
}

Trick here is – during resizing to higher resolution, the background keeps showing, while the center section remains steady, you get a continuous image- actually overlapping, one with 1000px centered to your screen, while the other being the big image, 100% to the body, in its full glory.

And when you resize to smaller resolution, the 1000px guy comes into play, while the body background image keeps on moving in the behind (who cares 😉 all you see is the div container, which is stationary)

Worked successfully in almost all the browsers. But do verify it.

One note:Ensure that you play with paddings, borders, positioning and any css property that can shift the div container position by a pixel or two. You dont wanna show the end user that you are loading two images. Also, site performance wud be affected a bit. Can’t help it.

Hope this solves the problem!

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.

Avoid Resizing of textarea in Safari


Safari has its own amazing styles with it. Most of them are pretty cool and makes the browser stand out. But some of them can affect the screen structure. One of them would be the resizing of the multiline textboxes or textarea in Safari. But the solution is quite simple css fix.

In the css for textarea, add the following section:

textarea{

resize : none;

}

Voila! This would solve the resizing issue of Safari.