I.E. Cutting Off Page

**Poop Loops** · 12-30-2007, 06:40 PM

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.

**HTML** · 01-07-2008, 01:36 PM

moved to CSS Forum

**futureproof** · 01-07-2008, 09:15 PM

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.

Thread: I.E. Cutting Off Page

Thread Tools

Related

How do you use the “include function” to put a HTML Page (top.htm) onto a PHP Page? Forum: PHP Forum

Passing variables from HTML page to page Forum: HTML Forum

Getting a blank page while returning from page with form Forum: PHP Forum

I want my web page to look & print like one page but to have only a part of it refres Forum: HTML Forum

I.E. Cutting Off Page

Re: I.E. Cutting Off Page

Re: I.E. Cutting Off Page

Tags for this Thread

Cloudjiffy- PaaS for Developers