...

View Full Version : CSS height 100% too long!! please help



ivy1010
05-05-2011, 06:20 AM
Hi all.
I've been hitting my head over this one for 4 days now :( and just cant seem to work it out so ANY help will be GREATLY appreciated (ohh my poor head). I have Googled and searched and read forums and hit my head, but no joy as yet.

I need the divs to be 100% height, but they seem longer than that. There is no content to make them so long...

Also, my footer seems to sit over the divs??!! I've never had this problem before, but then I never got the 100% height to work before either. Needless to say, I am not the sharpest crayon when it comes to CSS, still learning and loving it!!

Here is my code:


/* CSS Document */

html {
height:100%;
}

body{
background-color:#c7cb8e;
margin:0px;
padding:0px;
height:100%;
}

A:link {text-decoration: none; color: blue;}

A:visited {text-decoration: none; color:blue;}

A:active {text-decoration: none}

A:hover {text-decoration: underline; color: #768345;}

#all {
background-color:#dfe4bc;
width:1000px;
height:100%;
margin:0 auto;
}

#banner {
position:relative;
float: left;
width:1000px;
height:76px;
background-image:url("../images/banner.png");
background-repeat:no-repeat;
}

#name {
position:relative;
float:left;
width:1000px;
height:62px;
background-image:url("../images/name.png");
background-repeat:no-repeat;

}



#leftCol {
position:relative;
float:left;
width:375px;
height:100%;
background-color:#dfe4bc;
}


#flower {
width:375px;
height:280px;
background-image:url("../images/flower.png");
background-repeat:no-repeat;
padding:0px 0px 0px 0px;

}



#book {
height:390px;
width:202px;
background-color:#c7cb8e;
text-align:right;
padding:0px 0px 0px 0px;
background-image:url("../images/stemLong.png");
background-repeat:no-repeat;
float:left;
display:inline;

}

#menu {
width:173px;

text-align:left;
background-color:#dfe4bc;

}

#links {
width:173px;

text-align:left;
float:left;
display:inline;
background-color:#dfe4bc;
margin-top:-115px;
}

#leftLow {
width:202px;
height:100%;
background-color:#c7cb8e;
background-image:url("../images/stemRepeat1.png");
background-repeat:repeat-y;
background-color:grey;
float:left;
display:inline;
}

#text {
float:right;
width:625px;
padding:0;
margin:0;
}

.contentheading {
color: #69183c;
font-size:140%;
}

.contentpaneopen {
padding-right:20px;
background-color:#dfe4bc;
}

#footer {
position:relative;
float:right;
width:1000px;
height:59px;
background-image:url("../images/grass.png");
background-repeat:no-repeat;
}

<!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>Kim Balson - Naturopath</title>
<meta name="title" content="" />
<meta name="description" content="" />
<meta name="keywords" content="" />





<!--[if !IE]>-->
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/style.css" type="text/css" />
<!--<![endif]-->

<!--[if IE]-->
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/.css" type="text/css" />
<!--[endif]-->

<!--[if lte IE 6]-->
<link href="templates/<?php echo $this->template ?>/css/.css" rel="stylesheet" type="text/css" />
<!--[endif]-->

<!--[if lte IE 7]-->
<link href="templates/<?php echo $this->template ?>/css/.css" rel="stylesheet" type="text/css" />
<!--[endif]-->

</head>

<body>

<div id="all">

<div id="banner">
</div>

<div id="name">
</div>

<div id="leftCol">

<div id="flower" colspan="2">
</div>
<div id="book"><?php mosLoadModules ('book'); ?></div>

<div id="menu"><?php mosLoadModules ('menu'); ?></div>

<div id="leftLow">&nbsp;</div>

<div id="links"><?php mosLoadModules ('links'); ?></div>

</div>

<div id="text" valign="top"><?php mosMainBody ( '' ); ?>
</div>

<div id="footer"><?php mosLoadModules ('footer'); ?>
</div>


</div>


</body>
</html>


:D

Dr3am3rz
05-05-2011, 07:31 AM
Is it the same for all browsers??

ivy1010
05-05-2011, 08:10 AM
I've only looked at it in FF and IE and it is the same in both browsers. I'm using latest versions of these browsers.
Thanks :thumbsup:

