aip solutions developer's blog » HTML & XHTML

Vertical aligned image in link

mili — Thu, 15 Jul 2010 10:46:36 +0000

Use next code:

HTML

//new row
   //required space

CSS

a      { position:relative;display:block;width:100px;height:100px;line-height:100px;
          text-decoration:none;font-size:0;text-align:center;vertical-align:middle; }

a img  { margin:auto;vertical-align:middle;  }

IE7 extra padding to button bug

mili — Mon, 07 Jun 2010 08:58:36 +0000

To remove the extra padding you only need to set
CSS:

    button    {width: auto; overflow: visible;}

Converting values: PX to EM

mili — Mon, 07 Jun 2010 08:23:24 +0000

PXtoEM.com is a website that makes converting PX values to EM values easier.

Creating text element with not-common font in the HTML page.

Peter Assenov — Thu, 03 Jun 2010 06:34:09 +0000

Solutions:
1. Define the font with CSS
+ will degrade gracefully to similar font
+ no implementation overhead
+ low bandwidth overhead
+ low maintenance cost
- works only if the visitor has the font installed

2. Use image
+ maximum UA/user agent/ compatibility
+ little implementation overhead
- not flexible- high maintenance cost
- bandwidth overhead /weight+connection/
- worse SEO and Accessibility /? questionable if title and alt attributes are used/

3. CSS font download
+ can be used together with Solution 1
+ little implementation overhead
+ low bandwidth overhead
+ low maintenance cost
- CSS3 feature – poor UA support.
- if the font is commercial – the rights to publish could be expensive

4. Text drawing with vectors
+ good UA support.
+ can be used together with Solution 1 or/and 3
+ moderate bandwidth overhead
+ low maintenance cost
- requires JavaScript
- modifies DOM tree- potentially could change the visual
- high implementation overhead

footer stick on bottom

mili — Mon, 28 Sep 2009 10:27:14 +0000

DOCTYPE:

CSS:

html,body    {min-height:100%;height:100%;}
.siteContent {position:relative;min-height:100%;_height:100%;}/*IE hack*/
.pageContent {padding:0 0 25px;}
.footer      {position:absolute;bottom:0;width:100%;height:25px;}

HTML:

BROWSERS:
IE6, IE7, IE8, FF2, FF3

FLOATS:
yes

Round corners with css … only!

mili — Thu, 27 Aug 2009 08:51:10 +0000

One post inspired me to experiment with font-size and line-height. Here is the result of a few hours tests in IE6 and FF.

My result

Here is the CSS:

* 	{font-family:Arial,sans-serif;}

html,body{text-align:center;}

div	{position:relative;
         width:300px;
         margin:130px auto 0;padding:15px 0;
         background:black;
        }

div p	{position:relative;
         min-height:22px;height:auto!important;height:22px;
         margin:0 -14px;padding:22px;
         border:solid 15px black;border-width:0 15px;
         background:white;
        }

em.absTL,
em.absTR,
em.absBL,
em.absBR {position:absolute;
          width:30px;height:30px;line-height:32px;
          padding:0;
          font-size:120px;
          text-indent:-6px;
          color:black;
          overflow:hidden;
         }
 em.absTL{top:0;left:-14px;}
 em.absTR{top:0;right:-14px;}
 em.absBL{bottom:0;left:-14px;}
 em.absBR{bottom:0;right:-14px;}

And the HTML:


	•
	•
	•
	•
 	
 		Some dynamic content here 

 		Some dynamic content here

Preview:

Specific notes

1. div {vertical-align:top;} – IE6 don’t like it. The Internet Explorer 6 loses the em’s content;
2. bold em-s – IE6 again don’t like it. The line-height is quite different from FF;
3. other browsers – it works fine at least on IE6/7/8, FF3, Chrome, Opera, Safari.

The post

Thanks to Stu Nicholls and his post Curved Corners

List of products – no tables, no floats

mili — Mon, 20 Jul 2009 10:38:48 +0000

Check this post for a nice solution with unordered list – http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Useful add-ons

mili — Thu, 11 Jun 2009 06:56:47 +0000

This is a quick list of Add-ons in FF that I use:

Firebug - http://getfirebug.com/
IE Tab – https://addons.mozilla.org/en-US/firefox/addon/1419
MeasureIt -http://www.kevinfreitas.net/extensions/measureit/
ColorZilla – http://www.colorzilla.com/firefox/
Resizeable textarea – https://addons.mozilla.org/en-US/firefox/addon/3818
Web Developer – http://chrispederick.com/work/web-developer/
HTML Validator – http://users.skynet.be/mgueury/mozilla/
CSS Validator – http://www.nu22.com/firefox/cssvalidator/
Operator - http://www.kaply.com/weblog/operator/
Tails Export – https://addons.mozilla.org/en-US/firefox/addon/2240?id=2240
ShowIP - http://code.google.com/p/firefox-showip/
YSlow - http://developer.yahoo.com/yslow/

Footer stick on bottom with css

mili — Wed, 25 Feb 2009 09:47:58 +0000

A few weeks ago I found in Internet two beautiful posts to footer stick – lucky accident considering the huge information in the web. And lucky me, if you can imagine how long I’ve been trying to find out how to avoid using tables for layout. Even if it is only to stick the footer on bottom of the page.

Stop using tables!

Except for table-data of course

In the web you can find several ways to stick the footer without table (with height 100%). Some of them are based on JavaScript and often they are quite complicate. Others used long and messy hacks or a lot of extra HTML markup and the solution is confusing.

Now I want to say ‘Thank you for the really simple and working methods!’ to Bobby van der Sluis and to Ryan Fait.

At first I thought that these methods work only in XHTML, but today I tested both solutions in different doctypes and they …

Work fine in (X)HTML and IE6, IE7, FF, Opera, Safari & Chrome

Here is the list of doctypes tested in Internet Explorer 6, Internet Explorer 7, Mozilla Firefox 3.0.6, Opera, Safari for Mac and Google Chrome:

HTML 4.01 Transitional
HTML 4.01 Strict
HTML 4.01 Frameset
XHTML 1.0 Transitional
XHTML 1.0 Strict
XHTML 1.0 Frameset
XHTML 1.1

Resource 1: A List Apart

Bobby van der Sluis has described the problem with the footer since 2004. In his article Exploring Footers he represents the JavaScript solution because of IE5 bug.
Although, his simple CSS method works in IE and FF, so here is the code:

html, body { height:100%; }
#container { position:relative; min-height:100%; }
#footer    { position:absolute; bottom:0; }


    ...
    ...

Resource 2: Las Vegas Web Design

The second nice post on this topic is Make the Footer Stick to the Bottom of a Page by Ryan Fait. It is really short and understandable resource. Here I have to mention that some times in Internet Explorer there is a little bug – it is possible to appear vertical scrollbar when you resize the browser’s window.
Here is the code:

* 	        { margin:0; }
html,body { height:100%; }
.wrapper  { min-height:100%; height:auto!important; height:100%; margin:0 auto -4em; }
.footer,
.push     { height: 4em; }

class="wrapper">
    Your website content here.
   class="push">

class="footer">
    Copyright (c) 2008

Floating content problem

Maybe it will be a problem using floating elements in the main content (before footer). So you can check for more information the site www.cssstickyfooter.com and the post with many comments A CSS Sticky Footer that Works in 2009 (Chrome too) – both by Steve Hatcher.

In my next web project I’ll test that and post here.

Updates

2009-09-28: I’ve just added new post with my own solution for XHTML http://blog.aip-solutions.com/311/footer-stick-on-bottom-2/