Tech 1.0 Blog: 2008

Friday, May 30, 2008

Image in div container in IE6

When you have image in a div container(w/o borders), it adds 2px gap between bottom edge of the image and bottom border of the div.
This problem occurs in IE6 only.(I haven't tested below IE6 browsers).

Solution:
Apply this css to image element. This will solve the problem.
img {vertical-align:bottom;}

Source: Click here

Firefox, Images and Myterious Gaps

Scenario:

You are using tables

You are using firefox

You are using <img> element to inside table

And firefox is setting extra white space below the image in table cell

Example:

This happens when you have Strict doc type declaration.

Quick Fix:
Apply style to that image. display: block
Ex: td img {
display: block;
}
or
.image {
display: block;
}

Reference: mozilla developer center

Friday, May 23, 2008

Chart of Support for CSS Filters/Hacks

http://www.dynamicsitesolutions.com/css/filters/support-chart/

Hack for IE 7 under strict mode

If you have given doctype declaration as STRICT mode and you want to apply hack specifically for IE 7:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

You can use *:first-child+html CSS Hack that works only with IE 7.

Example:
#test {
background-color: #FFFFFF;
}

*:first-child+html #test {
background-color: #000000;
}

SOURCE:
http://www.dynamicsitesolutions.com/css/filters/first-child-plus-html/

Tuesday, March 25, 2008

Tired of cross browser css problems???

Are you looking for CSS hacks to solve cross browser issues?
This site contains very good documentation for css hacks.

http://www.webdevout.net/css-hacks

In nutshell use following tags for separate styles for different browsers.

IE 6 and below
* html {}
IE 7 and below
*:first-child+html {} * html {}
IE 7 only
*:first-child+html {}
IE 7 and modern browsers only
html>body {}
Modern browsers only (not IE 7)
html>/**/body {}
Recent Opera versions 9 and below
html:first-child {}

Wednesday, March 12, 2008

Verify your blogspot site to google webmaster tools

Hi everyone,

Please follow this great link which has a tutorial for adding your blog in google webmaster tools and verify it.

Title fof the following blog is "Google webmaster Tools and HOWTO verify your Blogger/blogspot.com site"

http://linuxlore.blogspot.com/2006/10/google-webmaster-tools-and-howto.html

Friday, March 7, 2008

Nice tool for converting html code to text format so that you can disply HTML code inside HTML document

http://centricle.com/tools/html-entities/

Onclick( ) event inside anchor element changes the mouse pointer

While using show/hide div tag I came across one problem where I was using onclick() event inside anchor tag.
Though it was working fine, it changes the mouse shape (Shows cursor symbol instead of hand).

Solution:
Add href="#" inside anchor tab. This will also allow you to use onClick() event.
You can also try style="cursor: hand;".
Example:
<a onclick="Effect.toggle('player','BLIND'); return false;" href="#">

Friday, February 29, 2008

Handling Select/option in html with javascript

I came across one situation where I have to show/hide text according to the option selected by user.

As shown in the image below, I have a drop down box. Here when user selects any option except first option ("Individua Team- No registration"), I want to display a some text.

Example: See image below.

Solution

HTML Code:
<select name="Team" id="Team" onchange="showDiv(this.value)">
<option value="noteam" selected>Individual-No Team</option>
<option value='Ben&Jerry' >Ben & Jerry</option>
<option value='Giants'>Giants</option>
<option value='Gladiators'>Gladiators</option>
<option value='greatestteam' >greatest team</option>
<option value='MyTeam'>My Team</option>
<option value='starone'>star one</option>
</select>
</form>

CSS:
.hiddenDiv {
display: none;
}
.visibleDiv {
display: block;
}

Javascript:
function showDiv(divName) {
// hide div
if (divName == 'Individual-no team') {
document.getElementById("teaminfo").className = "hiddenDiv";
}
else {
document.getElementById("teaminfo").className = "visibleDiv";
}
}

Monday, February 25, 2008

Check box and text alignment in Firefox.

I have a check box and a text next to it.
In Firefox, they are not aligned properly.
here is the screen shot

Solution
To fix this problem just apply CSS "vertical-align: middle" to input element.

Friday, February 22, 2008

Few interesting websites for web designing

http://www.alistapart.com
http://www.webdesignerwall.com/
http://www.cssplay.co.uk/

Start

Since long I was thinking to create a blog but I never found out any interesting stuff to put in the blog. But right now while browsing different web dev/design forums to find the solution of different design issues I decided t create a blog where I can put the problem I am facing and also the solution I found from different forums.

Hopefully this will help other web designers also. :)