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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy CSS height 100% too long!! please help

    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:
    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>
    Last edited by VIPStephan; 05-05-2011 at 10:30 AM.

  • #2
    New Coder
    Join Date
    Apr 2011
    Posts
    46
    Thanks
    4
    Thanked 8 Times in 8 Posts
    Is it the same for all browsers??

  • #3
    New to the CF scene
    Join Date
    May 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    New Coder
    Join Date
    Apr 2011
    Posts
    46
    Thanks
    4
    Thanked 8 Times in 8 Posts
    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

  • #5
    New to the CF scene
    Join Date
    May 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    New Coder
    Join Date
    Apr 2011
    Posts
    46
    Thanks
    4
    Thanked 8 Times in 8 Posts
    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]-->

  • #7
    New to the CF scene
    Join Date
    May 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Attached Thumbnails Attached Thumbnails CSS height 100% too long!! please help-screen-shot.jpg  

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Post the html code taken from browser's "view source" option, or a link would be much better.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New to the CF scene
    Join Date
    May 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi, sorry but no link, the site can't go live until this is fixed.
    Here is the source code:

    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.
    Last edited by VIPStephan; 05-05-2011 at 10:29 AM.

  • #10
    New Coder
    Join Date
    Apr 2011
    Posts
    46
    Thanks
    4
    Thanked 8 Times in 8 Posts
    Hmm.. Is it possible to post the site link? That way would be easier for me to view. =)

  • #11
    New Coder
    Join Date
    Apr 2011
    Posts
    46
    Thanks
    4
    Thanked 8 Times in 8 Posts
    Quote Originally Posted by Dr3am3rz View Post
    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.

  • #12
    New Coder
    Join Date
    Apr 2011
    Posts
    46
    Thanks
    4
    Thanked 8 Times in 8 Posts
    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?

  • #13
    New Coder
    Join Date
    Apr 2011
    Posts
    46
    Thanks
    4
    Thanked 8 Times in 8 Posts
    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

  • #14
    New to the CF scene
    Join Date
    May 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #15
    New to the CF scene
    Join Date
    May 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Attached Thumbnails Attached Thumbnails CSS height 100% too long!! please help-screen-shot-changed.jpg  


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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