Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question cross-browser functionality

    Hi-

    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)



    *Pooja*

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Add the following into your CSS to nullify all browser specific default values of margins and padding from all elements and see what happens.
    Code:
    *{margin: 0;
    padding: 0;}
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Apr 2010
    Location
    Norfolk, UK
    Posts
    34
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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.

  • #4
    New Coder
    Join Date
    Dec 2009
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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! =)


    *P*

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New Coder
    Join Date
    Dec 2009
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?

  • #7
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    I think as a quick fix you could wrap everything inside a container DIV and then add to your CSS:

    Code:
    #container{
    position:relative;
    width:1024px;
    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!

  • Users who have thanked Scriptet for this post:

    psha85 (06-16-2010)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •