Grow your CSS skills. Land your dream job.

position: fixed in IE7

  • # October 15, 2008 at 4:01 pm

    Just looked at the XHTML Strict tips on scriptandstyle.com, one of the latest posts, and
    tried setting up a web page with the nav bar at the top fixed no-scroll like the web site
    you are linked to for the article. Is position: fixed not supported by IE6/7 because I had
    to add <br /> to allow for space for my nav bar at the top of the screen, otherwise the
    following content will be overlaid by the nav bar? now in the example the nav bar is placed
    at the bottom of the screen, and I have not checked the css code yet for special IE provisions.

    It looked like an interesting technique, so thought I would try it in a simple example.

    example: http://www.stthomascurlingclub.com/new/new3.html

    # October 25, 2008 at 10:11 am
    Quote:
    Not Found
    The requested URL /new/new3.html was not found on this server.

    Your site seems to be down at the moment

    # October 25, 2008 at 10:30 am

    the example is back http://www.stthomascurlingclub.com/new/new3.html

    in my example, I have placed the navigation bar on top, followed by the header and then content on the page,
    trying to emulate the example I mentioned in the first post

    the top navigation menu bar is fixed

    for IE7, I had to add 3 <br /> in the HTML code to get the following content to show where it should,
    but this was not necessary for FF2. I have not tried it in IE6, other than in browsershots.org

    is there any way to set the code up so that you do not need to specify the 3 <br />’s in the IE code
    or any other conditional statement for IE?

    adding a margin-bottom to the nav bar will work in IE7 but adds a large space on the top in FF2.
    that is why I added the 3 br’s and eliminated the margin-bottom. I guess I could try a conditional
    addition of the margin-bottom if IE, didn’t try that yet.

    Al

    # October 27, 2008 at 12:34 am

    in the CSS code, you will notice that I have a margin-bottom specified on id #content, this works in FF but not in IE7. the effect of it not working in IE is that the header is covered by the nav bar. to get around this, I added a conditional statement for IE that adds a line break to the code. this seems to work the way I want it to.

    so adding a margin to the top of #content works in FF but not in IE7, why? I guess this is the question I would like an answer to. is there a better way to push the content down in IE7?

    Al

    http://www.stthomascurlingclub.com/new/new3.html

    HTML:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
    nonummy nibh euismod
    tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
    nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
    willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
    dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
    facilisi.

    2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
    nonummy nibh euismod
    tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
    nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
    willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
    dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
    facilisi.

    3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
    nonummy nibh euismod
    tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
    nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
    willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
    dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
    facilisi.

    4. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
    nonummy nibh euismod
    tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
    nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
    willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
    dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
    facilisi.


    CSS

    Code:
    * { margin: 0; padding: 0; }
    body {font: 1.0em/1.2 Georgia, Verdana, sans-serif; background: url(images/ice_bg.jpg) repeat;}
    #page-wrap {width: 1000px; margin: 0 auto;}
    #navbar {font-size: 12px; font-weight: bold; line-height: 20px; height: 20px;
    position: fixed; top: 0; left: 0;
    background: #8B0000; padding: 3px 0; width: 1000px; text-align: center;}
    #navbar a {text-decoration: none; color: white; border-bottom: 1px dotted white; margin: 0 2px;}
    #navbar a:hover {text-decoration: none; border-bottom: 1px solid white;}
    #header {height: 148px; text-align: center;}
    #header img {float: left; height: 148px; width: 149px;}
    #header a {color: black; text-decoration: none; border-bottom: 1px dotted black;}
    #header a:hover {color: black; text-decoration: none; border-bottom: 1px solid black;}
    h1 {font-size: 65px; font-style: italic; padding-top: 5px;}
    h6 {font-size: 12px; margin-top: 2px;}
    #content {width: 1000px; margin-top: 20px;}
    .imgleft {float: left; margin: 0 10px 10px 20px; display: inline; border: 1px solid black;}
    .imgright {float: right; margin: 0 20px 10px 10px; display: inline; border: 1px solid black;}
    #main-content {background: url(images/bkgd.gif) no-repeat right top;}
    #footer {font: 10px Verdana, sans-serif; color: black; text-align: center;
    height: 15px; line-height: 15px;}
    #footer a {text-decoration: none; color: black; border-bottom: 1px dotted black;}
    #footer a:hover {text-decoration: none; border-bottom: 1px solid black;}
    p {line-height: 1.2em; margin-bottom: .75em; padding: 0 20px;}
    .floatleft {float: left;}
    .floatright {float: right;}
    .center {text-align: center;}
    .clear {clear: both;}
    .justify {text-align: justify;}
    .img {border: none;}
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".