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
    Regular Coder
    Join Date
    Jan 2006
    Posts
    251
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS failing in IE

    Got a site laid out in Firefox - looking good.
    Checked site using I-EEEK (Internet Explorer).

    Internet Explorer (version 6 and 7) don't seem to recognize the layout. All elements are positioning themselves on the far left.
    Checked w3schools.com for coding compatibility; the site should be working.

    I am calling to an external template file.
    Code:
    <link rel="stylesheet" type="text/css" href="template.css" />
    Example code in the template.css file. Nothing complex here.
    Code:
    body {
    	bgcolor: #ffffff;
    	background-image: url("titlebar800_600_faceLift_purple.gif");
    	background-position: 94px 0px;
    	background-repeat: no-repeat;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;	
    }
    
    div#date {
    	position: fixed;
    	left: 625px;
    	top: 7px;
    	color: #FFFFFF;
    	font-weight: bold;	
    }
    
    table#one {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Hmm... At least for IE6 fixed positioning isn't supported. As for IE7 I don't know what the problem could be. Do you have a link?

  • #3
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    I came across this hack for getting IE to simulate static positioning:

    In the main file I have:

    <!--[if lte IE 6]>
    <style type="text/css">
    /*<![CDATA[*/
    html {overflow-x:auto; overflow-y:hidden;}
    /*]]>*/
    </style>
    <![endif]-->

    In the css file I have:

    .access { display:block; top:0px; left:0px;
    position:fixed; border:2px solid black; padding: 1em;
    text-align: left; background-color: #FFFFF0;}
    * html .access {position:absolute;}

    This does seem to work in IE6.IE7 does support fixed positioning.

    John Rostron

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,777
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    Can you show us your complete code please? I’m sure there are solutions without hacks. Do you have a doctype in your document?
    And please put your code in [code][/code] tags (you can generate those by pressing the small '#' button in the reply window).

  • #5
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by JohnRostron View Post
    I came across this hack for getting IE to simulate static positioning:
    I think the hack that you are referencing comes from Stu Nicholls and is shown here. Some necessary parts of the code are missing in your example. However, there may be problems with that method. The vertical scrollbar may not always reside on the right side of the viewport, but may get pushed out.

    You could also a dynamic expressions. That would depend on JavaScript being enabled, but here is an example by Anne van Kesteren.

  • #6
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    And please put your code in tags (you can generate those by pressing the small '#' button in the reply window).
    First, thanks for pointing out how to wrap code up. I knew it was possible, but could not see how.

    Almost all the pages I produce are for use in a Virtual Learning Environment (WebCT Vista), and I test them all on FF, IE6 and IE7. The default width is set to fit within the framework of this.

    They are all based on a template like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <meta name="robots" content="noindex, nofollow" />
    <link rel="stylesheet" href="../BS1202/Online%20materials/Styles/Resources.css" type="text/css" />
    <script type="text/javascript" src="../BS1202/Online%20materials/Scripts/Screen.js"></script>
    <script type="text/javascript" src="../BS1202/Online%20materials/Scripts/Access.js"></script>
    <!--[if lte IE 6]>
       <style type="text/css">
       /*<![CDATA[*/ 
    html {overflow-x:auto; overflow-y:hidden;}
       /*]]>*/
       </style>
    <![endif]-->
    
    <title>***Doc*Title***</title>
    </head>
    <body bgcolor="#FFFFE5" onload="loadOptions()" onblur="saveOptions();">
    <!-- Parchment, not white -->
    
    <div id="TopLines"></div>
    
    <div id="Main">
    .
    .
    </div> <!-- Main -->
    
    <div id="BottomLines"></div>
    
    </body>
    </html>
    The div labeled TopLines is populated with this code (using Ajax) from an include file:

    Code:
    <div class="noPrint">
    
    <!-- Access Stub Box -->
    <div class="access"  id="accessStub">
    .
    .
    </div>
    
    <!-- Access Labels Box -->
    <div class="access"  id="accessLab">
    .
    .
    </div>
    
    <!-- Access Options Box -->
    <div class="access"  id="accessOpts">
    .
    .
    </div>
    
    <!-- Access Help Box -->
    <div class="access"  id="accessHelp">
    .
    .
    </div>
    
    <div class="glossItem" id="glossBox">
    <p>Dummy Text</p>
    </div>
    
    </div>
    I have removed the content of these boxes here. They are set as static boxes, and are positioned at the top left of the screen. They control various aspects of accessibility (changing font size or background colour). They can be reduced to a stub (#accessStub).

    The CSS appropriate to all these is:

    Code:
    body {background-color: #ffffe5;  font-family: Verdana, "Trebuchet MS", Georgia, sans-serif; }
    
    @media screen {
    
    body { margin:0; padding:0 10px 0 10px; border:0; height:100%;
          overflow-y:auto; background-color: #FFE;
              text-align: center; }
    
    #Main { margin: 0px auto; display:block; width:700px;
               border:1px solid #000; background:#FFE; padding:2em;
               text-align: left; }
    
    .access { display:block; top:0px; left:0px;
           position:fixed; border:2px solid black; padding: 1em;
               text-align: left; background-color: #FFFFF0;}
    * html .access {position:absolute;}
    
    .glossItem { display: none; top:100px; left: 200px; width: 300px;
           position:fixed; border:2px solid black; padding: 1em;
               text-align: left; background-color: #FFFFF0;}
    * html .glossItem {position:absolute;}
    
    #accessStub { width: 15px; padding: 0.2em; display: none; }
    #accessStub h3 { margin: 0px; }
    
    #accessLab { width: 150px; display: block; }
    
    #accessOpts { width: 560px; display: none; }
    
    #accessHelp { width: 700px; display: none; }
    }
    Before I used the IE6 hack, these access boxes placed themselves at the top of the page and scrolled. I also use similar code to position glossary items in the centre of the page.

    John Rostron

  • #7
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    yeah, that is the technique used by Stu Nicholls. The important part that was missing in your first post was this:
    Code:
    body {
      overflow-y: scroll;
      height: 100%;
    }


  •  

    Posting Permissions

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