₦airaland Forum

Welcome, Guest: RegisterLoginWith GoogleTrendingRecentNew

Stats: 3,326,841 members, 8,428,304 topics. Date: Wednesday, 17 June 2026 at 09:04 AM

Toggle theme

Crossbrowser HTML, CSS & Javascript : A Must Read For All Students. - Webmasters - Nairaland

Nairaland ForumScience/TechnologyWebmastersCrossbrowser HTML, CSS & Javascript : A Must Read For All Students. (759 Views)

1 Reply

Crossbrowser HTML, CSS & Javascript : A Must Read For All Students. by Nobody: 11:35pm On Feb 25, 2009
Here, first of all i am assuming you wish to create a website that will work properly in all browsers.
As we all should know, the client sided languages html, css and javascript are rendered by the web browsers.

And there are some different browser models, so sometimes you may need to write some codes that will check
the platform that is rendering your code and spit out the appropriate code.

Something a little bit related to this is the way to set the cursor to hand in css.
Internet explorer: <input type="button" value="click" style="cursor:hand">
Mozilla: <input type="button" value="click" style="cursor:pointer">

All: <input type="button" value="click" style="cursor:pointer;cursor:hand">

Now lemme give a more related example.

Try checking this out in mozilla and also internet explorer.

demo.html
<style>
.button {background:black;color:white}
*html .button {background:white;color:black}
</style>

<input type="button" value="Click" class="button">


Interpretation: the code will create a button that will have a black background and white text in mozzilla and the opposite in IE.

Lemme say that sometimes, when you have done everything right in CSS, different browsers may display your styles differently.
When you cannot manouver your way out, just make use of the *html to select specifically for internet explorer - some scripts on
dynamic drive make use of this technique (so it is not just me) - in fact is called internet explorer css soil.

If you know CSS well, you will know that there are some css that are browser specific, like position:fixed is only for mozilla browsers
and does not work in IE.

I will continue this thread later.
Re: Crossbrowser HTML, CSS & Javascript : A Must Read For All Students. by Nobody: 8:04pm On Feb 26, 2009
Now the javascript area. Now these browser again render javascript differently.
Because DOM (Document Object Model) which includes the dynamic properties of
web elements are different from browser to browser.
This singlishinese is too big sef for newbies. What i meant to say is that the browsers
speak slightly different javascript like yoruba of ijebu and yoruba of lagos.
OK, again you will find many examples of this on dynamicdrive.com

So, when you need to know the difference between browser, the very simple way
to do this is first to know if it is IE or Mozilla. Usually that solves the problem.

<script>
if(document.all) {
alert("This is internet explorer"wink;
} else {
alert("This is a mozilla browser e.g. firefox, safari, "wink;
}
</script>

Beyond this, there are some more highly advanced methods you can use to narrow down the browser.
For instance to be able to tell the different versions and also the specific browser
like safari version, , netscape version,

If you search the web properly, you will find more examples. I dont wish to go more advanced than this
unless questions are asked. I just feel like sharing this with y'all. I know it will be useful to some.
Re: Crossbrowser HTML, CSS & Javascript : A Must Read For All Students. by Nobody: 11:08pm On Feb 26, 2009
Another example of what i have been tryin to say can be found on:
http://www.javascriptkit.com/dhtmltutors/fixedcontent.shtml

<style type="text/css">

#mydiv{
position: fixed;
left: 10px;
top: 50px;
}

* html #mydiv{ /*IE6 only rule, applied on top of the default above*/
position: absolute;
top: expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+50+"px" : body.scrollTop+50+"px"wink;
}

</style>

<div id="mydiv">
Some content here
</div>
1 Reply

Learn Web Design With Video Tutorials From Nairaland -HTML,CSS,BOOTSTRAP Etc.What Is The Real (programmable) Link Between Mysql And Html/css/javascript/phpIntroducing Textpad - A Software To Quickly Learn Web Development With HTML,CSS234

How Do I Download ItA Web Developer And Designer Looking Forward To Partner With YouUploaded Image Do Not Display On The Form Why?