Forum Moderators: open

Message Too Old, No Replies

Using Css how can we make our design consistent in all browsers?

Redesign our website, So which type of CSS using for designing

         

hanumant

10:00 am on Mar 10, 2009 (gmt 0)

10+ Year Member



We are trying to redesign our website, we are using CSS for designing, but sometimes it does not work properly on some browsers. The question is how can we make our design consistent in all browsers?

CSS_Kidd

1:53 pm on Mar 10, 2009 (gmt 0)

10+ Year Member



Well it's hard to give an answer. How familiar are you with html and css. Sorry to say, but that is kind of a broad question. If you know very little, you might want to search online for tutorials and references. There are endless resources out there for free.

rocknbil

4:18 pm on Mar 10, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome aboard hanumant!

First step: use a valid document type [webmasterworld.com].

Second step: Validate your pages [validator.w3.org]

These two should put your document in Standards Compliance Mode as opposed to Quirks mode. To check, find some background area of the page, right-click and select "Page Info" in FireFox or Properties in IE. Look at the setting for render mode.

These alone will rectify 95% of your cross browser problems. You may have to do some tweaks for IE, ad many tweaks for IE6, but this will get you on the right path.

swa66

12:49 am on Mar 11, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I usually promote the following path:
  1. choose any browser that is not IE. Forget about IE till step 6, don't even look at how it displays. I usually use Firefox but that is due to plug-ins like firebug and web developer toolbar.
  2. Make sure you follow standards and regularly validate it all
  3. Whenever you add something that doesn't do what you need: remove it again, don't leave unneeded stuff in there.
  4. At large milestones check the layout in other standards compliant browsers to make sure you're not relying on a bug or feature that might still be in the browser you chose (try firefox, safari, chrome, opera etc.)
  5. Once you have what you want, test it properly in all the compliant browsers (no not yet in IE), validate it, add comments where needed and declare the CSS "DONE". Yes, do not change it anymore to try to get it to work for IE, it's the biggest time saver you'll ever find.
  6. For IE6 and IE7: test it in each individually and fix any issue it has using CSS linked from a condition comment only targeting the specific IE version. I usually save time by intentionally not trying to understand why the proprietary browser deviates and just try to make it look right.
    The amount of code you add can be significant, but it'll only affect the one browser needing it to work around its problems.
  7. done, optionally look at IE8, it should not need much, but fixing it is too soon: you're still looking at beta releases, and Microsoft promised it would finally be compliant...