SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    an explanation of what IE7 is doing, please

    I came across this in another forum.

    http://members.shaw.ca/jillianandrya...etexample.html

    FF and IE7 display things VERY differently. I tried removing the position:fixed for the nav, and IE7 still displayed it the same way. Also, making the viewport tiny (or setting container to have a big height) shows the nav div fixed in IE7 when you scroll.

    So, what's the cause and what's the fix so it displays the same in IE7 and FF?

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Odd. When I remove position:fixed #nav moves to the left instead of staying in the middle of the page.

    The problem is that IE7 isn't calculating what left:auto should be correctly.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Make up your mind float left or position fixed ?

  4. #4
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Not my code, all4nerds, and that was my first thought too. But removing position fixed (as I said) still gave the same result.

    but this does work, which is how I'd have tries it.
    EXCEPT the yellow background disappears in FF!.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    
      
        <meta content="text/html; charset=us-ascii" http-equiv="content-type"><title>IE7 Breaks Offsets</title>
        
        <link rel="stylesheet" href="offsetexample_files/ie7breaksoffsets.css" type="text/css">
        <meta content="Ryan Shannon" name="author"><style xml:base="/jillianandryan/files/temporary/" type="text/css" id="webdeveloper-edit-css-style-0">/* Generated by KompoZer */
    #container {
      background-color: #ffff66;
      min-height:1&#37;;
    }
    #nav {
      width: 20%;
    
      float: left;
      background-color: red;
    }
    #main {
      background-color: #3333ff;
      float:right;
      width: 60%;
    }
    </style></head><body>
        <div id="container">
          <div id="nav">
            Navbar<br>
            <br>
            Watch me move!
          </div>
          <div id="main">
            These lines are simply to hold the space.<br>
            blah<br>
            blah<br>
            blah<br>
            blah
          </div>
        </div>
      </body></html>
    Just wondering why it goes wrong.

    so is it just the left:auto in the original code that's at fault, as Kravvitz suggests? (after removing the position fixed)

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Clear the floats for FF
    #container {overflow:hidden;

  6. #6
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You beat me to it by 20 minutes!
    I knew I'd seen this somewhere before (sitepoint, almost certainly) and couldn't remember it for ages.

    Thanks.


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
  •