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
Friday, May 30, 2008
Firefox, Images and Myterious Gaps
Scenario:
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
- 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
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/
<!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/
Subscribe to:
Posts (Atom)