Dr3am3rz
05-05-2011, 08:30 AM
I tried to test your codes but most of it are from your php files so I can't get the real height problem that you are facing. Haha.. =x

ivy1010
05-05-2011, 08:58 AM
Hi and thanks for that. ha ha ha hoooo ooohhh my poor old head.

Yes, probably should have mentioned its for a CSM site, if that helps? I'm using Joomla.:o

Dr3am3rz
05-05-2011, 09:39 AM
Hmm.. I still don't quite get what you mean by the height thingy but I notice your code under the css stylesheet link, you missed out the style.css? Try to fix that 1st? The red ones are the errors.




<!--[if !IE]>-->
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/style.css" type="text/css" />
<!--<![endif]-->

<!--[if IE]-->
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/.css" type="text/css" />
<!--[endif]-->

<!--[if lte IE 6]-->
<link href="templates/<?php echo $this->template ?>/css/.css" rel="stylesheet" type="text/css" />
<!--[endif]-->

<!--[if lte IE 7]-->
<link href="templates/<?php echo $this->template ?>/css/.css" rel="stylesheet" type="text/css" />
<!--[endif]-->

ivy1010
05-05-2011, 09:48 AM
well...... bugger! Didn't see that (must have been from banging my head).
OK, have fixed that but no change to the layout. I have attached a screen shot so you can see what I am talking about, of course the grass (footer image) should just sit at the bottom of the screen, however, it sits up and begs like a dawg and the strip {leftLow} on the left just is just too long!! It should stop at the footer.
Thanks.

abduraooft
05-05-2011, 10:03 AM
Post the html code taken from browser's "view source" option, or a link would be much better.

ivy1010
05-05-2011, 10:07 AM
Hi, sorry but no link, the site can't go live until this is fixed.
Here is the source 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=utf-8" />

<title>Kim Balson - Naturopath</title>
<meta name="title" content="" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<link rel="stylesheet" href="/templates/balson2/css/style.css" type="text/css" />

<!--[if IE]>
<link rel="stylesheet" href="/templates/balson2/css/IEtemplate.css" type="text/css" />
<![endif]-->

</head>
<body>

<div id="all">

<div id="banner">
</div>

<div id="name">
</div>

<div id="leftCol">

<div id="flower">
</div>
<div id="book"> <table cellpadding="0" cellspacing="0" class="moduletable">

<tr>
<th valign="top">
My Book </th>
</tr>
<tr>
<td>
<table style="width: 100%;" border="0">
<tbody>
<tr>

<td style="width: 20%;"></td>
<td>
<p style="text-align: center;"><img src="/images/stories/thumbbook%20new%20%282%29.jpg" border="0" alt="Women to Women by Kim Balson, Naturopath" title="Women to Women by Kim Balson, Naturopath" /></p>
<p style="text-align: center;"><span style="font-size: small;">Her depth of experience in a whole range of natural remedies is best demonstrated by her best selling book "<strong><a href="http://www.kimbalson.com/order.html">Woman to woman, managing your hormones safely and naturally</a>" which is now into its fourth print. </strong><strong><br /> <a href="http://www.kimbalson.com/mailform.html" target="_blank"> You can buy Kim's book at this link.</a></strong><em><br />(printable mail order form)</em></span></p>
</td>
<td style="width: 20%;"></td>
</tr>
</tbody>
</table> </td>

</tr>
</table>
</div>

<div id="menu"> <table cellpadding="0" cellspacing="0" class="moduletable_menu">
<tr>
<th valign="top">
Main Menu </th>

</tr>
<tr>
<td>

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr ><td><a href="/index.php?option=com_content&amp;view=frontpage&amp;Itemid=1" class="mainlevel" id="active_menu">Home</a></td></tr>
<tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=2&amp;Itemid=2" class="mainlevel" >About Kim</a></td></tr>
<tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=3&amp;Itemid=3" class="mainlevel" >Overview</a></td></tr>
<tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=4&amp;Itemid=4" class="mainlevel" >Consultations</a></td></tr>
<tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=5" class="mainlevel" >Speaking Engagements</a></td></tr>

<tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=21&amp;Itemid=6" class="mainlevel" >Enquiries</a></td></tr>
<tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=7&amp;Itemid=7" class="mainlevel" >Contact</a></td></tr>
<tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=22&amp;Itemid=10" class="mainlevel" >Newsletter</a></td></tr>
<tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=9&amp;Itemid=8" class="mainlevel" >Arbonne</a></td></tr>
<tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=10&amp;Itemid=9" class="mainlevel" >Testimonials</a></td></tr>
<tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=23&amp;Itemid=21" class="mainlevel" >Podcasts</a></td></tr>
</table> </td>
</tr>
</table>

</div>

<div id="leftLow">&nbsp;</div>

<div id="links"> <table cellpadding="0" cellspacing="0" class="moduletable">
<tr>
<th valign="top">
Links </th>
</tr>
<tr>

<td>

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=11&amp;Itemid=11" class="mainlevel" >Naturopathy</a></td></tr>
<tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=12&amp;Itemid=12" class="mainlevel" >Herbal</a></td></tr>
<tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=13&amp;Itemid=13" class="mainlevel" >Nutrition</a></td></tr>
<tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=14&amp;Itemid=14" class="mainlevel" >Diet</a></td></tr>
<tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=15&amp;Itemid=15" class="mainlevel" >Fertility</a></td></tr>
<tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=16&amp;Itemid=16" class="mainlevel" >Iridology</a></td></tr>
<tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=17&amp;Itemid=17" class="mainlevel" >Hormonal Imbalance</a></td></tr>

<tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=18&amp;Itemid=18" class="mainlevel" >Allergies</a></td></tr>
<tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=19&amp;Itemid=19" class="mainlevel" >Weight</a></td></tr>
<tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=20&amp;Itemid=20" class="mainlevel" >Digestive</a></td></tr>
</table> </td>
</tr>
</table>
</div>

</div>

<div id="text"><table class="blog" cellpadding="0" cellspacing="0">

<tr>
<td valign="top">
<div>

<table class="contentpaneopen">
<tr>
<td class="contentheading" width="100%">
Kim Balson has been a practising naturopath for over 21 years. </td>



</tr>
</table>
<table class="contentpaneopen">




<tr>
<td valign="top" colspan="2">
<p align="left"><a href="http://www.kimbalson.com/order.html"> <img src="http://www.kimbalson.com/images/thumbbook%20new%20%282%29.jpg" border="1" width="116" height="200" align="right" /></a> Her depth of experience in a whole range of natural remedies is best demonstrated by her best selling book "<strong><a href="http://www.kimbalson.com/order.html">Woman to woman, managing your hormones safely and naturally</a>" which is now into its fourth print. </strong></p>
<p align="left"><strong><br /> <a href="http://www.kimbalson.com/mailform.html" target="_blank"> You can buy Kim's book at this link.</a></strong><em><br />(printable mail order form)</em> <br /><br /></p>

<p>Kim also has a newsletter, if you would like to subscribe to it please
<script language='JavaScript' type='text/javascript'>
<!--
var prefix = 'mailto:';
var suffix = '';
var attribs = '';
var path = 'hr' + 'ef' + '=';
var addy42017 = 'kim' + '@';
addy42017 = addy42017 + 'kimbalson' + '.' + 'com';
var addy_text42017 = 'Email Kim';
document.write( '<a ' + path + '\'' + prefix + addy42017 + suffix + '\'' + attribs + '>' );
document.write( addy_text42017 );
document.write( '<\/a>' );
//-->
</script><script language='JavaScript' type='text/javascript'>
<!--
document.write( '<span style=\'display: none;\'>' );
//-->
</script>This e-mail address is being protected from spambots. You need JavaScript enabled to view it
<script language='JavaScript' type='text/javascript'>
<!--
document.write( '</' );
document.write( 'span>' );
//-->
</script> and let her know!</p>
<p> </p>
<p align="left">Kim continually researches through the Internet and has an enormous depth of knowledge which has led to numerous radio and television interviews and her popular speaking engagements on her recognised area of expertise - <em>managing women's hormones</em>. Kim's talks are often sold out.</p>
<p> </p>
<p align="left"><a href="http://www.kimbalson.com/speak.html">MOST RECENT SEMINARS - BLACKALL QLD click to view </a></p>

