[kdewebdev-site] CSS issue

[Chris Martin]

Andras Mantia wrote:
> Hi,
> 
>  We have the following CSS selector:
> #mainHead {
>     background-color:#7da7d1;
>     background-image:url("../images/page/sideHead.png");
>     height:20px;
>     padding-left:10px;
>     border-bottom:1px solid black;
>     width : 580px;
>     line-height:20px;
>   }
> 
> sideHead.png is an image with the height of 20px.
> 
> The problem is:
> - if you have a long text (see FAQ#8) that does not fit in the same 
> line, it will become ugly, as the background does not become taller 
> than 20px.
> - if you start to increase the font size in your browser, everything 
> becomes ugly
> 
> Does anyone know how could we solve this problems?
> 
> Andras
> 

The real trick here is to make the background image larger than 20px. 
Seems strange at first, but it's a background, so at the smaller font 
sizes it will still look normal.
Basically create it as tall as you anticipate the header to ever be with 
the largest font size.
Then as the font size is increased, your background image will still be 
large enough. It lets everything adjust to scale.

-- 
Chris Martin
Web Developer
Open Source & Web Standards Advocate
http://www.chriscodes.com/