Chrome alone fix, here when i was in a situation where i had a good design ready for a live implementation, but there was an issue waiting for me. Everything was intact untill i got my site to be run on Chrome browser, i had an exclusive issue that was occuring only on Google Chrome.

The solution has to be in such a way that I get the css style that works only for chrome. How can I have a style written for this exclusive for Chrome???Then i got this Chrome fix on the web,

@media screen and (-webkit-min-device-pixel-ratio:0) { …….. }

Something like this,

@media screen and (-webkit-min-device-pixel-ratio:0) { id_name/class_name{style_property: style_value;} }

One good example for this can be like,

@media screen and (-webkit-min-device-pixel-ratio:0) { #right_col{height: 2419px;} }

Add this to your css styles either inline or external.It works like a wonder 🙂

Try it on your code and get back with your comments.

I am back with one more hair snatching moment at work. This one was terrible, guys cant just express in words, OMG situation. Was all going mad for a right solution. Finally got a solution looking all over the internet. So just at the end of the day feels like sharing with all of you people.

Situation: Your website, takes a drop down menu, say a javascript drop down type and also has a banner on the top that just follows the menu on its top. The stage is set well for the real trouble 🙂

Issue: Now as i get my mouse over the drop down, i get in the issue of my drop down getting below the flash banner. Initially as any ordinary developer on web, my first thought was- this is just some patching with z-index. So lets play with the CSS.

I was trying an hour and then two, oh goodness no result, tried all that i can with the positions and the z-index. Did not fetch me the result. So opted for the true companion GOOGLE. After a lot of breaking and banging of head, it was all a matter of two lines that can help me out of this. It was just as in the below example,

All i had my Flash object code as –

<div id=”flash_container”>

<!– START OF flash EMBEDDING TO COPY-PASTE –>

<object id=”player” classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ name=”player” width=”800″ height=”375″>

<param name=”movie” value=”player.swf” />

<param name=”allowfullscreen” value=”true” />

<param name=”allowscriptaccess” value=”always” />

<param name=”flashvars” value=”file=video.mp4&image=preview.jpg” />

<embed  type=”application/x-shockwave-flash” id=”player2″ name=”player2″ src=”player.swf”  width=”800″  height=”375″ allowscriptaccess=”always”  allowfullscreen=”true” flashvars=”file=video.mp4&image=preview.jpg”

/>

</object>

<!– END OF THE flash EMBEDDING –>

</div>

So wondering if i could get all the problems fixed with just having the flash player down by z index and the menu script above it by z-index valu. So i did,

#jwplayer_container{  position: relative;  z-index: 0;}
#main_menu_list{  position: relative;  z-index: 1;}

but did not really worked out, was not the solution to my issue.


With all the effort and time spent, finally got the solution. Was a matter of kust adding a parameter to my flash object. We just had to add the parameter named “wmode”, this describes about having our flash object to be with a transparent object type, so what really i have to do was add this bit of code,

<param name=”wmode” value=”transparent”>

and then assign it the value,

wmode=”transparent”

And that worked out and the menu got awesome,

the solution clicked on to all the browser. Hope this was a useful post to all to learn and explore. Thank you 🙂

Emulating IE7 in place of IE8

September 27, 2010

Sometimes fed up of all the issues over correcting the compatibility of Internet Explorer on multiple browsers we are to hang up with our incomplete work. A good solution to make the things work is to have the browsers emulated and by default make our website open with a single browser that we require the site to open wit. So here is a the code you need to add for making your website open by default with IE7 rather than IE8,

“<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />”

Hey but do remember, do not make this a permanent solution, have this as a solution until you fix all the compatibility bugs over IE8.



The concept of ID and class:

The main and the most important thing that makes the ID and class a very important and a strong concept in css is that it acts as a hook to the several elements being used in XHTML. The elements are defined with their own class and ID. They are to carry with a defining of the several parameters and styles defined under every class and ID. Now When we assign any element under our HTML with ani ID or class, then the particular element is to follow the styles defined under the respective Class or ID.

Example:
<div id=”div1″>
………
………
………
</div>

<div id=”div2″>
………
………
………
</div>

So here we can see we have the same Div element, but they follow different styles defined under their respective ID’s. And so in your CSS we define the styles, somethinmg like this,

#div1
{
Width:200px;
Height:200px;
}

#div2
{
width:400px;
height:400px;
}

So this way both the Div are to use different styles defined. The undefined styles remain the same for both the DIVs.

Difference in ID and a CLASS:

So here we come to the most important topic on this post. Its about the ID and CLASS, why do we need them as two.. As to some one very new to CSS, might feel these as one and the same. But they are not.

The ID are unique,
The most importatnt characterstic of an ID is that its unique for every element of the HTML. This way, we must define different IDs for every single element. Two elements can never have the same ID. This way, we can define different styles for different elements of same type in HTML.

The CLASS are not UNique,
In contrast to the IDs the CLASS are not a unique typed ones. We can have more than one element to be with a same class name. The class groups several elements and defines the same set og styles to all those elemets defined under the same class. This way the class helps in defining styles that we need to apply to more than one element.

Analogy:

This is an analogy that i read in one of the post recently that really made me to write this post,

Its like gives a clear idea why we go for ID and Class in two different formats, and why do we need them both. So its like take for an example, we have a product in a super market, may be a dvd pack. Now the DVD pack has a bar code on it and also a serial number of it. Here the serial number is unique for all the DVDs in the shop, whereas the barcode which defines the cost and name of the product is same for all DVDs. Here the serial number sticker acts as a class and Bar code acts as an ID. The real use comes, when the shop keeper wants to check for the number of DVD he uses, he needs the unique value called the serial number, whereas when he needs to get the product name, value cost etc which are same for all dvd he goes for the bar code reading. So when he needs to change the cost for all DVD, he simply changes the barcode (CLASS) value. Whereas if he want to calculate the number of them he uses the serial number (ID). Is n’t it a great gift of CSS to have  them both 🙂

After knowing the difference, we get a clear idea and this helps us to efficiently make use of both class and ID where ever needed.

Javascript needs ID:

This is a yet another need for the use of ID, the javascript function getstylebyid(), this allows the javascript to work on the dependency to the styles defined by the ID of an element and not by its class styles.
ID wins over CLASS

Now there was an interesting question which rises in my mind, what if i have both ID and Class defining the same styles with different values, now here which value will the element choose from?? The answer is, the value defined by the ID, as the rule of CSS always the ID overrides the Class for any element.

Hope this post clears your idea on both the ID and CLASS, and in what way they differ from each other. Thanks and do give your comments on this, and also your queries. Thanks. 🙂

Rotate with CSS!!#~!$!

March 25, 2010

Hey friends… so here we are with yet another article for CSS that i would like to share with you people,

have you people ever imagined of rotating a text or a content on your web page?? I was stunned to look at this as i have been working with CSS only for the last few months, and for a person like me it was more of a wonder. There fore i gelt i must share this with all those who must know this as a CSS developer.

So how can this be done? Its very simple just few lines of CSS code as usual for the specific browser and there we have the object rotated as per our need in the HTML page, as is shown below.

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);

