SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 compatibility issue

    Hi there,

    I'm working on an assignment for my class, and I'm having issues with my site in IE6. I was using the css frames (fake frames) script, and it make everything go crazy in IE6. For some reason when I write the exceptions for IE6 it changes the way it looks in IE7 and firefox. I would appreciate any help.

    Here's a link to the site.
    http://sulley.dm.ucf.edu/~fr265478/groupproject.html

    Here's a link to a section that has more media on it.
    http://sulley.dm.ucf.edu/~fr265478/csspractice.html

  2. #2
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey there again. IDK if anyone is trying to figure this out, but I would appreciate any responses. Maybe I'll figure it out with a few hints. Here is the css that is being used.

    Code:
    body {
    background-image: url("http://img169.imageshack.us/img169/4756/bgroundgradvg8.png");
    background-position: right;
    background-repeat: repeat-y;
    background-attachment: fixed;
    position: relative;
    min-width:640px;
    }
    /*content*/
    #content-wrapper {
    padding:6em 0 0 0;
    margin-left:0;
    voice-family: "\"}\""; 
    voice-family:inherit;
    margin-left:16px;
    padding-bottom:60px;
    }
    
    body>#content-wrapper {
    margin-left:0;
    z-index:1;
    }
    
    #content {
    width:900px;
    margin:0 auto;
    z-index:1;
    }
    
    /*Global navigation*/
    #nav {
    position:relative;
    top:2.5em;
    width:100%;
    padding:0 0 2px;
    height:1em;
    }
    	
    #nav ul {
    float:left;
    width:100%;
    list-style-type:none;
    }
    	
    #nav li {
    display:inline;
    float:left;
    width:auto;
    }
    	
    a:link {
    color: #000055;
    text-decoration: underline
    }
    
    a:hover {
    color: #000033;
    text-decoration: none
    }
    
    a:visited {
    color: #000099;
    }
    a:active {
    color: #000055;
    text-decoration: underline
    }
    
    /*menu*/
    div#leftmenu {
    position: fixed; 
    top: 150px; 
    left: 0; 
    width: 166px; 
    height: 700px; 
    font: 16px Verdana, sans-serif; 
    z-index: 2;}
    
    div#leftmenu h4 {
    display: block; 
    text-align: center; 
    font: bold 1em sans-serif; 
    padding: 5px 10px; 
    margin: 0 0 1px; 
    border-width: 0; 
    text-decoration: none; 
    color: #444444; 
    background-color: #AAA;
    border-right: 5px solid #AAA;}
    
    div#leftmenu a {
    display: block; 
    text-align: center; 
    font: bold 1em sans-serif; 
    padding: 5px 10px; 
    margin: 0 0 1px; 
    border-width: 0; 
    text-decoration: none; 
    color: #ffffff; 
    background-color: #444;
    border-right: 5px solid #505050;}
    
    div#leftmenu a:hover {
    color: #000888; 
    background-color: #AAA;
    border-right: 5px double white;}
    
    div#leftmenu a span {display: none;}
    div#leftmenu a:hover span {
    display: block;
    position: absolute; 
    top: 260px; 
    left: 0; 
    width: 125px;
    padding: 5px; 
    margin: 10px; 
    z-index: 100;
    color: #AAA; 
    background-color: black;
    font: 10px Verdana, sans-serif; 
    text-align: center;}
    
    body>#header-wrapper {
    position:fixed;
    z-index: 3;
    }
    
    #header {
    height:125px;
    width:auto;
    margin:0 auto;
    z-index: 3;
    }
    This is the exception I started, and changed many times. I just don't know what to do now.

    Code:
    <!--[if lt IE 7]>
    
    div#leftmenu {
    position: absolute;
    top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop)
    }
    
    
    #header-wrapper {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6em;
    }
    #header {top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop)}
    #content-wrap {height:100%;}
    
    * {
    margin:0;
    padding:0;
    }
    <![endif]-->
    Thanks again.

  3. #3
    Always A Novice bronze trophy
    K. Wolfe's Avatar
    Join Date
    Nov 2003
    Location
    Columbus, OH
    Posts
    2,182
    Mentioned
    67 Post(s)
    Tagged
    2 Thread(s)
    I think you are going about your design wrong. Easiest hack is the simplest design. Why not try the following layout to fit your needs?

    http://www.sitepoint.com/forums/showthread.php?t=143801

    Its is cross browser compatible and yo can easily make that work for what you are doing. Your header image should go into your body background and the right side background should go into the right columns background.

    Cheers :-)


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
  •