In IE6 and below, images within a div will have a gap or space below them. This is caused by the fact that images are not block elements; they’re inline. The pixels at the bottom are the space below the baseline where text descenders would go (tails on letters like g, j, p, q and y).
The Fix:
Using CSS, set display:block; on the img.
This is not a problem in IE7.
Posted in CSS ~ No Comments
Apple has released a beta version of its latest web browser, Safari 3, for Windows.
If the rendering engine is the same as the Mac OS X version (not positive it is) it will be nice to be able to check your website designs without buying a Mac.
Download at: www.apple.com/safari/
Posted in Website Design ~ No Comments
The Problem:
When using the Suckerfish Dropdown Menu in IE7 the dropdown menu often “sticks” and will not go up when you mouse off the menu.
The Fix:
Just add the following code to your CSS:
#menu li:hover, #menu li.hover { position: static; }
Thanks to Built From Source for the fix.
Posted in CSS, Website Design ~ Comments Off
The Bug:
Internet Explorer (IE 6) doubles the margin added to a floated div that is placed inside a container div.
The Fix:
Add display: inline; to the floated element.
Posted in CSS ~ No Comments
All future sites designed by MCG Web Dev. will now feature font sizes set with ems. Here’s why:
Yesterday I received an email stating one of the websites I designed wasn’t accessible to the vision impaired. The lady noted she had trouble reading the website because she couldn’t enlarged the text with her browser.
After a quick look she was right. Apparently Internet Explorer will not allow a user to change the font size when a site’s text is set in pixels (note the Firefox browser will).
I have always used px in my CSS to set font size as it gives the web designer the greatest amount of control. However, as the lady above noted, “10% of computer users (as well as non-users) are vision impaired.” Now that can add up to quite a few people to alienate.
There are quite a few options you can set font size with; pixels (px), points (pt), keywords (xx-small, x-small, small, medium, large, x-large, xx-large) and percentages (%). I however choose ems (em). Why? Not only will ems allow users to re-size their text (unlike pixels), they also give more precision then points and keywords offer. Plus you can setup ems to work like pixels.
In modern browsers the default size text is “medium” or 16px. By reducing the base font size to 62.5% ( BODY {font-size:62.5%} ) this takes 16px down to 10px. Thus 1em is now 10px, 0.8em is 8px, 1.6em is 16px, etc. For more information on using ems see Clagnut’s How to size text using ems.
Received an “Atta Guy” award for the accessibility updates I made for the lady mentioned above. Turns out she is Sheila Ashcraft, Commissioner of the Michigan Commission for the Blind.
Posted in Website Design ~ Comments Off