here you go with the code for the Opera and the MOzilla firefox, but there has been no simple code as this for the IE, as usual the browser compatibility has been the ghost that haunts every Web developer 🙂

We just need to specify the angle of rotation in the parameter’s list, say if i had to rotate for about 30 degree clockwise then i might give the caode as,

-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);

So there i shall have my content in the content tag getting rotated for the 30 degree angle, is n’t it fantastic to have our css do all these 🙂

But what about IE???? we have a solution to this.. its a function defining with a matrix structure that defines the points of rotation converted from the unit of degree to PI, let me not confuse with a code that look like as below,

-ms-filter: “progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=-0.50000000, M21=0.50000000, M22=0.86602540,sizingMethod=’auto expand’)”;
filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=-0.50000000, M21=0.50000000, M22=0.86602540,sizingMethod=’auto expand’);
-moz-transform:matrix(0.86602540, 0.50000000, -0.50000000, 0.86602540, 0, 0);

-webkit-transform:matrix(0.86602540, 0.50000000, -0.50000000, 0.86602540, 0, 0);

-o-transform:matrix(0.86602540, 0.50000000, -0.50000000, 0.86602540, 0, 0);

(the above code was for rotating 30 degree)

i will get this done in much easier way for the IE to be done, do follow this link “rotating in IE”. Jut give the angle and get your code for the CSS.

Hope this helps. Just give a try..
(Guidance: Jonathan Snook, thanks)
Do let me know your comments and views.

You might have seen the round rectangular boxes on the web layouts, as a naive and new developer you might wonder are they simply using the image background?? though many tend to use the images as for getting the rounded corners…

but hey we have much of an effective way of getting this on our page with out any image used here, as usual the magic done with our CSS, so let me share this simple css code that will help you getting the rounded edge for your div tag.

The code goes like this,

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

here the pixel values we give defines the radius to which we would like our corners to be curved, and what for the three line code??

the first line is defined for the Opera browser, the second line is for the mozilla fire fox and the basic general code in the third line.

There is a problem though that keeps this technique not used is that the Internet Explorer has got no such CSS support that might allow it to have the rounded corners. So we might have to keep us only to the other browsers mentioned above. As for getting a browser compatible site we may have to give this up.. but using this does not reflects on the layout, except that the corners appear as straight squared in IE browsers..

So just give a try, and keep hoping these browsers come up with solutions that really eases our task and stops us from pulling our hair for every single layout issue.. 🙂 the dawn is yet to come..

This topic that i wish to share with all you people is something that every
developer must have it as the basic and a very important requirement before he/she starts his website design. This topic will teach you how you can have your website footer stick to the bottom of the browser. Specially this case might be a challenge in case your page size is smaller than the computer screen where u might have the footer to appear wiered and does not makes a look as it looks different in different screen size.

If u have a webpage that has the size of the screen and browser then just hit F11, you will notice the issue i am referring to here..

So to have this issue solved, i advice every one that you look for this as u start your design rather than searching a solution after the design is complete, because as the design gets done we might have to change the structure of the whole page layout as per the solution’s requirement. So look for this before you have your start.

Okie let me jump in to the ral issue here, first for those who might have not understood the issue let me brief with a simple diagramatic presentation which will help you out comprehensively..

the first image down here shows the real problem that we have in the usual way of our design,

now as we apply the technique through our CSS, we might have it solved as is shown below..

lets see what really we got to do to have the solution,
the first thing to concentrate is how to have your page structure designed, so the HTML page layout must be something like this,

<div id=”content-holder”>
<div id=”header”></div>
<div id=”main-content”></div>
<div id=”footer”></div>
</div>

Once you follow up the above structure the way from here on is more simple than you might have imagined, because that is the power of CSS 🙂

All you have to do is simply add the CSS to your web page as is shown below with all your requirements as per the design you like to apply,

html,
body, div
{
margin:0;
padding:0;
height:100%;
}

#content-holder
{
margin: 0 auto;
min-height:100%;
position:relative;
}

#header
{
background:#6eed71;
padding:10px;
}

#main-content
{
padding:10px;
padding-bottom:60px;   /* Height of the footer that we use below here */
}

#footer
{
position:absolute;
bottom:0;               /*very important property*/
width:100%;
height:60px;   /* Height of the footer that you can have it as per your need and requirement */
background:#6eaee4;
}

this is it we are done, but hold on we have to make it compatible with all other browsers, right???
so there is an additional code added for the IE6,

#content-holder
{
height:100%;
}

%d bloggers like this: