SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning difference between Firefox and IE

    I developed a draft website using IE as my browser. I have a scrollable sidebar (position fixed left 1px) and this is 150px wide. My bodycontent (position absolute left 170px) is positioned to the right of this sidebar and extends to the extreme right of screen. Each page looks perfect.

    Yesterday, I downloaded Firefox and SHOCK HORROR!! The obvious change is that my bodycontent is NOT positioned to the right of the of the sidebar but starts at extreme left of the screen and shows behind the sidebar. It still extends to the extreme right of screen.

    Here are extracts from my CSS file:

    #sidebar {
    position: fixed;
    top: 1px;
    left: 1px;
    width: 150px;
    height: 360px;
    overflow: scroll;
    z-index: 2;
    }

    #bodycontent {
    position: absolute;
    top: 55px;
    left: 170px;
    z-index: 0;
    }

    Any suggestions to where I should look for my apparent error?

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would need to see all the html and css code for the page, or preferably a link to a live example online. The #bodycontent div itself may not be the issue - there is no background or borders to actually see where this div is, and it could be its contents where the issue lies.

  3. #3
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. There is no active site available - it is still resident on my computer - but I am happy to send my CSS file and the HTML file for a sample page. See attachments.

    Some of the CSS segments are not in use at present and I would delete these before I go to the web hosting stage but these files do work 'perfectly' with IE as browser.
    Attached Files Attached Files

  4. #4
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Allan Jamieson View Post
    I developed a draft website using IE as my browser.
    Any suggestions to where I should look for my apparent error?
    IE will be the cause of your error. Never, ever use IE as your reference browser. It will soon be 11 years behind web standards, incorrect in much of its implementation, and, by far, the worst browser on the planet. Always, always use a modern browser (anything but IE) to do your initial testing. Then look at IE to see if/when it screws things up.

    See my links below for more information.

  5. #5
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I wish I had read "But it works in IE" before now. It did sound like me!

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have a syntax error in the rule applying multiple absolute positions - a hash means an id and a period denaotes a class, and they both cannot be used together. FF is ignoring the rule due to this error.
    Code:
    #navigation, h3, #bodycontent, #historybody, #historyphot1, #header, #historyphot2,  #.feature {
       position: absolute;
    }

  7. #7
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hej! Did anyone ever tell you that you a GENIUS? I came to work today early (still only 0735 in Tasmania) in the hope that somebody could find my error.

    Allan


Bookmarks

Posting Permissions

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