By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,730 Members | 1,620 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,730 IT Pros & Developers. It's quick & easy.

how to design a web page in css so to be stable across browsers

P: 34
Hi,

When i code a web page in XHTML, CSS, it works fine on mozilla, opera & google chrome, but gets distorted on internet explorer. Can you please suggest if i should use some specific coding technique, so that it remains stable on all browsers.
Also can someone please suggest "is it a good practice to use position tags: absolute or relative should be used?".

thanks,
Rahul
Oct 3 '08 #1
Share this Question
Share on Google+
6 Replies


Expert 100+
P: 397
Best practice is to code to compliant browsers-- so keep doing that, just as you are now.

All versions of Internet Explorer are non-compliant and are the bane of a Web designers existence. Here are a couple of sites that discuss known IE issues (bugs) and provide solutions for them:
on having layout
position is everything

When and how to use absolute or relative positioning depends on the specific problem at hand. In general, it is best to use floats to position the basic layout structure.. Smaller elements are then sometimes positioned within this structure employing absolute and/or relative positioning. When in question, refer to:
css2.1 specification
sitepoint css reference
Oct 3 '08 #2

drhowarddrfine
Expert 5K+
P: 7,435
Just want to ditto what David just said.
Oct 3 '08 #3

acoder
Expert Mod 15k+
P: 16,027
Yes, a nice, compact answer. Just posting to point out that you should at least add Safari to the list of browsers to test, and, if possible, different OSs and versions of browsers too.
Oct 4 '08 #4

P: 34
thanks a lot for these replies, i would try suggested steps & browsers.
Oct 7 '08 #5

JamieHowarth0
Expert 100+
P: 533
Ditto to what they ^^ said :-)

A couple of quick ideas for you though:
  1. IE6 and IE7 ignore this CSS directive:
    Expand|Select|Wrap|Line Numbers
    1. @import url("additionalstyles.css") all; 
    So you could create an IE-specific stylesheet, then use that code to import the correct style definitions (which would work in Firefox, Chrome, Safari, Opera etc.). It's also valid CSS.
  2. Use conditional comments. Microsoft introduced conditional comments for Internet Explorer, which are basically comments but with IE instructions in them.
    An example:
    Expand|Select|Wrap|Line Numbers
    1. <!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->
    The comments get ignored in all other browsers (cause it looks just like an HTML comment) but IE recognises these and includes them.

Hope this helps.

codegecko
Oct 8 '08 #6

P: 34
thanks for your replies, this actually worked for me
Dec 30 '08 #7

Post your reply

Sign in to post your reply or Sign up for a free account.