...

View Full Version : Can anyone figure this out? IE/Mozilla differences.



pixelEngine
12-09-2005, 04:47 PM
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. :thumbsup:

p.s. Please ignore the look of it, purely a css/xhtml mockup and the coloring is just for block bounds. ;)

pixelEngine
12-09-2005, 08:45 PM
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.

glish_dreams
12-09-2005, 09:43 PM
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

emehrkay
12-09-2005, 09:47 PM
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

_Aerospace_Eng_
12-09-2005, 10:13 PM
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.

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

pixelEngine
12-09-2005, 10:36 PM
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. :rolleyes:

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.....



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum