Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Dec 2004
    Location
    Minnesota
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can anyone figure this out? IE/Mozilla differences.

    OK, here is the link in question.

    http://www.imovepixels.com/dev/gv3/layout1.html

    The page validates all the way around, so no troubles there. What the pages should look like is what happens in IE. However Firefox isn't stretching my div vertically like I would like it to.

    Check the page in both browsers and you'll see what I mean.

    Thanks to anyone that can figure this out!!! Have a great friday.

    p.s. Please ignore the look of it, purely a css/xhtml mockup and the coloring is just for block bounds.
    Last edited by pixelEngine; 12-09-2005 at 05:44 PM.
    “That rug really tied the room together. ”

  • #2
    New Coder
    Join Date
    Dec 2004
    Location
    Minnesota
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    oh please please please can someone help me with this?

    _Aerospace I thought you'd jump right on this since the first thing you always ask for is validation, which i have.

    cheers.
    “That rug really tied the room together. ”

  • #3
    Regular Coder
    Join Date
    Dec 2005
    Posts
    141
    Thanks
    0
    Thanked 0 Times in 0 Posts
    well i noticed no change in pages on both firefox and IE ,, what any text post to change from one.two.three.. cuz it didnt

  • #4
    Regular Coder
    Join Date
    May 2005
    Posts
    190
    Thanks
    1
    Thanked 2 Times in 2 Posts
    in css you cant define height with a percentage you need an actual px definition. mozilla is how its supposed to look, its grabbing the height of your biggest div

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by emehrkay
    in css you cant define height with a percentage you need an actual px definition. mozilla is how its supposed to look, its grabbing the height of your biggest div
    Yes you can, but in this case its going 100% height of the nonfooter div which has no height set to it.

    pixelEngine, you need to be patient, we aren't here 24/7, YOU aren't the only person that needs help. We are all volunteers.
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style media="all" type="text/css">
    html{
    height: 100%;
    }
    
    body{
    height: 100%;
    margin: 0;
    padding: 0;
    color: #4C4C4C;
    line-height: 1.4em;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 75%;
    }
    
    #main{
    height: 100%;
    }
    
    * html #main{
    height: 100%;
    }
    
    #header{
    background-color: #003366;
    height: 60px;
    width: 100%;
    }
    
    #contentwrap{
    background-color: #00FF33;
    height:100%;
    }
    
    * html #contentwrap{
    height: 100%;
    }
    
    #content{
    width: 760px;
    margin: 0  auto 10px;
    min-height: 100%;
    height: 100%;
    text-align: left;
    background-color: #9933FF;
    position: relative;
    }
    
    #leftcol{
    height: 100%;
    background-color:#CC6600;
    margin: 0;
    width: 160px;
    float: left;
    }
    
    #maincol{
    height: 100%;
    background-color: #CC9900;
    margin-left: 180px;
    border-left: 1px solid gray;
    margin-right: 200px;
    border-right: 1px solid gray;
    }
    
    #rightcol{
    height: 100%;
    background-color: #CCFF00;
    width: 180px;
    float: right;
    margin: 0;
    }
    
    /******************* left nav */
    
     #navlist
    {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
    }
    
    #navlist li
    {
    padding-left: 10px;
    background-image: url(images/arrow.gif);
    background-repeat: no-repeat;
    background-position: 0 .5em;
    }
    
    /* -------------------- end leftnav */
    
    /******************* footer */
    
    #footer{
    position: relative;
    margin: -80px auto 0 auto;
    clear: both;
    width: 100%;
    padding-bottom: 20px;
    background-color: #003366;
    font-size: 85%;
    color: #A6B8CA;
    text-align: center;
    line-height: 1.2em;
    }
    
    /* A CSS hack that only applies to IE -- specifies a different offset for the footer */
    
    * html #footer{
    margin-top: -70px;
    }
    #bottomLinks{
    list-style: none;
    margin-top: 0;
    margin-left: 0;
    padding-top: 1.5em;
    background-image: url(../images/footer_bg.gif);
    background-repeat: no-repeat;
    }
    
    #bottomLinks li{
    display: inline;
    border-left: 1px solid #527597;
    padding-right: 10px;
    padding-left: 10px;
    }
    
    #bottomLinks li.first{
    /*border-left: 0 none transparent;*/
    }
    
    #bottomLinks a{
    color: #A6B8CA;
    }
    
    #footer p{
    margin-top: 0px;
    }
    /* -------------------- end footer */
    </style>
    </head>
    
    <body>
    <div id="main">
    		<div id="header">header
    		</div>
    
    		
    		<div id="contentwrap">
    			<div id="content">
    				<div id="leftcol">
    					 <div id="navcontainer">
    						<ul id="navlist">
    							<li id="active"><a href="#" id="current">Item one</a></li>
    							<li><a href="#">Item two</a></li>
    							<li><a href="#">Item three</a></li>
    
    							<li><a href="#">Item four</a></li>
    							<li><a href="#">Item five</a></li>
    						</ul>
    					</div>
    				</div>
    				<div id="rightcol">
    					I never spend much time in school but I taught ladies plenty. It's true I hire my body out for pay, hey hey. I've gotten burned over Cheryl Tiegs, blown up for Raquel Welch. But when I end up in the hay it's only hay, hey hey. I might jump an open drawbridge, or Tarzan from a vine. 'Cause I'm the unknown stuntman that makes Eastwood look so fine.
    				</div>
    
    				<div id="maincol">
    					Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!
    <br /><br />
    80 days around the world, we'll find a pot of gold just sitting where the rainbow's ending. Time - we'll fight against the time, and we'll fly on the white wings of the wind. 80 days around the world, no we won't say a word before the ship is really back. Round, round, all around the world. Round, all around the world. Round, all around the world. Round, all around the world.
    				</div>
    			</div><!-- end content -->
    		</div><!-- end contentwrap -->
    </div><!-- end main -->
    
    <div id="footer">
    			<ul id="bottomLinks">
    
    				<li class="first"> <a href="#">Support</a> </li>
    				<li> <a href="#">Employment</a> </li>
    				<li> <a href="#">Contact Us</a> </li>
    			</ul>
    
    			<p> &copy; 2005 xxx Inc. All rights reserved. </p>
    		</div><!-- end footer -->
    </body>
    </html>

  • #6
    New Coder
    Join Date
    Dec 2004
    Location
    Minnesota
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry if anyone thought I was being too eager? I am totally aware that this is a volunteering endeavour and never meant to be annoying, so sorry if i was.

    So what is the solution then? If i set the height to 100% on the #nonfooter it reacts the same? The longest inner div defines the length of the containing div.

    Hmmmmm.....
    “That rug really tied the room together. ”


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •