CSS “child selector” – your website to work both for IE (except IE7) and Firefox

I have worked with websites that did not have problems with regards to browser compatibility issue. Those, I think were the ordinary and simple websites, though from among the complicated website (templates) that I’ve done, a few required to really digging in deeper to be able to work mostly both for Internet Explorer and Netscape or Firefox, that is without using “child selector” in CSS. These used only browser detection javascripts or other scripts that can be applied possibly just to meet the requirements. Of course with this kind of solution, you are saying that you need more time, exert more effort, consume more resources, etc. Before knowing “child selector”, I wasn’t able to perfect similar layout or look for the websites that I made for both Internet Explorer and Firefox.

Last year, as I was doing a website for one of the companies I worked with, I came across this problem again and this time would like an output perfectly similar look for both IE (except for IE7) and FF. I have searched the internet and came across this vibrant solution of using CHILD SELECTOR and…voila! … I made a 99% similar look and feel of just one website without using other scripts but only CSS.

For Internet Explorer (I think for IE5 and 6 but not IE7; it will recognize child selector), you’ll have your normal css code and then followed by the code with child selector. The css line with the child selector will be skipped by IE and the one with child selector will be used by Firefox (and I think by Opera and other browsers also). Below is an example of codes I used:

td.pagitan1 { height:13px;}

html>body td.pagitan1 { height:6px;}

You see, the first line will be used by IE (again, except for IE7) and the second line by Firefox and other browsers. The “html>body” is the child selector used. So basically, IE will use the height of 13 pixels while FF will use the height of 6 pixels. Others tell that a space between the child selector and the tag will not work fine like the one in our example but as far as I am concern and with respect to the codes for websites that I made, it worked fine.

Now for those of you who have not done this or who don’t know this technique yet, try it! God Bless!

3 Responses so far »

  1. 1

    i have a problem with my one of my websiteThe Tanauan Leyte Blogsite. The sidebar is fine when i use IE but if i use firefox…nasisira hitsura nya. Don’t know kung saan ko kakalikutin. Any help? try kong hinanap sa style.css pero di ko matumbok pa rin. Thanks.

  2. 2

    jeffdan said,

    Please post here the lines which you think are making the problem..thanks.

  3. 3

    diyords said,

    /* CSS Code — No comment! LOL!!! */

    Good thing there are lots of developers and designers shared their codes to scavengers like us! :)


Comment RSS · TrackBack URI

Say your words