Jump to content

Displaying In Different Browsers


gsingh2011

Recommended Posts

So I just designed a decent looking site that displays great in firefox... then I checked it in IE and all of the alignments are wrong and the bottom of the page doesn't even show up!! What are some things you can do that will help make your code compatible with different browsers.. If I can't come up with any quick fixes, I'll have to rewrite the code and select which browser code to use with php...

Link to comment
Share on other sites

No, don't go detecting browsers, that's a bad practise. There's no specific set of rules to adapt a page to all browsers. You'll have to show us the page so we can see the problem.The first step to get a page to look nearly the same in all browsers is to use a Strict DTD.

Link to comment
Share on other sites

Agreed with Ingolme on the Strict DTD. A serious page cannot live without that..No serious designer makes significant changes for different browsers. Very occasionally a page might require a very small change for IE. But most pages never need such a drastic solution. The trick is to learn to design with all browsers in mind. This takes practice, practice, practice, and a willingness to experiment. In time, you will learn what works and begin to do it automatically. In the meantime, visiting boards like this can help.A few tips:Even with a strict DTD, floating and clearing often render differently in IE. If elements floated next to each other have different heights, for example, the next item that is cleared may show up in an unexpected spot. Fortunately, the solutions generally make no difference to the way the other browsers render things. (For example, setting the elements to the same height, if possible.)IE can sometimes get upset if unenclosed text is immediately followed by a block-level element. You expect the block-level element (like a div or ul) to begin on a new line, but sometimes it does not. (I have experienced this in drop-down ul menus.) One solution is to enclose the bare text in a <p> element. Usually this has no negative effect in FF.The default padding and margins of many elements (<p>, <ul>, and <li> for example) is often different for ALL browsers. It is usually a good strategy to set them to 0 with the universal selector:* {padding: 0;margin: 0;}Then, if an element does need special padding or margins, you can explicitly define them.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...