z-index problem with flash movie in Google Chrome

Google Chrome another browser in the family of Internet Explorer creating problems for web designers.  I cam through this problem in a project where my requirement was to run a flash movie in background and the menu/navigation is to be placed over it.
     For such kind of problem z-index and position:absolute is enough to solve them.  I did the same but when cross browser testing was done in Google Chrome the menu/navigation was not over the flash movie, the flash movie was coming all over the navigation.  I re-checked the CSS properties but it wasn't a problem.  To solve this you have to make little change in the embed tag properties of your <object> <embed> tag.

Just make the wmode=transparent and you are done.
      It was done with chrome, but I havent got solution for IE.  For IE I have to write a little coding, just checked the browser if its IE then use Image instead of the movie.  I know I know you must be saying this is not a solution, but I was unable to figure out.  If any one get solution for this problem in IE please share.

Share Your Solutions

How to vertical align an image in middle?

Many of us might have faced this problem of aligning an image in middle of a div.  I don't know about others but I used to use Padding-top in these situations.  But then if images are of different sizes i.e., of different heights then this padding-top doesn't seems to be the solution.  Then this css solved my problem. Normally these are situations when you are listing products and each of your image is of different size and you want them to be middle aligned in their respective DIV's.  Here's the HTML for the DIV where you have to place the image:

<div class="wraptocenter"><span></span><img src="banner_2.gif" alt="jaydharphics"></div>

And here's the CSS:

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    height:200px;
    width:300px; border:10px solid #e4e4e4;
}
.wraptocenter * {
    vertical-align: middle;
}
/*******************************/
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/******************************/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->


I hope this was helpful to you. I hope Horizontal alignment is not a issue for you, if you still have problem with horizontal alignment then there are two usual methods one is "text-align:center;" and another is you can use margin:0 auto; for the image.

Share Your Solutions!!

Serif and Sans-Serif

Every now and then we use these serif and non-serif texts, but never went in detail.  Today while returning from office this serif and non-serif doubt came into my mind.  So, I am sharing upto whatever extent I learnt about this serif and non-serif and I would also like to share my experience about the use of these serif and non-serif typefaces in designing. 
     Serif and Sans-serif are typefaces. Serifs are semi-structural details on the ends of some of the strokes that make up letters and symbols (thanks to wiki) while Sans-Serif are typefaces without serifs.  In French Sans means "without".  There
are some fonts which are available in both typefaces i.e., serif and sans-serif while few fonts are available in only serif or in only sans-serif.  Like Gothic fonts are available in sans-serif only and roman fonts are available in serif only. 

The following images will clear you the difference about these typefaces.

Sans-serif font:

Serif Font:

Serif font, with the red part showing the serifs, if you remove those serifs its a normal sans-serif font.

 As per my experience in body text of a webpage one must use Sans-Serif fonts its more discerning than Serif fonts.  Serif fonts are more clearly visible if they are used in big font sizes.  So in body text of a web page one must try Arial, Tahoma, Verdana etc.  Han! you can use those serif fonts in heading tags.  And when it comes to Logo designing, these Serif  fonts are just awesome.  They look very beautiful. But you should never try a serif font for captions for the logo, reason is those captions will be used everywhere in small sizes and serif fonts in small sizes are not discerning.  Well it was my opinion, you can't help yourself if you client want a serif font in caption, just leave him after all he/she is your client.  Their requirement is your action. Ok friends! that was enough on this topic at least I am clear about this serif and sans-serif hope you are too!!

Share Your solutions

Logo Ideas for EDPL

Hi! friends I am back again with some more logo design ideas.  This time it was all about Text Twisting.  I made five logos for this organisation Eastern Datatech Private Ltd.  Lot of text twisting but finally the one client likes is a simple text.  I tried to work a lot with the characters D and P, you can see them in those designs below.  Check the ideas I came up with.

Share Your Solutions

Safety Class!!

Today I attended a safety class in our workshop.  It wasn't that bad. We all know those things but still I thought I should share this with you people.  As per administration's analysis 88% of the accidents in industries are because of improper practice of work, 10%  of the accidents are because of improper conditions and 2% are because of Over confidence, fatigueness, lazziness etc. etc.
      I asked the person who was taking our class,"isn't that 10% factor is responsible for those 88% accidents?" that's it he was like "BOMB", he threw a typical look on me and said 16 out of 19 accidents in workshop this year were because of improper practice of work.  I realised that its just unprofitable to debate here and kept my mouth shut for rest of the class.
   But its true those 10% improper conditions are responsible for 88% of unfair and improper work practice.  The conditions we work in are just out of this world.  But administration will never agree with this, ofcourse the analysis is also made by them, but those analysis are just figures for them and for us as well.  88% is not small figure to ignore.  We are also responsible, aren't we?

CSS min-width not working

Have you ever face this problem, CSS min-width not working.  Many of you may know this but this one's for those who don't.  Well, today I had a requirement of a div which should increase in width depending on the content in it.  The images are to placed inside that div sided by side. 

       I thought min-width property will be enough, but it wasn't working.  So as usual switch to Google, but the results I found wasn't the solution for my requirement.  After a bit of CSS storming I came up with this solution.  If we use display:inline-table; to the div to which we want to assign min-width, it will work.

div{
 display : inline-table;
min-width : 200px;
}

Share your solutions.

How to wrap text around a div in all three sides of a div?

Today I got a requirement of wrapping text all around a div actually not all around, around three sides i.e., top left and bottom, like the following image.



 

Simple CSS solved my problem, this same thing can also be used for wrapping images with text all around it.

Try this code and run :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
div.topSpacerDiv {
    width: 0px;
    height: 60px;
    float: left;
   
}

div.DIV {
    float: right;
    clear: both;
    border:1px solid red;
    height:100px; width:200px;
}
</style>
</head>

<body>
<div class="container">
    <div class="topSpacerDiv"></div>
    <div class="DIV">
        DIV with content
    </div>
    is par likhi sabhi batein bilkul kalpnik hai, iska kisi bhi jivit ya mrit vyakti se koi sampark nhi hai, iska prayog keval testing

purpose ke lie kiya gya hai.is par likhi sabhi batein bilkul kalpnik hai, iska kisi bhi jivit ya mrit vyakti se koi sampark nhi hai,

iska prayog keval testing purpose ke lie kiya gya hai.is par likhi sabhi batein bilkul kalpnik hai, iska kisi bhi jivit ya mrit vyakti

se koi sampark nhi hai, iska prayog keval testing purpose ke lie kiya gya hai.is par likhi sabhi batein bilkul kalpnik hai, iska kisi

bhi jivit ya mrit vyakti se koi sampark nhi hai, iska prayog keval testing purpose ke lie kiya gya hai.is par likhi sabhi batein bilkul

kalpnik hai, iska kisi bhi jivit ya mrit vyakti se koi sampark nhi hai, iska prayog keval testing purpose ke lie kiya gya hai.is par

likhi sabhi batein bilkul kalpnik hai, iska kisi bhi jivit ya mrit vyakti se koi sampark nhi hai, iska prayog keval testing purpose ke

lie kiya gya hai.is par likhi sabhi batein bilkul kalpnik hai, iska kisi bhi jivit ya mrit vyakti se koi sampark nhi hai, iska prayog

keval testing purpose ke lie kiya gya hai.is par likhi sabhi batein bilkul kalpnik hai, iska kisi bhi jivit ya mrit vyakti se koi

sampark nhi hai, iska prayog keval testing purpose ke lie kiya gya hai.is par likhi sabhi batein bilkul kalpnik hai, iska kisi bhi

jivit ya mrit vyakti se koi sampark nhi hai, iska prayog keval testing purpose ke lie kiya gya hai.is par likhi sabhi batein bilkul

kalpnik hai, iska kisi bhi jivit ya mrit vyakti se koi sampark nhi hai, iska prayog keval testing purpose ke lie kiya gya hai.is par

likhi sabhi batein bilkul kalpnik hai, iska kisi bhi jivit ya mrit vyakti se koi sampark nhi hai, iska prayog keval testing purpose ke

lie kiya gya hai.is par likhi sabhi batein bilkul kalpnik hai, iska kisi bhi jivit ya mrit vyakti se koi sampark nhi hai, iska prayog

keval testing purpose ke lie kiya gya hai.is par likhi sabhi batein bilkul kalpnik hai, iska kisi bhi jivit ya mrit vyakti se koi

sampark nhi hai, iska prayog keval testing purpose ke lie kiya gya hai.is par likhi sabhi batein bilkul kalpnik hai, iska kisi bhi

jivit ya mrit vyakti se koi sampark nhi hai, iska prayog keval testing purpose ke lie kiya gya hai.iska kisi bhi jivit ya mrit vyakti

se koi sampark nhi hai, iska prayog keval testing purpose ke lie kiya gya hai.is par likhi sabhi batein bilkul kalpnik hai, iska kisi

bhi jivit ya mrit vyakti se koi sampark nhi hai, iska prayog keval testing purpose ke lie kiya gya hai.is par likhi sabhi batein bilkul

kalpnik hai, iska kisi bhi jivit ya mrit vyakti se koi sampark nhi hai, iska prayog keval testing purpose ke lie kiya gya hai.is par

likhi sabhi batein bilkul kalpnik hai, iska kisi bhi jivit ya mrit vyakti se koi sampark nhi hai, iska prayog keval testing purpose ke

lie kiya gya hai.
</div>
</body>
</html>





In the above code the class topSpacerDiv is most important, the small div i.e., DIv position depends on the height of the topSpacerDiv.
If you want the small div DIV in left position you have to just change the float:right; to float:left; in the CSS of DIv class.

Why dont you copy paste this code and run and try to play with the CSS, you will be clear.