61 users online (0 members and 61 guests)  

> > > > I.E. Cutting Off Page

  Results 1 to 3 of 3
  1. 12-30-2007, 06:40 PM #1
    Poop Loops
    Poop Loops is offline
    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.
    Reply With Quote Reply With Quote
  2. 01-07-2008, 01:36 PM #2
    HTML
    HTML is offline
    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
    Reply With Quote Reply With Quote
  3. 01-07-2008, 09:15 PM #3
    futureproof
    futureproof is offline
    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.


    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Tags for this Thread