View Full Version : cross-browser functionality

06-15-2010, 03:31 AM

I am having a problem with my website displaying differently in IE and Firefox. Also, I created it on my computer which is 1024 x 768 monitor but when I viewed on a 1280 x 800 monitor it appeared more stretched and there was a white space between the top and middle frames (although I'm not sure if it's between the frames or between the background images in these frames). Also, on other pages the margin settings I had specified in the code have changed and stretched across a wider portion of the page.

In Firefox on a 1024 x 768 monitor everything displays as it should. However, in IE the space between frames becomes much larger. Again, on a different monitor, the whole site appears stretched more than it should be.

How can I get this to display the same way on ALL monitors and browsers?? Please take a look at the code I have and let me know what the problem is. Thanks so much!!

http://www.poojasdesigns.com/ (this is the homepage.. just 'view source' to see the HTML)
http://www.poojasdesigns.com/style.css (CSS file for entire site)


06-15-2010, 09:37 AM
Add the following into your CSS to nullify all browser specific default values of margins and padding from all elements and see what happens.
*{margin: 0;
padding: 0;}

06-15-2010, 10:11 AM
Parts of your site are set to fill the entire window - you have elements that are aligned to the left of the window & parts that are aligned to the right...different size screens/windows are going to see this differently.

To fix this, you need to enclose the main layout with a fixed width div...might also be worth centering it by using auto margins as well.

06-15-2010, 09:17 PM
What should the width be of the fixed-width div? And you mentioned about setting the margins to auto.. is that the margins of the div? Let me know.. thanks! =)


06-16-2010, 09:57 AM
Take a look at http://bonrouge.com/2c-hf-fluid.php, which is a good 2 column layout. You may modify it for your needs.

06-16-2010, 07:20 PM
Thanks for this tutorial. But the problem remains that i dont know what the width of the div should be in order to keep the page appearing as it does now. Is there some way to know that or is it just going to be trial and error kind of thing?

06-16-2010, 08:39 PM
I think as a quick fix you could wrap everything inside a container DIV and then add to your CSS:

margin:0 auto;

Because by using position absolute everything is positioning in relation to the browser window so obviously it looks different in different resolutions. However this way it will position everything absolutley relation to the container rather than the browser window.

And 1024px was used because i'm assuming you meant it looked the way you wanted in a 1024x768 resolution..

The gaps are probably appearing because some elements have different default paddings and margins applied to them in different browsers. For example on the <p> element Firefox and IE apply different margins and paddings so unless you set them or reset them as described in post#2 the defaults will be used.

Welcome to the world of browser compatability anyhow it's can be a complicated journey but it's achievable!