54 users online (1 members and 53 guests)  


  Results 1 to 3 of 3
  1. #1
    Poop Loops's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2007
    Posts
    4

    Unhappy I.E. Cutting Off Page

    Firefox correctly ends the page where I want, whereas I.E. ends it before all the text is displayed, likely because it just got tired or something.

    Here is the web page in question:

    http://www.phys.washington.edu/groups/admx/home.html

    Sorry, it won't let me post links yet.

    Here is the CSS file I'm using:


    Code:
    body {
           margin: 2px 0px;
           padding: 0px;
           background-color: #000000;
           font-family: arial, sans-serif;
           color: white;
           text-align: center;}
    
    #container {
           width: 990px;
           margin-top: 1px;
           margin-left: auto;
           margin-right: auto;
           background-color: #000000;
           text-align: center;}
           
    #mainPicture {
        float: right;
        width: 310px;
        height: auto;
        background: #000000;
        margin-left: 0px;
        margin-right: 0px;
        position: relative;
        padding-left: 0px;
        padding-right: 0px;
        top: 10px;
        border: none;
        text-align: right;}
    
    #navigation {
        float: left;
        width: auto;
        height: auto;
        position: relative;
        right: 0px;
        top: 10px;
        background-color:#000000;}    
            
    #mainMenu {
        font-size: 1.2em;
        width: 7.6em;
        height: 10.2em;
        border: 2px solid white;
        background-color:#333333;
        text-align: center;
        color: rgb(89, 89, 149);
        font-weight: bold;}
        
    #otherMenu {
        font-size: 1.2em;
        width: 7.6em;
        height: 7.3em;
        border: 2px solid white;
        background-color:#333333;
        text-align: center;
        color: rgb(89, 89, 149);
        font-weight: bold;}
            
    p.normal{
        color: white;
        font-size: 0.8em;
        margin: 0px;}
    
    a.main:link {
        color: orange;
        font-weight: bold;
        text-decoration:none;
        background: #333333;}
    
    a.main:visited {
        color: orange;
        font-weight: bold;
        text-decoration:none;
        background: #333333;}
    
    a.text:link {
        color: yellow;
        font-weight: bold;
        background: #000000;}
    
    a.text:visited {
        color: yellow;
        font-weight: bold;
        background: #000000;}
        
    #SubMenu{
        text-align: left;
        font-size: 0.9em;
        position: relative;
        top: -10px;}
        
    ul.square {
        list-style-type: square;
        color: orange;
        position: relative;
        left: 0px;}
          
    div.desc {
        text-align: center;
          font-weight: normal;
          width: 120px;
          margin: 2px;}
    
    h6 {
        color: blue;
        font-size: 1.7em;
        margin: 0px;}
    You'll have to forgive my crappiness, this is the first web page I have ever made, am still working on it. Any advice would be great, but I really need to fix this problem with IE.

  2. #2
    HTML's Avatar
    Administrator

    Status
    Offline
    Join Date
    Aug 2000
    Posts
    3,445

    Follow HTML On Twitter Add HTML on Facebook Add HTML on Google+ Add HTML on Linkedin Visit HTML's Youtube Channel

    Re: I.E. Cutting Off Page

    moved to CSS Forum
    AHFBWEB Less customers per server, more power for you!

    Business Class Shared Hosting

  3. #3
    futureproof's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2008
    Location
    Canberra
    Posts
    10

    Re: I.E. Cutting Off Page

    For a start, rename your homepage from "home.html" to "index.html"; then make a copy of it and call it "default.html". Keep the "home.html" if you desire.
    The link to your page thus becomes, simply, http://www.phys.washington.edu/groups/admx/ and then view it again in IE.

    I'm new at this too and am slowly converting my table-layout pages to table-less, much like you have attempted.

    I am working with a three 'column' layout thus (and it might work better for you):
    Code:
    /*Tableless Layout*/
    /* Properties that both side lists have in common */
    div.link-list {
    /*width:12em;*/
    width:15%;
    position:absolute;
    top:0;
    font-size:80%;
    margin-left:0;
    margin-right:0;
    padding-left:1%;
    padding-right:1%;
    }
    /* we leave some place on the side using the margin-* properties */
    #main {
    margin-left:15%;
    margin-right:15%;
    /*padding-left:1em;
    padding-right:1em;*/
    padding-left:1%;
    padding-right:1%;
    }
    /* and then we put each list on its place */
    #list1 {
    left:0;
    padding-left:2px;
    }
    #list2 {
    right:0;
    padding-right:0;
    }
    div.float {
    float: left;
    text-align: center;
    margin-top: 1px
    }
     
    div.float p {
    float: left;
    text-align: center;
    margin-top: 1px
    }
    This provides three 'containers': left, main and right; and they will scroll in nearly all (versions of) browsers. Some sample HTML
    HTML Code:
    <!DOCTYPE html 
         PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Tableless Layout | Example.com</title>
    <link rel="stylesheet" type="text/css" href="../css/your.css"/>
    <base href=”http://www.example.com/” target=”_blank”/>
    </head>
    <body>
    <div id="main">
    <h5>Heading</h5>
    stuff here
    <p>This is the main ‘column’ where the quick brown fox jumps over the lazy dog</p>
    </div>  
    <div id="list1" class="link-list">
    links here perhaps
    <p> this is the ‘left’ column in paragraph</p>
    this is the ‘left’ column in Body Text
    </div>
    <div id="list2" class="link-list">
    links here perhaps
    <p> this is the ‘right' column in paragraph</p>
    this is the ‘right' column in Body Text
    </div>
    </body></html>
     
    Hope that helps; meanwhile, I guess I'll take a look at your CSS more closely.



Tags for this Thread