<p> </p>
<p align="left">Kim has her offices at 398 Tarragindi Rd, Moorooka - just minutes from the city of Brisbane (<strong><a href="http://www.kimbalson.com/contact.html">see map at this link</a></strong>). During consultations Kim's empathy shines through with many of her patients often going into intimate details of their lives which helps Kim assess their best road forward. <strong>NOTE: </strong>Consultations may be made over the phone.</p>
<p> </p>
<p align="left"><strong> Clinic is by appointment. </strong><br /> Clinic days for Kim are Tuesday, Thursday, Friday and every second Saturday morning.</p>
<p> </p>

<p align="left"><strong> Take the links to the left or below for more information on Kim Balson and how to organise a consultation or speaking engagement. </strong> <br /><br /></p>
<p align="center"><strong> Kim Balson ND<br /> PO Box 3048 Tarragindi 4121 <br /> Phone: 07 3848 9800 <br /> <br /><br /> </strong></p>
<p><a href="http://www.naturaltherapypages.com.au/therapist/15730" title="natural therapies"><img src="http://www.naturaltherapypages.com.au/media_library/Image/share_ntpages/natural_therapies.gif" border="0" alt="natural therapies" style="margin: 5px;" /></a></p></td>
</tr>


</table>
<span class="article_separator">&nbsp;</span>
</div>
</td>
</tr>


</table>
</div>

<div id="footer"> <table cellpadding="0" cellspacing="0" class="moduletable">
<tr>

<td>
<p>copyright 2011 Kim Balson | <a href="http://www.ivywebdesign.com.au" target="_blank">website by Ivy Web Design</a></p> </td>
</tr>
</table>
</div>

</div>

</body>

</html>



Thanks.

Dr3am3rz
05-05-2011, 10:09 AM
Hmm.. Is it possible to post the site link? That way would be easier for me to view. =)

Dr3am3rz
05-05-2011, 10:10 AM
Hmm.. Is it possible to post the site link? That way would be easier for me to view. =)

Ah~~ Ok. I just saw what you post.

Dr3am3rz
05-05-2011, 10:26 AM
Ahh~~ The layout is really hay wired on my side of view. =( But anyway, can you remove the height of the body in ur css? See if it helps in the height you are trying to refer to?

Dr3am3rz
05-05-2011, 10:32 AM
Just wanna ask if your footer image's width is it 1000px? If it is try to change the footer width in your css to 100% instead of 1000px. Hope it helps. =S

ivy1010
05-05-2011, 10:45 AM
Tried that, it fixed the issue with the footer position and with things beig too long but it leaves the left divs too short. *sigh* frusterating. Thanks, I really appreciate your help.

ivy1010
05-05-2011, 10:55 AM
Hi. dont know what happened, I think my computer sneezed. My last response was to your suggestion to remove 100% from the body.
This is to your last suggestion of changing the footer width from 1000px to 100%.
I have attached a pic of the result. There was a change, just not what I'm after.
Thanks again:thumbsup::thumbsup:

Dr3am3rz
05-05-2011, 11:15 AM
Hmm.. So what's the height you are trying to change? And as for the footer you meant the image and the words in it wants to be aligned with the Natural Therapy logo? And currently the changes I've suggested, does it screwed up your supposedly to be layout? =S

Dr3am3rz
05-05-2011, 11:21 AM
Oh, I just happened to see the previous post before you post the screenshot. Why not you draw and indicate how you want or what you want to change on the screenshot, that way I think will be much easier to understand I guess? =x

And as well as the lower left section, the different color in the background image. Is it suppose to be like that or it should be the color of which?

teedoff
05-05-2011, 02:44 PM
Hi, sorry but no link, the site can't go live until this is fixed.
Here is the source code:



Issues may still arise when you publish the site, which is why you should always have a site live on a server during development and testing phases. You can block it from public access if you want too.

Now, gonna need your css code as well.

ivy1010
05-06-2011, 03:05 AM
I've put the site live, you can see it online HERE (http://www.ivy1010.byethost9.com/)

I'm hoping this will help someone to help me work out where I have gone wrong, what I have missed, ect with regard to why these left divs go too long.

Thanks everyone, any help much appreciated.:D

Dr3am3rz
05-09-2011, 08:53 AM
Hi, I've viewed your site, it seems ok to me. Is it solved already or there's still problem with the footer?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum