page height problems w/ IE and Firefox

Forum Moderators: open

Message Too Old, No Replies

page height problems w/ IE and Firefox

noclu

8:41 pm on Aug 27, 2007 (gmt 0)

Hey guys, this is my first post. I am having a dilemma where internet explorer and firefox do not show my pages the same. Because I am using div's of fixed heights, the firefox version leaves around 400 pixels of extra column at the bottom of long pages. To solve the problem I would like to create a blank template that has a minimum height, my organization's footer at the bottom, but will automatically adjust the height to whatever content placed in the two columns. I am stuck, please ask me questions if more information, otherwise, any suggestions? THANKS!

Marshall

9:17 pm on Aug 27, 2007 (gmt 0)

Can you post relevant CSS and HTML?

Marshall

noclu

5:54 am on Aug 28, 2007 (gmt 0)

The CSS (single, separate stylesheet):

#body {height: 965px; width: 765px; background: #000; position: 5px 0px ; font-family: Arial, Eurostile; font-size: 10pt; color: #ECECEC;}

#navigate {text-align: center; margin-top: 5px; color: #000; height: 10px ; }

#main {float: left; background: #ECECEC; color: #000; height: 799px; width: 560px; position: absolute; top: 166px;}

#maincontent {position: absolute; padding: 8px; height: 100% }

#updates {width: 185px; height: 100%; position: absolute; top: 165px; left: 565px; padding-left: 10px; float: right; color: #FFF;}

#footer {text-align: center; width: 545px; position: absolute; bottom: 30px; }

HTML:

<!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">

<title>the title</title>

<LINK REL=StyleSheet HREF="stylesheet.css" TYPE="text/css" MEDIA=screen>
</head>
<body>
<div id="body">
javacript menu items
</div>

<div id="main">
<div id="maincontent">
MAIN PAGE STUFF

<div id="footer" style="text-align: center;">
FOOTER STUFF
</div>

</div>

</div>

<div id="updates" style="padding-top: 5px;">
updates is a sidebar
</div>

Thanks in advance for your time!

Marshall

7:22 am on Aug 28, 2007 (gmt 0)

This should accomplish what you want. It is a fixed width layout that centers on the screen. You will have to play with margins and padding though. I changed the background color of the footer so you can see where it falls. It works fine in IE and FF. Just copy and paste the entire code and test it.

Marshall

<!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">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example</title>
<style type="text/css">
body {height: 100%; background: #000; font-family: Arial, Eurostile; font-size: 10pt; color: #ECECEC;}

#container {
margin: 0 auto;
width: 765px;
height: 100%;
padding: 0;
text-align: left; /* Need for IE */
}

#navigate {text-align: center; margin-top: 5px; color: #FFF; width: 100%; padding: 10px 0;}

#maincontainer {
width: 765px;
padding: 0;
clear: both;
background: #ECECEC
}

#maincontent {width: 550px; float: left; padding: 8px; height: 100%; background: #ECECEC; color: #000; }

#updates {width: 175px; float: right; height : 100%; padding:5px 5px 5px; 10px; background: #000; color: #FFF;}

#footer {width: 580px; float: left; text-align: center; padding 5px; background: #0F0; /*#ECECEC;*/ color: #000;}
</style>
</head>

<body>
<div id="container">
<div id="navigate">NAVIGATION NAVIGATION NAVIGATION NAVIGATION NAVIGATION
NAVIGATION NAVIGATION</div>
<div id="maincontainer">
<div id="maincontent">MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN
CONTENT MAIN CONTENT MAIN CONTENT</div>
<div id="updates">UPDATES UPDATES UPDATES UPDATES UPDATES UPDATES UPDATES
UPDATES UPDATES</div>
<br style="clear:both" />
</div>
<div id="footer">FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER</div>
</div>

</div>
</body>

</html>

noclu

8:00 pm on Aug 29, 2007 (gmt 0)

hey thanks a lot for your input. I will take your example and see if I can make it work for me. Very much appreciated!

noclu

9:12 pm on Aug 29, 2007 (gmt 0)

Thanks so much Marshall� you resolved the automated height issue beautifully. I am using a javascript drop-down menu, however, that causes the entire height of the page to be altered (I would just like the drop-downs to float on top while leaving the page unchanged). I have done much tampering to no avail, and this is the final step I need. Anybody help me on this one? Here is the document with the menu:

<!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">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example</title>
<style type="text/css">
body {height: 100%; background: #FFF; font-family: Arial, Eurostile; font-size: 10pt; color: #ECECEC;}

#container {
margin: 0 auto; background: #000;
width: 765px;
height: 100%;
padding: 0;
text-align: left; /* Need for IE */
}

#navigate {text-align: center; margin-top: 0px; color: #FFF; width: 100%; }

#maincontainer {
width: 765px;
padding: 0;
clear: both;
background: #ECECEC
}

#maincontent {width: 550px; float: left; padding: 8px; height: 100%; background: #ECECEC; color: #000; }

#updates {width: 175px; float: right; height : 100%; padding:5px 5px 5px; 10px; background: #000; color: #FFF;}

#footer {width: 580px; float: left; text-align: center; padding 5px; background: #0F0; /*#ECECEC;*/ color: #000;}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu {
padding-top: 5px; height: 21px;
z-index:100;
width: 100%;
}

#menu dl {
float: left;
width: 8em;
margin: 0 1px;
}

#menu dt {
cursor: pointer;
text-align: center;
background: #000;
color: #FFF;
border: 1px solid #df9b24; border-left: 0; border-top: 0;
}

#menu dd {
border: 1px solid #df9b24;
}

#menu li {
text-align: center;
background: #fff;
}

#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}

#menu li a:hover, #menu dt a:hover {
background: #497fbf;
}
</style>

<!--

</head>

<dl>
<dt onmouseover="javascript:montre('smenu1');">COURSES</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="courses.html">Descriptions</a></li>
<li><a href="coursesched.html">Schedule</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu2');">STUDENTS</dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul>
<li><a href="major.html">Majors</a></li>
<li><a href="minor.html">Minors</a></li>
<li><a href="prospective.html">Prospective Students</a></li>
<li><a href="combinedplan.html">Combined Plan</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre();"><a href="staff.html" style="color: #FFF;">STAFF</a></dt>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu4');">TUTORING</dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
<ul>
<li><a href="tutorsched.html">Schedule</a></li>
<li><a href="tutors.html">Tutors</a></li>
</ul>
</dd>
</dl>

</div>
</div>
<div id="maincontainer">
<div id="maincontent">MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN CONTENT MAIN
CONTENT MAIN CONTENT MAIN CONTENT</div>
<div id="updates">UPDATES UPDATES UPDATES UPDATES UPDATES UPDATES UPDATES UPDATES UPDATES UPDATES UPDATES UPDATES
</div>
<br style="clear:both" />
</div>
<div id="footer">FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER
</div>
</div>
</div>
</body>

</html>

THANKS AGAIN!