Hello Tek-tips users!
My apologies if this has been covered, but I am not finding anything helpful to my particular situation.
I have a page at with the following HTML/CSS code:
I am able to have the page render the way I like in Chrome, Opera, Safari, and Firefox, but NOT in (you guessed it) Internet Explorer.
I am trying to have the "inner" div fit the height of the viewport, whether or not there is content inside or not.
However, practically NONE of my positioning works in IE. The "side" div is wrong (but acceptable), and the "main" and "inner" divs end at the bottom of the content. Can anyone advise on a fix?
(Any unrelated tips on my code are also appreciated.)
Thanks for any input,
Dave
My apologies if this has been covered, but I am not finding anything helpful to my particular situation.
I have a page at with the following HTML/CSS code:
Code:
<?php include('includes/php/suntime.php');?> <!-- Script to categorize server time -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Home - davidlayzell.com</title>
<link rel="stylesheet" type="text/css" href="./includes/css/styles.css" >
<script src="./includes/js/menu_fader.js" type="text/javascript"></script>
<!-- Script containing functions for showing resumes menu, and fading menu after idle period -->
</head>
<body id="<? echo($style); ?>"> <!-- Sets the body's ID to a server time category, showing different backgrounds -->
<div id="container">
<div id="side">
<script type="text/javascript" src="[URL unfurl="true"]http://output84.rssinclude.com/output?type=js&id=73878&hash=bd71cd4dcb39bfd29967a0c11757b066"></script>[/URL]
<!-- Script containing functions to embed an RSS feed of my twitter account. Twitter.com/dlayzell -->
</div>
<div id="main">
<div id="inner">
<div id="header">Meet David Layzell</div>
<div id="chron">
<? echo(date("l\, F dS\, Y h:i A")) ?> <!-- Command outputting current server date/time -->
</div>
<div id="video">
<object width="425" height="344">
<param name="movie" value="[URL unfurl="true"]http://www.youtube.com/v/tJ66rU_DcOg&hl=en_US&fs=1&"></param>[/URL]
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="[URL unfurl="true"]http://www.youtube.com/v/tJ66rU_DcOg&hl=en_US&fs=1&"[/URL] type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>
</div>
<div id="menubar">
<span id="resumewrap">
<a href="./resumes/dev" onmouseover="show_resume_menu ();" alt="Resumes">Resumes</a> -
<span id="resumes" onmouseout="set_fader(100);">
<a href="./resumes/dev" onmouseover="set_opacity();" onmouseout="set_fader(5000);" alt="Developer">Developer</a><br><hr>
<a href="./resumes/sysadm" onmouseover="set_opacity();" onmouseout="set_fader(5000);" alt="Sys Admin">System Admin</a>
</span>
</span>
<a href="./Portfolio" onmouseover="set_fader(100);" alt="Portfolio">Portfolio</a> -
<a href="./testimonials" onmouseover="set_fader(100);" alt="Testimonials">Testimonials</a> -
<a href="./projects" onmouseover="set_fader(100);" alt="Projects">Projects</a> -
<a href="./contact" onmouseover="set_fader(100);" alt="Contact">Contact</a>
</div>
<div id="footer">Hosted by <a href="[URL unfurl="true"]http://www.bravenet.com/">Bravenet</a>[/URL] | Contact <a href="mailto:david_layzell@hotmail.com">Webmaster</a> | Copyright © David Layzell</div>
</div>
</div>
</div>
</body>
</html>
Code:
body {
font: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
margin: 0px;
max-width: 1680px;
min-width: 994px;
}
#container #side {
float: left;
position: fixed;
left: 15px;
top: 20px;
width: 300px;
}
#container #side div{
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius:5px;
}
#container #main {
min-height: 95.25%;
min-width: 678px;
margin: 0px;
max-width: 1335px;
position: absolute;
bottom: 0px;
left: 315px;
right: 0px;
top: 0px;
}
#container #main #inner {
background-color: white;
margin: 0px 15px;
min-height: 95.25%; /*Note: This could use work, but looks good enough for now */
min-width: 648px;
padding: 15px;
position: absolute;
bottom: 0px;
top: 0px;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
}
#container #main #inner #header {
border: 1px solid black;
color: #0084B4;
font: bold 1.5625em Arial, Helvetica, sans-serif;
height: 35px;
padding: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#container #main #inner #chron {
color: gray;
font: 0.625em Arial, Helvetica, sans-serif;
text-align: right;
}
#container #main #inner #video {text-align: center;}
#container #main #inner #menubar {
background-color: #0084B4;
color: #FFFFFF;
font: 0.9375em Arial, Helvetica, sans-serif;
height: 25px;
line-height: 25px;
padding: 5px;
text-align: center;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#container #main #inner #menubar a{text-decoration: none;}
#container #main #inner #menubar a:link{color: #FFFFFF;}
#container #main #inner #menubar a:visited{color: #FFFFFF;}
#container #main #inner #menubar a:hover{color: yellow;}
#container #main #inner #menubar a:active{color: red;}
#container #main #inner #menubar #resumewrap {position: relative;}
#container #main #inner #menubar #resumewrap #resumes{
background-color: #0084B4;
border: 2px solid white;
padding: 5px;
position: absolute;
top: 15px;
left: 5px;
visibility: hidden;
width: 110px;
}
#container #main #inner #footer{
background-color: lightgray;
font: 0.75em Arial, Helvetica, sans-serif;
height: 15px;
padding: 5px;
position: absolute;
bottom: 15px;
left: 15px;
right: 15px;
text-align: center;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#container #main #inner #footer a:link{color: blue;}
#container #main #inner #footer a:visited{color: blue;}
#container #main #inner #footer a:hover{color: gray;}
#container #main #inner #footer a:active{color: red;}
/***************************************************************************
Time-Sensitive Background IDs
***************************************************************************/
#sunset {background: url('../../images/sunset.jpg') repeat-x #BE7001;}
#sunrise {background: url('../../images/sunrise.jpg') repeat-x #000000;}
#day {background: #0A6FBF url('../../images/day.jpg') repeat-x -20px 0px;}
#night {background: url('../../images/night.jpg') repeat-x #021134;}I am able to have the page render the way I like in Chrome, Opera, Safari, and Firefox, but NOT in (you guessed it) Internet Explorer.
I am trying to have the "inner" div fit the height of the viewport, whether or not there is content inside or not.
However, practically NONE of my positioning works in IE. The "side" div is wrong (but acceptable), and the "main" and "inner" divs end at the bottom of the content. Can anyone advise on a fix?
(Any unrelated tips on my code are also appreciated.)
Thanks for any input,
Dave
