Some important points must be considered while developing a site with cross browser capability: –
1) CSS Box Model: –
CSS Box model by W3C
Total Width = Margin-left + Border-left + Padding-left + Width + Padding-right + Border-right + Margin-right
CSS box model Supported by IE
Total Width = Margin-left + Width + Margin-right
Compression between these two CSS Box Models
Now we can see the difference in above example how IE renders the content width. While writing the CSS If we consider this point in our mind the Layout of our site will never break.
2) Always clear floated element: –
When an html tag end we should always try to clear the block element because we don’t know is the element is floated or not. We have to avoid the overlapping the element.
syntax:
<div class=”clear”></div>
CSS
.clear{clear:both}
3) Overflow Properties: –
We know that all modern browsers supports overflow:hidden but IE 6 didn’t support overflow:hidden
CSS Fix
Make the container DIV as overflow:auto and inside container any html tags make it position:relative and these CSS will go down in ie.css or conditional ie.css
Syntax of condition ie css
<!--[if lt IE 6]> <style type="text/css"> #container {overflow:auto} #container p{position:relative} endif]-->
4) Background Attached Image problem: –
While Writing CSS for background properties sometimes we forgets its elements position
Example:
background:url("img/bg.png") repeat-x scroll 0 0 #EBEBEB;
This syntax will work fine in all browsers but sometimes instead of background color we didn’t require any color, so sometime we write our CSS like this
background:url("img/bg.png") repeat-x scroll 0 0 transparent;
Oh this will work in all modern browsers but it’s not going to work on IE.
IE only works when the used parameters is corrects.
IE is looking for this if he found the syntax in such a manner then it will work,
Correct placement which works in any browser
syntax
background:transparent url("img/bg.png") repeat-x scroll left top ;
5) Text-indent Problem:
p a{text-indent:-999;display:block}
It work perfectly fine again in all modern browsers but Its again not going to work on IE.
For all browsers the syntax would be,
p a{text-transform: capitalize;text-indent:-999;display:block}
After adding text-transform: capitalize it will work fine.
6) z-index problem for embed code: –
Most of the time we are facing the problem of z-index when we apply it on embed code. To make it work, In the object of video , try setting a param
wmode = transprant
Add this to your object:
<param name=”wmode” value=”transparent”>
and this to embed:
wmode = “transparent”
and remember to close your embed tag with either
</embed>
I hope you enjoyed this tutorials. Suggestions and feedback’s are most welcome.Will try to provide more details in my next post.
It is very useful article.
Thanks Saorabh.
very helpful information
Thanks dude for your comment.. 🙂
Nice tips, continue this tutorial buddy
Yes, I will as I said in this post I will always try me level best to share some more and more tips with you all.
Thanks for for comment Mad Geek..:)
@Saorabh Thanks for the awesome post. 🙂
Thank you vector:)
Thanks for posting this. I had some CSS issues I had been wrestling with on two of my blogs that left me scratching my head for days.
I finally solved most of them by brute force, put probably screwed up some other stuff.
I think it’s worth while to learn CSS better. I appreciate the CSS tips. I will review my CSS files to see If I have any of these issues.
Hey Jason thanks for your comment.. Definitely this post will help you at the any point if you have some problem, fell free to ask me its really pleaser for me..:)
great tips. i’ll make a note of this
Thanks Himanshu:)
This tutorial helped me to improve my CSS knowledge. Nice tutorial and you have presented well.
Thank you for your comment Mukundan 🙂
definitely a great CSS tutorial…i have just started learning CSS and in these 2 weeks, it has been fascinating
Hey Tushar Thanks for your comment:)All the best enjoy:)
yes…a great css article. Damn helpful..!!
Helpful article.