File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes How to make web site Compatible with all Browsers ? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Spring in Action this week in the Spring forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "How to make web site Compatible with all Browsers ?" Watch "How to make web site Compatible with all Browsers ?" New topic
Author

How to make web site Compatible with all Browsers ?

Tejas Shende
Greenhorn

Joined: May 31, 2009
Posts: 6

Hello All,

I am developing a Web site using HTML and Javascript. But I am facing a big problem that when I open a page in Mozilla the controls (e.g Text box,label,buttons etc.) alignment is fine, but when I open same page in Internet Explorer 6 and above the all controls get scattered ,same thing happen with Opera and Google crome.Can anybody tell me how to make a web site Compatible with all Browsers ???


--Regards
Tejas
Marco Ehrentreich
best scout
Bartender

Joined: Mar 07, 2007
Posts: 1282

Hi Tejas and welcome to the JavaRanch ;-)

Unfortunately I have to admit that I'm absolutely no expert in web design but I hopefully can give you some advices anyway...

First I think it's not a good idea to support really ALL browsers with all versions. I guess you should know your expected audience and try to make most of them happy supporting the majority of browser they're gonna be using! I'm for example a Linux user and therefore I use text-based console browsers from time to time to download something etc. But I don't expect that any modern full featured site is optimized a text browser and I think it's not worth the effort to plan for a text browser when you develop a web site

Second it's probably a good idea for you to conform to web standards as good as possible. Unfortunately there are and will probably always be some details where popular browsers don't conform to a standard but the best compromise for a web developer is perhaps to develop everything accordingly to official standards if you don't want to optimize for a particular browser. You can easily check this with online available validators for XML, (X)HTML, CSS etc.

And for JavaScript it's possibly the best idea to use some ready available libraries like jQuery, Prototype, Scriptaculous and so on unless you only need to do very basic stuff. I'm pretty sure the library's developers are doing their best to make the functionality available to all important browsers. So you can focus on how to use the library instead of creating all the JavaScript for different browsers and versions manually.

Besides what kind of problem are you exactly experiencing? Do you know if your pages conform to HTML/CSS/XML standards? How did you create them? By hand or with a design tool?

I hope there are some advices which may help you!


Marco
Tejas Shende
Greenhorn

Joined: May 31, 2009
Posts: 6
Hello Marco ,

Thanks for your advice.It will help me. I have designed all the pages by hand.
Jeanne Boyarsky
author & internet detective
Marshal

Joined: May 26, 2003
Posts: 30753
    
156

Maybe not ALL browsers but the ones Tejas mentioned should be supported by a public site. I think the biggest thing is to make sure your site works without JavaScript and that it renders in all browsers (even if it looks better in some than others.)


[Blog] [JavaRanch FAQ] [How To Ask Questions The Smart Way] [Book Promos]
Blogging on Certs: SCEA Part 1, Part 2 & 3, Core Spring 3, OCAJP, OCPJP beta, TOGAF part 1 and part 2
Marco Ehrentreich
best scout
Bartender

Joined: Mar 07, 2007
Posts: 1282

You're of course right. I should have mentioned that it would be a good user experience to support at least current versions of the most popular browsers. What I wanted to say is, that it's probably not worth worrying too much about really old versions of these browsers.

Anyway, Tejas, did you validate the pages you created by hand? Or are you sure they are correct in the sense of correct HTML etc.? As I said I'm not an expert in this topic but if the pages aren't very complicated and they are valid I can hardly imagine that some browsers totally mess up the pages. As Jeanne pointed out some browsers may render a page better than another one but with current versions of all popular browser you should have much less problems regarding compatibility in contrast to the situation years ago.

Perhaps you can tell us more about what exactly gets scattered and how you're doing the layout and positioning for the said control elements.

Marco
Tejas Shende
Greenhorn

Joined: May 31, 2009
Posts: 6
Hello Macro and Jeanne ,

Thank you for replay.I have validate the pages that I have created , like the textbox should not be blank,email id should be in correct form etc etc.When I am trying to develop supportive for Firefox then it get scattred in IE and when I am trying to develop supportive for IE it get scattered in Firefox and I can't judge about the browser which will used by my clint.
So I just want an idea how can I do this.

anyways I am attaching a screenshot of my web page with IE it will give you an exact idea.In firefox it looks fine , just Like I want.I squred the actual location also in image where exactly it should be.


Tejas



[Thumbnail for IE.jpg]

Marco Ehrentreich
best scout
Bartender

Joined: Mar 07, 2007
Posts: 1282

Hi Tejas,

obviously we're talking about very different kinds of validation

It's a very good idea to do the kind of data validation you do with your form data. What I meant instead to find your problem was to validate the HTML pages themselves i.e. if your pages are valid and correct HTML! You can for example use this validator of the W3C to upload the HTML files and see if they conform to the HTML standard. The validator will show you if and where you have errors in the pages!

From your screenshot we can see now what is the problem. Unfortunately it's hard to tell what causes the problem only by looking at the rendered result. How are you currently trying to tell the form where on the page it should be? Are you using HTML tables to do the page layout? Or are you using CSS to define the layout?

I have to say it once more, I'm not too familiar with the art of web design. From my personal experience I can advice you to use HTML only to define the structure of a page (headings, paragraphs etc.) and maybe use HTML tables to layout something like the input form but not more. Then do the visual layout only with CSS and use only CSS functionality which is known to work for all browsers you want to support. I think there are lots of information on the internet to find out which browsers really support which CSS features.

Perhaps someone with more experience in web design may give you better advices but if your pages are not more complicated than the screenshot a little mix of HTML and CSS surely should do the trick to render your page ALMOST equally in the said browsers.

Marco
Tejas Shende
Greenhorn

Joined: May 31, 2009
Posts: 6
Hello Macro ,

I don't have done any kind of validation that you are talking about .The place I have marked the screen shot is where the control should be appeared.When I opened the page in firefox the control is get placed exactly there where I have marked but when I opened the same page in IE then as you can see in the screen shot the control get scattered. I have used the table tag and CSS for better result .But I am unable to find why this happen. If I develop my APP IE supported then it is useless for firefox and vice versa. The thing is that I can't force my client to use a specific browser(e.g. firefox).

So I need a simple trick which will solve my problem.
David Newton
Author
Rancher

Joined: Sep 29, 2008
Posts: 12617

The best place to start is with a reset CSS (I've used Yahoo's, but there are many others) and build the rest of the CSS up from that.

There are lots of IE workarounds (especially IE6, at least in my experience). I try to let other people solve those types of problems--and the web is full of people who have.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Make sure to put your browser in compliance mode by adding a doctype to the top of your html pages. You should install the web developer toolbar to figure out what is going on with IE's CSS. You should validate your HTML markup. You should remove styles and add them one by one and see what is not being applied.

Eric
Tejas Shende
Greenhorn

Joined: May 31, 2009
Posts: 6
Hello Eric and Marco,

Thanks for reply. I will do the same thing that you have told me.
Tejas Shende
Greenhorn

Joined: May 31, 2009
Posts: 6
Hello All ,

My problem is get solved.I have RESET my CSS and made bit change in my code and the things get done.

Thank you ALL for your Valuable suggestion you have shared with me.

Be in Touch...
Andy Crane
Greenhorn

Joined: Dec 30, 2008
Posts: 17
David Newton wrote:The best place to start is with a reset CSS (I've used Yahoo's, but there are many others) and build the rest of the CSS up from that.

There are lots of IE workarounds (especially IE6, at least in my experience). I try to let other people solve those types of problems--and the web is full of people who have.


This is a great place to start! It puts all of the browsers on an even playing field.

Anyway, if you're still experiencing some IE issues with how things are laid out from one browser to another, a great place to check for known bugs and fixes for IE is Position Is Everything.

One thing that I've noticed can get a lot of developers in trouble is floats. Floats are awesome for layout, if used and closed correctly. If not, they can be a nightmare if you're not familiar with them.

Of particular note is the padding + float bug in IE. For example:

You have set a global style for paragraphs that states "padding-left: 40px;", and everything is fine in IE and FF. Then you have a paragraph that you need to add "float: left;" to. You do that, and in FF it looks great, but in IE it has 80px of left padding, instead of the 40px that you defined.

This is because IE always doubles the left padding on elements that are floated left. To fix it, just add: "display: inline;" to the style for that particular paragraph (not to the global style). This fix does not adversely effect any other browsers while fixing the issue in IE.



Another way to avoid browser issues for your overall layout is to keep in mind that if something has a defined width, do not add left or right padding to it. The same goes for height and top or bottom padding. You'll find that if you define a width of 100px to an element, and then give it this: "padding: 0px 25px 0px 25px;", that it will actually take up 150px, instead of 100px. This is true in all browsers that I am aware of.

- andy c
"Pseudo code first. If you can pseudo code accurately, when you start writing code, you're just applying syntax to the pseudo code. It separates the two most complicated pieces of programming into manageable bites. You create your app's workflow without worrying about syntax. Then you code without worrying about your app's workflow."
Andy Crane
Greenhorn

Joined: Dec 30, 2008
Posts: 17
Eric Pascarello wrote:Make sure to put your browser in compliance mode by adding a doctype to the top of your html pages. You should install the web developer toolbar to figure out what is going on with IE's CSS. You should validate your HTML markup. You should remove styles and add them one by one and see what is not being applied.

Eric


Eric, I missed this on my first run through the responses. You've hit on a key issue in my opinion.

If you do not define a doctype at the top of your page you will NOT get IE to behave as you would expect it to. Even the IE CSS hacks break without a doctype. Trust me on this one, make sure every web page you serve has a doctype. Or take the number of hours for your project that were allotted to front end development and double it.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: How to make web site Compatible with all Browsers ?