Archive for the ‘1’ Category

Input Button hover

Posted: July 6, 2010 in 1

If you have ever tried to put a hover effect on any input element. If  using css you must have faced the problem when you tested on IE6. Generally following is the css code we use to add the hover effect:

input.button{background-color:#ccc;color:#000;}
input.button:hover{background-color:#000;color:#fff;}

This is wrong because input:hover is noting in css. Hover effect use only with a tag in css. The right way off the input hove effect is following:

<input type="submit" value="Submit" onmouseover="this.className='inputClass-hover';" onmouseout="this.className='inputClass'" name="inputName" class="button" id="submit" />

Save the submit bg image

Save the submit hover bg image

This is code of html copy and paste in html

HTML Code

<input type="submit" value="Submit" onmouseover="this.className='inputClass-hover';" onmouseout="this.className='inputClass'" name="inputName" class="button" id="submit" />

CSS

.button, .inputClass {background:url(submit-bg.gif) no-repeat; font:26px Arial, Helvetica, sans-serif; border:none; width:132px; height:38px;}
.inputClass-hover {background:url(submit-hover-bg.gif) no-repeat; font:26px Arial, Helvetica, sans-serif; border:none; width:132px; height:38px;}

Advertisements

Problem of Min & Max Height & Width in IE6

Posted: November 23, 2009 in 1

IE6 does not understand min/max of both height or width. So, if you need any of these four css properties to work in IE6, then you’ll need to feed IE6 an IE expression. Basically, they’re little snippits of javascript tailored for IE.

IE expressions don’t validate, so I like to put them in a seperate ie6.css. Alternativly, you can place them in the <head>, or feed them to IE6 with the * html hack – whatever floats your boat. Here are all three methods to feed specific rules to IE6.

min-width in IE6

div {
width:500px; /* defaults to this if JS is disabled */
width:expression(document.body.clientWidth<501?"500px":"auto");
}

max-width in IE6

div {
width:500px; /* defaults to this if JS is disabled */
width:expression(document.body.clientWidth>499?"500px":"auto");
}

min-height in IE6

div {
height:500px; /* defaults to this if JS is disabled */
height:expression(this.scrollHeight<501?"500px":"auto");
}

max-height in IE6

div {
height:500px; /* defaults to this if JS is disabled */
height:expression(this.scrollHeight>499?"500px":"auto");
}

Sexy Drop Down Menu w/ jQuery & CSS

Posted: August 25, 2009 in 1

Sexy Drop Down Menu w/ jQuery & CSS

Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key × and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully.

Demo