Making images and text scalable in fluid grid

so i'm creating first fluid grid design , i'm having issues making images scalable , appropriate. take @ example , 4 social media icons on top right. they're in 1 div id called socialinks. have in style_fg.css img attribute set 3em doesn't make image scale resize browser. tried doing 25% (actually, little less , used figure since there's 4 images in div) , worked in firefox in chrome , safari, appeared might have been dot. how can make multiple images can scale browser?

 

likewise, have similar issue making text same thing. in case, #access div i'd font resize browser. ideas on making work?

you can make images scaleable using css3 this:

 

 

div

{

background-image:url('mypicture.png');

background-repeat:no-repeat;

background-size:cover;

}

 

you can use vendor specific code make code compliant in browsers don't have css3 yet:

 

 

/* safari,chrome */

-webkit-background-size: cover;

/* seamonkey */

-moz-background-size: cover;

/* opera */

-o-background-size: cover;

 

hope helps.

More discussions in Archived Spaces

adobe